适配布局-ios

// 系统的约束代码

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

UIView *superView = self.view;

UIView *viewDemo = [[UIView alloc] init];

viewDemo.translatesAutoresizingMaskIntoConstraints = NO;

viewDemo.backgroundColor = [UIColor orangeColor];

[superView addSubview:viewDemo];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superView addConstraints:@[

　　　　　　　　　　　// viewDemo顶部距离父视图superView顶部距离为padding.top(即为：10)，

[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeTopmultiplier:1 constant:padding.top],

[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeLeft multiplier:1constant:padding.left],

[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right],

[NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeBottomrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 constant:-padding.bottom]

]];

}

// 注：若是把右边约束去掉，改为如下语句

// [NSLayoutConstraint constraintWithItem:viewDemo attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0]

// 则viewDemo的宽度变为superView的0.5倍！！

//***************************************************

// VFL语言

　 UIView *viewLeft = [[UIView alloc] init];

viewLeft.translatesAutoresizingMaskIntoConstraints = NO;

viewLeft.backgroundColor = [UIColor orangeColor];

[self.view addSubview:viewLeft];

UIView *viewRight = [[UIView alloc] init];

viewRight.translatesAutoresizingMaskIntoConstraints = NO;

viewRight.backgroundColor = [UIColor redColor];

[self.view addSubview:viewRight];

// horizontal：水平方向距左边10，距右边10

//简单说来，NSDictionaryOfVariableBindings(scrollView)就等于@{@”scrollView”: scrollView}

NSDictionary *constraintDict = NSDictionaryOfVariableBindings(viewLeft,viewRight);

NSArray *hConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewLeft]-(10)-|"options:0 metrics:nil views:constraintDict];

// vertical：垂直方向距顶部30，控件高度100

NSArray *vConstraintArrayLeft = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(30)-[viewLeft(100)]"options:0 metrics:nil views:constraintDict];

// 添加到父视图上

[self.view addConstraints:hConstraintArrayLeft];

[self.view addConstraints:vConstraintArrayLeft];

NSArray *hConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(10)-[viewRight]-(10)-|" options:0 metrics:nil views:constraintDict];

// viewRight距viewLeft的垂直距离为50

NSArray *vConstraintArrayRight = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewLeft]-(50)-[viewRight(200)]" options:0 metrics:nil views:constraintDict];

[self.view addConstraints:hConstraintArrayRight];

[self.view addConstraints:vConstraintArrayRight];

//***************************************************

// 三方库：Masonry

// 居中

// 快速定义一个weakSelf，用于block里面，防止循环引用

#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self

WS(ws);

UIView *sv = [UIView new];

sv.backgroundColor = [UIColor orangeColor];

// 在做autoLayout之前一定要先将view添加到superView上否则会报错

[self.view addSubview:sv];

[sv mas_makeConstraints:^(MASConstraintMaker *make) {

// 居中

make.center.equalTo(ws.view);

// 设置size

make.size.mas_equalTo(CGSizeMake(300, 300));

}];

3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列间隔为10(自动计算其宽度)

int padding1 = 10;

[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv.mas_left).with.offset(padding1);

make.right.equalTo(sv3.mas_left).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv3);

}];

[sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(sv.mas_centerY);

make.left.equalTo(sv2.mas_right).with.offset(padding1);

make.right.equalTo(sv.mas_right).with.offset(-padding1);

make.height.mas_equalTo(@150);

make.width.equalTo(sv2);

}];

代码效果

这里我们在两个子view之间互相设置的约束可以看到他们的宽度在约束下自动的被计算出来了

4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

UIScrollView *scrollView = [UIScrollView new];

scrollView.backgroundColor = [UIColor whiteColor];

[sv addSubview:scrollView];

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));

}];

UIView *container = [UIView new];

[scrollView addSubview:container];

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(scrollView);

make.width.equalTo(scrollView);

}];

int count = 10;

UIView *lastView = nil;

for ( int i = 1 ; i <= count ; ++i )

{

UIView *subv = [UIView new];

[container addSubview:subv];

subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )

saturation:( arc4random() % 128 / 256.0 ) + 0.5

brightness:( arc4random() % 128 / 256.0 ) + 0.5

alpha:1];

[subv mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.and.right.equalTo(container);

make.height.mas_equalTo(@(20*i));

if ( lastView )

{

make.top.mas_equalTo(lastView.mas_bottom);

}

else

{

make.top.mas_equalTo(container.mas_top);

}

}];

lastView = subv;

}

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(lastView.mas_bottom);

}];

头部效果

尾部效果

从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了

这里的关键就在于container这个view起到了一个中间层的作用能够自动的计算uiscrollView的contentSize

5. [高级] 横向或者纵向等间隙的排列一组view

很遗憾 autoLayout并没有直接提供等间隙排列的方法(Masonry的官方demo中也没有对应的案例) 但是参考案例3 我们可以通过一个小技巧来实现这个目的为此我写了一个Category

@implementation UIView(Masonry_LJC)

- (void) distributeSpacingHorizontallyWith:(NSArray*)views

{

NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

for ( int i = 0 ; i < views.count+1 ; ++i )

{

UIView *v = [UIView new];

[spaces addObject:v];

[self addSubview:v];

[v mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(v.mas_height);

}];

}

UIView *v0 = spaces[0];

__weak __typeof(&*self)ws = self;

[v0 mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(ws.mas_left);

make.centerY.equalTo(((UIView*)views[0]).mas_centerY);

}];

UIView *lastSpace = v0;

