ios-AutoLayout(自动布局代码控制)简单总结

最新推荐文章于 2018-09-11 14:53:00 发布

记忆有你

最新推荐文章于 2018-09-11 14:53:00 发布

阅读量4k

点赞数

分类专栏： iOS(转载) 文章标签： iOS 自动布局约束

iOS(转载) 专栏收录该内容

180 篇文章 0 订阅

订阅专栏

关于手码编写autolayout约束

storyboard界面里面的托拉拽固然方便但是不能批量操作（董铂然原创），假如有类似的30个小控件，storyboard就太麻烦了，手码的话一个循环就完事了

手码创建就是所谓的那七个参数的长的像句子似得方法

iOS自动布局高级用法及纯手码约束写法

之后再在相应的节点下添加约束，有添加一个和添加一组两种方法。

 
        // 高度约束（添加到yellowView身上） 
       
        NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50]; 
       
        [yellowView addConstraint:heightConstraint]; 
       
        // 间距约束（添加到self.view身上） 
       
        CGFloat margin = 20; 
       
        [self.view addConstraints:@[ 
       
        // 左边 
       
        [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin], 
       
        // 右边 
       
        [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: - margin], 
       
        // 底部 
       
        [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant: - margin] 
       
        ]]; 
       
        }

这里用到了一个核心公式，任何两个控件间的约束都可以通过这个公式算出

obj1.property1 =（obj2.property2 * multiplier）+ constant value

multiplier和constant 就是向量系数和偏移量

还有为了避免和系统生成的自动伸缩的约束不冲突一般加上这句

系统默认这个属性是yes

关于VFL语言

Visual Format Language，翻译过来是“可视化格式语言” 是苹果公司为了简化Autolayout的编码而推出的抽象语言

相当于打出象形文字似得，而且要全在字符串里写，遇到错误比较难调，但是相对来说代码精简了不少。

然后在添加约束的时候就会用到系统提供的另外一种方法。

 NSArray *contraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];

VFL的详细语法可以在官方文档中搜 “Visual Format” 就能搜到

上面的方法中传到的两个参数metrics 和 views 是两个字典。（董铂然原创）第一个字典metrics是用来告诉系统里面的每一个值对应哪个字母

第二个字典views是用来告诉里面的每一个控件对应字符串里的什么

如果整个VFL语言里的所有控件你都是用原名写在里面的，那可以用宏代替

括号里可以传多个值逗号隔开

关于常用的手码约束的第三方框架

有 Masonry 和 UIView+Autolayout

框架地址是：

https://github.com/Masonry/Masonry

https://github.com/smileyborg/UIView-AutoLayout

UIView+Autolayout框架

这个相对于masonry，是个轻量级的框架易于上手，里面一共也就两个文件。也非常好用，都是用auto开头。适用于约束不经常改变的项目

事例用法：

直接设置四周的间隔距离

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)]; //直接设置四周的间隔距离

设置三个间隔，然后再添加个高度，

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)excludingEdge:ALEdgeTop]; // 让顶部约束无效 [self.yellowView autoSetDimension:ALDimensionHeight toSize:100]; // 自己再添加个高度约束正好四个

也可以直接设置大小

[self.yellowView autoSetDimensionsToSize:CGSizeMake(200, 200)];

iOS自动布局高级用法及纯手码约束写法

总之还有很多用法，在这不一一介绍了，大概就是这个代码风格。有兴趣的可以去上面说的那个github地址上仔细查看。

Masonry框架

这个框架是重量级的里面好多文件，难于上手，但是用熟练了的话比上面那个牛X，适合于约束要经常改变的项目。

示例代码：

添加距离四个方向20的间隔约束

1

2

3

4

5

 
        [yellowView mas_makeConstraints:^(MASConstraintMaker *make) { 
       
        // make代表yellowView 
       
        // 添加约束 
       
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20)); 
       
        }];

下面这个是更新约束，非常方便会自动识别上左下右的属性来更改。

[self.yellowView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(100);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.right.equalTo(self.view.mas_right).offset(-100);
        make.bottom.equalTo(self.view.mas_bottom).offset(-100);
    }];

还有一些别的属性用法。

iOS自动布局高级用法及纯手码约束写法

主要是作者设置的属性比较多这张图摘自他的github，有兴趣可以去github仔细看

iOS自动布局高级用法及纯手码约束写法

关于想给约束改变添加动画。

因为约束的改变是瞬时操作和frame的概念不一样，所以把约束的代码放在动画的block里是无效的

错！

正确做法是，把约束写在外面面，然后在动画的block中包裹 layoutifneed

对！

如果你不是在董铂然博客园看到本文请点击查看原文

对了还有一个注意点是：需要依赖父控件的约束要在添加了父控件之后再写。

其他:

原理：IOS6.0 之后，苹果优化了UI界面的布局方式，提出了自动布局的概念，和之前的autoresizing相比功能更强大。子视图基于父视图的自动布局显示。都是父视图去添加对子视图的约束。

在这里主要说的是通过代码对自动布局视图的实现。

代码中一般用到的有两个添加约束的方式：

1.- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);

2.- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

<</span>

在使用自动布局之前要对子视图的布局方式进行调整，用到这个UIView的属性。

- (BOOL)translatesAutoresizingMaskIntoConstraints NS_AVAILABLE_IOS(6_0); // Default YES

需要将其设置为NO；

下面用简单例子说明一下：

   UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];
   v1.translatesAutoresizingMaskIntoConstraints = NO;
    v1.backgroundColor = [UIColor redColor];
    [self.view addSubview:v1];

    UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];
    v2.backgroundColor = [UIColor grayColor];
    v2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:v2];//添加两个允许自动布局的子视图

   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeWidth
                                                         multiplier:1.0
                                                           constant:0]];//设置子视图的宽度和父视图的宽度相同

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeHeight
                                                         multiplier:0.5
                                                           constant:0]];//设置子视图的高度是父视图高度的一半

   [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[v1][v2(==v1)]-0-|" options:0 metrics:nil views:views]];//通过addConstraints 添加对水平方向上v1的控制--距离父视图左侧距离为0（距离为0的话也可省略）同时将v2的水平方向的宽度和v1设置成相同

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1][v2(==v1)]|" options:0 metrics:nil views:views]];/通过addConstraints 添加对垂直方向上v1的控制--距离父视图上侧距离为0（距离为0的话也可省略）同时将v2的垂直方向的高度和v1设置成相同

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1]-0-[v2]-0-|" options:0 metrics:nil views:views]];//最后是垂直布局两个子view