iOS学习——AutoLayout中利用 NSLayoutConstraint设置相对布局
2016-01-19 14:23
567 查看
没有太多要说的,只是最近项目要结了,所以有些时间来做做笔记。
AutoLayout给我的感觉就是充分利用了布局的相对性:对于一个新控件(item1),我们要在界面中确定它的位置,但是需要保证他和其他控件(item2)保持一定的关系,比如item1一定要在item2上边20个像素点的位置,或者item1的宽度是item2的一半。通过[item1 setFrame:CGRectMake(x,y,width,height)]; 可以确定item1的相对于屏幕原点的位置,也可以手动调整大小使其尺寸满足条件,但是如果item2的位置或者尺寸变化的时候,所有和item2存在相对位置关系的空间都要重新setFrame,这是显然不可取的。
在storyboard中可以通过各种drag操作设置各种Constraints,相对布局也就设置好了,但是如果不用故事版,用代码怎样实现这样的功能——NSLayoutContraint。
使用过程如下:
对要使用相对布局的空间设置setTranslatesAutoresizingMaskIntoConstraints为NO;
声明NSLayoutContraint的对
对这个对象添加布局设置;
将这个对象添加到所有关联控件的公共父view中。
举个例子喽:
0在进行上述过程之前,要确保已经将item添加到superview中了
[super.view addSubview :item1];
不然会crash,亲测!
1前提设置
[item1 setTranslatesAutoresizingMaskIntoConstraints:NO];
2声明NSLayoutContraint的对象,
3对这个对象添加布局设置:
NSLayoutConstraint *atrributeBottom = [NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeTop
multiplier:1.0constant:-20];
4如果这个item1和item2是self.view的subview,则将这个对象添加到所有关联控件的公共父view中:
[self.viewaddConstraint : atrributeBottom ];
这样就满足了上文中提到的“item1一定要在item2上边20个像素点的位置”。解释一下,上图:
(我去为什么pad微信和mac微信不能同时登陆,用pad画个图还得通过手机传到电脑上,这图画的一种岁月静好的感觉)
item1就是待安放的控件,item2就是参考系,
NSLayoutConstraint *atrribute
4000
Bottom = [NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeTop
multiplier:1.0 constant:-20];
这条添加属性的语句第一行的作用就是指出控件以及该控件本次需要设定的属性,即 item1.NSLayoutAttributeBottom ,第二行相关语句和作用相同,即item2.NSLayoutAttributeTop,指出这次要确定的相对关系是,item1的底边与item2的顶边。
那么他们具体是什么关系呢?就是由related,mutiplier,constant决定的了,按照公式
item1.attribute = multiplier * item.attribute + constant
这里要多解释一句帮助理解:各种attribute指的还是坐标,相对于左上角的原点。上面的意思就是item1的bottom坐标比item2的top坐标减少20个像素,所以constant是负数。
同样,如果想让item1的宽度是item2的一半多5,则有
NSLayoutConstraint *item1Width =[NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeWidth
multiplier:0.5 constant:5];
再补充一点,如果我们想确定的属性不需要任何想item2的参照物,比如固定item1的宽度就是80,那么只把参照物item2设置为nil就好:
NSLayoutConstraint *item1Width =[NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0 constant:80];
则 item1.NSLayoutAttributeWidth = constant
**别把multiplier设置为0;
**可以把全部属性设置完成后,[self addConstraints: @[atrributeBottom,item1Width] ];一起加入到控件中
**一定要保证已经将控件添加到公共的superView中了
done!
AutoLayout给我的感觉就是充分利用了布局的相对性:对于一个新控件(item1),我们要在界面中确定它的位置,但是需要保证他和其他控件(item2)保持一定的关系,比如item1一定要在item2上边20个像素点的位置,或者item1的宽度是item2的一半。通过[item1 setFrame:CGRectMake(x,y,width,height)]; 可以确定item1的相对于屏幕原点的位置,也可以手动调整大小使其尺寸满足条件,但是如果item2的位置或者尺寸变化的时候,所有和item2存在相对位置关系的空间都要重新setFrame,这是显然不可取的。
在storyboard中可以通过各种drag操作设置各种Constraints,相对布局也就设置好了,但是如果不用故事版,用代码怎样实现这样的功能——NSLayoutContraint。
使用过程如下:
对要使用相对布局的空间设置setTranslatesAutoresizingMaskIntoConstraints为NO;
声明NSLayoutContraint的对
对这个对象添加布局设置;
将这个对象添加到所有关联控件的公共父view中。
举个例子喽:
0在进行上述过程之前,要确保已经将item添加到superview中了
[super.view addSubview :item1];
不然会crash,亲测!
1前提设置
[item1 setTranslatesAutoresizingMaskIntoConstraints:NO];
2声明NSLayoutContraint的对象,
3对这个对象添加布局设置:
NSLayoutConstraint *atrributeBottom = [NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeTop
multiplier:1.0constant:-20];
4如果这个item1和item2是self.view的subview,则将这个对象添加到所有关联控件的公共父view中:
[self.viewaddConstraint : atrributeBottom ];
这样就满足了上文中提到的“item1一定要在item2上边20个像素点的位置”。解释一下,上图:
(我去为什么pad微信和mac微信不能同时登陆,用pad画个图还得通过手机传到电脑上,这图画的一种岁月静好的感觉)
item1就是待安放的控件,item2就是参考系,
NSLayoutConstraint *atrribute
4000
Bottom = [NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeTop
multiplier:1.0 constant:-20];
这条添加属性的语句第一行的作用就是指出控件以及该控件本次需要设定的属性,即 item1.NSLayoutAttributeBottom ,第二行相关语句和作用相同,即item2.NSLayoutAttributeTop,指出这次要确定的相对关系是,item1的底边与item2的顶边。
那么他们具体是什么关系呢?就是由related,mutiplier,constant决定的了,按照公式
item1.attribute = multiplier * item.attribute + constant
这里要多解释一句帮助理解:各种attribute指的还是坐标,相对于左上角的原点。上面的意思就是item1的bottom坐标比item2的top坐标减少20个像素,所以constant是负数。
同样,如果想让item1的宽度是item2的一半多5,则有
NSLayoutConstraint *item1Width =[NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:item2
attribute:NSLayoutAttributeWidth
multiplier:0.5 constant:5];
再补充一点,如果我们想确定的属性不需要任何想item2的参照物,比如固定item1的宽度就是80,那么只把参照物item2设置为nil就好:
NSLayoutConstraint *item1Width =[NSLayoutConstraint constraintWithItem:item1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0 constant:80];
则 item1.NSLayoutAttributeWidth = constant
**别把multiplier设置为0;
**可以把全部属性设置完成后,[self addConstraints: @[atrributeBottom,item1Width] ];一起加入到控件中
**一定要保证已经将控件添加到公共的superView中了
done!
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 样式表CSS布局经验
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- Android编程之代码创建布局实例分析
- CSS顶级技巧大放送,div+css布局必知
- 用div实现像table一样的布局方法
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- jQuery EasyUI 布局之动态添加tabs标签页
- android自定义RadioGroup可以添加多种布局的实现方法