天天看点

Autolayout 自动布局 Autolayout

Autolayout

字数715  阅读273  评论7  喜欢1

在Autolayout之前,Autoresizing可以作屏幕适配,但局限性较大有些任务根本无法完成

相比之下,Autol'ayout的功能比Autoresizing强大很多

什么是Autolayout


1.Autolayout是一种“自动布局”技术,专门用来布局UI界面的

2.Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广

3.自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升

4.苹果官方也推荐开发者尽量使用Autolayout来布局UI界面

5.Autolayout能很轻松地解决屏幕适配的问题

Autolayout的2个核心概念

参照
            约束                

Autolayout常用面板

01-约束处理

Autolayout 自动布局 Autolayout

Snip20150821_36.png

02-相对

Autolayout 自动布局 Autolayout

Snip20150821_37.png

03-对齐

Autolayout 自动布局 Autolayout

Snip20150821_38.png

Autolayout的警告和错误

- 警告:
       控件的frame不匹配所添加的约束,
       比如约束控件的宽度为, 而控件现在的宽度是
       如下图所示:                
Autolayout 自动布局 Autolayout
Snip20150821_40.png
- 错误:
       缺乏必要的约束, 
       比如只约束了宽度和高度, 没有约束具体的位置
       如下图所示:
           
Autolayout 自动布局 Autolayout
Snip20150821_39.png
- 两个约束冲突,:
       比如个约束控件的宽度为, 个约束控件的宽度为
       如下图所示:                
Autolayout 自动布局 Autolayout
Snip20150821_39.png

通过代码添加Autolayout

但首先需要先了解一个类(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 :常量
           
  • 自动布局的核心计算公式
代码实现Autolayout的步骤
- 利用NSLayoutConstraint类创建具体的约束对象 
- 添加约束对象到相应的view上
           

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

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

代码实现Autolayout的注意点 
- 要先禁止autoresizing功能,设置view的下面属性为NO
`view.translatesAutoresizingMaskIntoConstraints = NO;`
 - 添加约束之前,一定要保证相关控件都已经在各自的父控件上不用再给view设置frame
           

添加约束的规则

在创建约束之后,需要将其添加到作用的view上

在添加时要注意目标view需要遵循以下规则:

1)对于两个同层级view之间的约束关系,添加到它们的父view上

Autolayout 自动布局 Autolayout

Snip20150821_41.png

2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

Autolayout 自动布局 Autolayout

Snip20150821_42.png

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

Autolayout 自动布局 Autolayout

Snip20150821_43.png