iOS:自动布局Autolayout

简介:

自动布局:Autolayout


简介:
在以前的iOS程序中,是如何设置布局UI界面的?
经常编写大量的坐标计算代码
为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码(即传说中的“屏幕适配”)
 
什么是Autolayout?
Autolayout是一种“自动布局”技术,专门用来布局UI界面的
Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能很轻松地解决屏幕适配的问题
 
Autoresizing
在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成,只能决定子视图和父视图的屏幕适配。
相比之下,Autolayout的功能比Autoresizing强大很多
 
Autolayout的2个核心概念:参照、约束
 
Autolayout的警告和错误:
警告 
控件的frame不匹配所添加的约束, 比如
比如约束控件的宽度为100, 而控件现在的宽度是110

 

错误
缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置
两个约束冲突, 比如
1个约束控件的宽度为100, 1个约束控件的宽度为110
 
代码实现Autolayout:
代码实现Autolayout的步骤
利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;

- (void)addConstraints:(NSArray *)constraints;

 

代码实现Autolayout的注意点
要先禁止autoresizing功能,设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

添加约束之前,一定要保证相关控件都已经在各自的父控件上
不用再给view设置frame
 
NSLayoutConstraint:约束类
一个NSLayoutConstraint对象就代表一个约束
创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
 

 

自动布局有个核心公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

obj1、obj2:要约束的视图控件

property1、property2:约束的类型

multiplier:乘数,一般为1.0

constant value:常量

 

约束规则:

添加约束的规则(1)

在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级 view之间的约束关系,添加到它们的父view上
 
添加约束的规则(2)
2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

 

添加约束的规则(3) 

3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

   

 

 
 

 

 
 
程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
分类: iOS高级
 
 
本文转自当天真遇到现实博客园博客,原文链接: http://www.cnblogs.com/XYQ-208910/p/4898100.html,如需转载请自行联系原作者
相关文章
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
227 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
|
编解码 Android开发 iOS开发
IOS使用AutoLayout让UIScrollView自动计算ContentSize
IOS使用AutoLayout让UIScrollView自动计算ContentSize
206 0
|
iOS开发
iOS小技能:自动布局实现兄弟控件N等分且宽高比例是1:N(xib 上实现)
本文为 iOS视图约束专题的第三篇:xib上使用自动布局教程
188 0
|
iOS开发 开发者
AutoResizing and AutoLayout(IOS屏幕适配)
AutoResizing and AutoLayout(IOS屏幕适配)
125 0
AutoResizing and AutoLayout(IOS屏幕适配)
|
编解码 自然语言处理 数据可视化
iOS开发-自动布局篇:史上最牛的自动布局教学!
本文我们将提到: aotulayout(手码) VFL aotulayout(Xib) Masonry(第三方框架)
iOS开发-自动布局篇:史上最牛的自动布局教学!
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
192 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
263 0
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
iOS界面布局之三——纯代码的autoLayout及布局动画
405 0
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
|
iOS开发 容器
iOS界面布局之二——初识autolayout布局模型(二)
iOS界面布局之二——初识autolayout布局模型
173 0
iOS界面布局之二——初识autolayout布局模型(二)
|
iOS开发 开发者
iOS界面布局之二——初识autolayout布局模型(一)
iOS界面布局之二——初识autolayout布局模型
161 0
iOS界面布局之二——初识autolayout布局模型(一)