首页 > 移动平台 > 详细

iOS:Autolayout自动布局实例

时间:2015-10-21 19:05:22      阅读:162      评论:0      收藏:0      [点我收藏+]
Autolayout自动布局实例即可以用故事板布局,也可以用纯代码创建,各有各的优点;用故事板布局,比较方便,而且直观,可以很直白的看到视图布局后的变化;采用代码布局,虽然代码比较多,有些麻烦,但是可以很好的进行控制,设置自己所要的布局。下面我就对这两种布局做一下演示。  
 
练习:
在控制器view底部添加2个view,1个蓝色,1个红色
2个view宽度、高度永远相等
p距离父控件左边、右边、下边间距和2个view之间的间距相等
技术分享
 
 
 
 
 
采用故事板布局如下:
1.打开故事板,拖入两个视图UIView控件,名称一个为view1设置为蓝色,一个为view2设置为红色。两者大小合适即可
技术分享
 
技术分享 
2.任意选中一个视图,我选择view1后,然后点击故事板右下角布局选项,如下所示
技术分享
3.设置view1的左边和下边离父视图view边距离为20,并点击添加2项约束后截图
技术分享 技术分享 技术分享
技术分享
4.同样对view2的右边和下边离父视图view边距离为20,并点击添加2项约束
技术分享 技术分享
技术分享
 
技术分享
5.再选择view1,设置它的高为200
技术分享
6.选中view1和view2后,选择它们等高等宽
 技术分享
 
 
技术分享
 
 
7.同样选中view1和view2后,给他们添加对齐方式
技术分享
 
技术分享
8.选择对齐方式那一项,可以看到目前两个视图之间的关系
 
技术分享
技术分享
 
9.重新设置两者之间的关系,即view1的尾边=view2的头边-20
技术分享
10.此时可以看到控件文件中,之前的红色错误箭头没有了,但是出现一个黄色警告箭头标识,选中它出现一个窗口,有两个黄点,需要你更新frame
技术分享
 
技术分享
11.依次选择黄点,按照它的提示点击Fix Mispalcement,进行Update Frame,直到没有黄点,此时两个视图布局成功
技术分享 技术分享
 
演示结果:(不支持竖屏)
技术分享
 
 
Portrait                                                                    不支持Upside Down (明显的排列不对,如果支持,应该前面一样)
技术分享 技术分享
Landscape Left 和 Landscape Right
技术分享
 
 
 
采用纯代码添加约束进行布局如下:
//在ViewController.m文件中,除了声明属性,其余所有的代码都在-(void)viewDidLoad{.....}中进行
1.声明两个视图属性
#import "ViewController.h"

@interface ViewController ()
@property (strong,nonatomic)UIView *view1;
@property (strong,nonatomic)UIView *view2;
@end
2.创建两个视图
    //创建view1
    self.view1 = [[UIView alloc]init];
    self.view1.backgroundColor = [UIColor redColor];
    self.view1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.view1];
    
    //创建view2
    self.view2 = [[UIView alloc]init];
    self.view2.backgroundColor = [UIColor yellowColor];
    self.view2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:self.view2];
3.创建view1和父视图的x坐标之间的约束
    //view1的x坐标和父视图的x坐标的关系
    NSLayoutConstraint *LCLfet = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20];

4.创建view1和父视图的y坐标之间的约束

    //view1的y坐标和父视图的y坐标的关系
    NSLayoutConstraint *LCBottom = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
5.创建view1和view2等宽这个约束
    //view1和view2等宽
    NSLayoutConstraint *lcEqualWitdth = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view2 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
6.创建view1和view2等高这一个约束
    //view1和view2等高
    NSLayoutConstraint *lcEqualHeight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
7.创建view2和父视图的x坐标之间的约束
    //view2的x坐标和父视图的x坐标的关系
    NSLayoutConstraint *LCRight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];

8.创建view2和父视图的y坐标之间的约束

    //view2的y坐标和父视图的y坐标的关系
    NSLayoutConstraint *LCBottom2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
9.创建view1和view2之间水平间距这一个约束
    //view1和view2的水平间距
     NSLayoutConstraint *lcGap = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20];
10.将前面创建的所有约束添加到父视图中
    //在父视图中添加约束
    [self.view addConstraints:@[LCLfet,LCBottom,LCRight,LCBottom2,lcEqualHeight,lcEqualWitdth,lcGap]];
11.创建view1自己的固定高度这一个约束
    //view1固定的高度
    NSLayoutConstraint *lcFixedHeight = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:200];
12.将view1的高度这个约束添加到自己的视图中
    //在view1上添加约束
    [self.view1 addConstraint:lcFixedHeight];
演示结果和上面一样,就不截图了.................
 

iOS:Autolayout自动布局实例

原文:http://www.cnblogs.com/XYQ-208910/p/4898534.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!