for ( int i = 0 ; i < views.count; ++i )

{

UIView *obj = views[i];

UIView *space = spaces[i+1];

[obj mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(lastSpace.mas_right);

}];

[space mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(obj.mas_right);

make.centerY.equalTo(obj.mas_centerY);

make.width.equalTo(v0);

}];

lastSpace = space;

}

[lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.equalTo(ws.mas_right);

}];

}

- (void) distributeSpacingVerticallyWith:(NSArray*)views

{

NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

for ( int i = 0 ; i < views.count+1 ; ++i )

{

UIView *v = [UIView new];

[spaces addObject:v];

[self addSubview:v];

[v mas_makeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(v.mas_height);

}];

}

UIView *v0 = spaces[0];

__weak __typeof(&*self)ws = self;

[v0 mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(ws.mas_top);

make.centerX.equalTo(((UIView*)views[0]).mas_centerX);

}];

UIView *lastSpace = v0;

for ( int i = 0 ; i < views.count; ++i )

{

UIView *obj = views[i];

UIView *space = spaces[i+1];

[obj mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(lastSpace.mas_bottom);

}];

[space mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(obj.mas_bottom);

make.centerX.equalTo(obj.mas_centerX);

make.height.equalTo(v0);

}];

lastSpace = space;

}

[lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

make.bottom.equalTo(ws.mas_bottom);

}];

}

@end

简单的来测试一下

UIView *sv11 = [UIView new];

UIView *sv12 = [UIView new];

UIView *sv13 = [UIView new];

UIView *sv21 = [UIView new];

UIView *sv31 = [UIView new];

sv11.backgroundColor = [UIColor redColor];

sv12.backgroundColor = [UIColor redColor];

sv13.backgroundColor = [UIColor redColor];

sv21.backgroundColor = [UIColor redColor];

sv31.backgroundColor = [UIColor redColor];

[sv addSubview:sv11];

[sv addSubview:sv12];

[sv addSubview:sv13];

[sv addSubview:sv21];

[sv addSubview:sv31];

//给予不同的大小测试效果

[sv11 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.equalTo(@[sv12,sv13]);

make.centerX.equalTo(@[sv21,sv31]);

make.size.mas_equalTo(CGSizeMake(40, 40));

}];

[sv12 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(70, 20));

}];

[sv13 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(50, 50));

}];

[sv21 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(50, 20));

}];

[sv31 mas_makeConstraints:^(MASConstraintMaker *make) {

make.size.mas_equalTo(CGSizeMake(40, 60));

}];

[sv distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];

[sv distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];

[sv showPlaceHolderWithAllSubviews];

[sv hidePlaceHolder];

代码效果

perfect! 简洁明了的达到了我们所要的效果

适配布局-ios的更多相关文章

逐帧动画抖动、适配布局、SVG Sprites
笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...
移动web开发之rem适配布局
移动web开发之rem适配布局方案: 页面布局文字能否随着屏幕大小变化而变化流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
ios UI 适配布局相关文章
1. http://lvwenhan.com/ios/430.html 2 . http://blog.csdn.net/liangliang103377/article/details/400822 ...
移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
PostCSS的插件 -- 关于vue rem适配布局方案
PostCSS的插件作用:用于自动将像素单元生成rem单位记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...
移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
webApp 页面适配布局
webApp 页面布局 1. 流式布局概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...
rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
(ios实战)单个ViewControl适配不同ios版本xib文件实现
xcode5 中的界面布局根据sdk 分成ios7.0 and Later 和 ios6.1 and Earlier 两种,那如何xib同时支持 ios6 和ios7 的界面呢方法如下: 在xco ...

随机推荐

java中this 关键字的使用
在方法中定义使用的this关键字,它的值是当前对象的引用.也就是说你只能用它来调用属于当前对象的方法或者使用this处理方法中成员变量和局部变量重名的情况.而且,更为重要的是this和super都无法 ...
CentOS搭建VPN
安装ppp #yum install ppp 安装pptpd 配置软件源,修改/etc/yum.repos.d/Doylenet.repo,如果系统没有该文件则创建 #vim /etc/yum.rep ...
IIS7 WebAPI 404.0 Error
<system.webServer><modules runAllManagedModulesForAllRequests="true"/></sys ...
failed to open the runspace pool. the server manager winrm plug-in might be corrupted or missing
添加对127.0.0.1的监听 netsh http add iplisten 127.0.0.01 添加完后的效果
配置Java开发IDE
http://www.cnblogs.com/feichexia/archive/2012/11/07/Vim_JavaIDE.html
FFmpeg：初步编译使用[Android]
1.安装NDK:http://dl.google.com/android/ndk/android-ndk-r9-linux-x86.tar.bz2 sudo gedit ~/.bashrc 末尾添加: ...
第四篇.Bootstrap网格系统偏移列和嵌套列
偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...
AngularJS身份验证：Cookies VS Tokens
基于cookie的身份验证:Cookie-Based Authentication 基于token的身份验证:Token-Based Authentication 跨域:cross-domain 说明 ...
jquery.get()
1.获取当前jquery对象匹配到的dom元素 2.语法: jqueryObject.get([index]) //jQueryObject[index]等价于jQueryObject.get(ind ...
ios之JavaScript
初次接触java脚本,感觉java脚本so interesting!为什么呢?写javascript代码感觉就像是在记流水账,无拐弯抹角,一个字,就是"干",想怎么干就怎么干,哈哈 ...

适配布局-ios

适配布局-ios的更多相关文章

随机推荐

热门专题