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];//纵向约束
}

 例3:

- (void)viewDidLoad {
UIView *view_nav = [[UIView alloc] init];
view_nav.translatesAutoresizingMaskIntoConstraints = NO;
view_nav.backgroundColor = [UIColorFactory colorNav];
[self.view addSubview:view_nav];

self.mUAccounts_table = [[UITableView alloc] init];
self.mUAccounts_table.delegate = self;
self.mUAccounts_table.dataSource = self;
self.mUAccounts_table.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.mUAccounts_table];

//AutoLayout进行约束
NSDictionary *views_dic = @{@"view_nav":view_nav,@"mUAccounts_table":self.mUAccounts_table};
NSDictionary *metrics_dic = @{@"Top":@0,@"Bottom":@0,@"Left":@0,@"Right":@0,
                              @"ScreenWidth":@((float)ScreenWidth),
                              @"tabBar_height":@(self.tabBarController.tabBar.frame.size.height),
                              @"Table_height":@((float)ScreenHeight-64-49)};
//当等宽或者等高时,将相同方向的两个视图拆分成同个方向的2个约束
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-Left-[view_nav(ScreenWidth)]" options:NSLayoutFormatAlignAllLeft metrics:metrics_dic views:views_dic]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-Top-[view_nav(64)]-[mUAccounts_table(Table_height)]" options:0 metrics:metrics_dic views:views_dic]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[mUAccounts_table(ScreenWidth)]" options:0 metrics:metrics_dic views:views_dic]];
}

 

5.1注意:

1).有可能出现-(void)updateViewConstraints;不自动调用的情况,可以直接在viewDidLoad中添加[self updateViewConstraints];进行调用。

2).VFL的结构1:－距离－对象(尺寸)－距离,不能出现-距离-距离的情况。

3).当出现Unable to simultaneously satisfy constraints时意味着约束之间有冲突,不能满足所有约束。

4).限定一个视图的约束一般通过与其他视图的位置和自身宽高总共4个约束,或者全部与其他视图约束,自身不做宽高约束。(4个约束灵活形成一个适配的视图)

5).约束对象注意,父视图添加约束,自身宽高约束则是自身当做父视图来约束。

6).当出现等宽和等高的情况时,可将同一个方向的两个视图约束拆分成同个方向的2个约束。