iOS开发-UI篇-AutoLayout

1.概述:随着iOS设备的更新迭代,屏幕适配问题也变得愈发重要,应运而生了Autolayout。在Xcode4.1和OS X10.7之后才起效。

2.简介:Apple提供了2种方式布局Autolayout,用xib来布局;另一种利用代码进行布局,在Apple的sdk中提供了2个类库:NSLayoutManager和NSLayoutConstraint。NSLayoutManager类主要是配合NSTextStorage,NSTextContainer实现NSCoding协议用来布局text视图,而NSLayoutConstraint类则是布局整个视图结构(着重介绍)。

3.原理:Autolayout的主要思想就是约束。在NSLayoutConstraint类中,有一个最重要的类方法

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

实现的公式是"view1.attr1 = view2.attr2 * multiplier + constant".建立2个视图之间的约束联系(第二视图可以为nil)。但是用这个方法的简单明了,缺点就是太过繁琐复杂.但是我们推荐使用VFL进行布局。

4.1内容:

1).当我们使用Autolayout时,我们要摒弃Xcode自动适应设置,将translatesAutoresizingMaskIntoConstraints＝NO;不然会造成视图混乱。

2).遵从“高内聚”的原则,在UIView.h类中系统定义了- (void)updateConstraints;在UIViewController.h类中系统定义了- (void)updateViewConstraints;Overrides must call super or send -updateConstraints to the view=>即[super updateViewConstraints];

3).最基本的添加约束的方法:创建一个view对象,创建一个NSLayoutConstraint约束对象,constraintWithItem进行约束设置,view对象中添加约束。

4.2内容:

1).Autolayout还提供了VFL(Visual Format Language)来约束,+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

//format:传入单独每个view的约束语句;查询xcode的api的Visual Format Syntax。

2).Autolayout步骤:创建一个view,并且添加到父视图中去显示－>［父视图 addConstraints:(约束数组)］－>传入参数，format具体约束语句,opts可置为nil,metrics传入距离参数(用参数代替魔数),views传入相应的视图控件,metrics和views是为format服务的。

3).例1:

- (void)updateViewConstraints{
    [super updateViewConstraints];//override初始化

    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;//取消自动布局
    view1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:view1];

    NSDictionary *views_Dic = @{@"view1":view1};//约束的控件

    NSString *hLayoutStr = @"H:|-(==100)-[view1(==100)]";//H:代表横向,｜代表相对于父视图,－代表约束距离,()里面的所有表示约束距离,[]里面表示约束的视图对象,这句话表示:横向从左到右,相对于父视图距离100像素,view1的宽为100
    NSString *vLayoutStr = @"V:|-(==100)-[view1(==50)]";//V:代表纵向,｜代表相对于父视图,－代表约束距离,()里面的所有表示约束距离,[]里面表示约束的视图对象,这句话表示:纵向从上到下,相对于父视图距离100像素,view1的高为50

    NSArray *hLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:hLayoutStr options:0 metrics:nil views:views_Dic];
    NSArray *vLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:vLayoutStr options:0 metrics:nil views:views_Dic];
    [self.view addConstraints:hLayoutArr];
    [self.view addConstraints:vLayoutArr];
}

例2:

- (void)updateViewConstraints{
    [super updateViewConstraints];//override初始化

    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc] init];
    view2.translatesAutoresizingMaskIntoConstraints = NO;
    view2.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view2];

    NSDictionary *views_Dic = @{@"view1":view1,@"view2":view2};
    NSDictionary *views_metrics = @{@"Top":@50,@"Right":@20};

    NSString *hLayoutStr = @"H:|-(==100)-[view1(==100)]-[view2(view1)]-Right-|";//表示:从父视图的左边开始,约束100像素,约束view1的宽为100像素,约束view2的宽与view1等宽,约束距离父视图右边的距离为20像素。
    NSString *vLayoutStr = @"V:|-(100)-[view1(==100)]-[view2(==100)]";

    NSArray *hLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:hLayoutStr options:0 metrics:views_metrics views:views_Dic];
    NSArray *vLayoutArr =  [NSLayoutConstraint constraintsWithVisualFormat:vLayoutStr options:0 metrics:views_metrics views:views_Dic];
    [self.view addConstraints:hLayoutArr];//横向约束
    [self.view addConstraints:vLayoutArr];//纵向约束
}