美文网首页代码质量
iOS 自动布局大全

iOS 自动布局大全

作者: 木马不在转 | 来源:发表于2017-02-15 17:50 被阅读49次

    一:NSLayoutConstraint

    • 手码创建就是所谓的那七个参数的长的像句子似得方法,之后再在相应的节点下添加约束。


    NSLayoutConstraint添加的两种方法。
      // 高度约束(添加到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]
                                 ]];
      }
    
    • 为了避免和系统生成的自动伸缩的约束不冲突 一般加上这句

    系统默认这个属性是yes。

    二:VFL语言添加约束

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

    VFL示例:
    canelButton宽72,acceptButton宽50,它们之间间距12
    @"H:[cancelButton(72)]-12-[acceptButton(50)]"
    
     wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)
    H:[wideView(>=60@700)]
     
     竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox
    V:[redBox][yellowBox(==redBox)]
       
     水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)
     H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
    
    VFL的使用:

    列子:

    NSArray *blueHArr = [NSLayoutConstraint constraintsWithVisualFormat:
    @"H:|-20-[blueView]-20-|" 
    options:kNilOptions
    metrics:nil views:
    NSDictionaryOfVariableBindings(blueView)];
    

    方法介绍

    constraintsWithVisualFormat:这个方法返回了一个数组;
    @"H:|-20-[blueView(100)]-20-|":这句话表明所添加的约束,H的意思是水平方向添加约束,blueView 视图名称,(100)代表着blueView 的宽为100,blueView距离父类的左边20,距离父类的右边是20;
    options:是对其方式;
    metrics:返回的是一个字典,它的意思是可以将约束中的值用某些字符串来代理,然后在这个字典中给多对应的字符串赋值,方便修改,并且增加可读性;
    views:返回的也是一个字典,这个字典的意思是:你可以将前面的view用其他字符串来代替,在这里在给他赋给对应的view的名字。
    

    我可以将上面的约束语句改成如下这样:

    NSArray *blueHArr = [NSLayoutConstraint 
    constraintsWithVisualFormat:@"H:|-aa-[cccc(100)]-20-|"
    options:kNilOptions
    metrics:@{@"aa":@20}
    views:@{@"cccc":blueView}];
    
    这里我用aa替换了20,cccc替换了blueVuew
    这里有一个简单的方法,就是使用NSDictionaryOfVariableBindings(blueView)来替换views中的内容也是可以的。
    

    VFL的缺点
    VFL语句不支持乘除法,我们是不能这样写的:

    NSArray *redVArr = [NSLayoutConstraint 
    constraintsWithVisualFormat:@"V:[blueView]-20-[redView(==blueView*0.5)]" 
    options:NSLayoutFormatAlignAllRight 
    metrics:nil 
    views:NSDictionaryOfVariableBindings(blueView, redView)];
    

    原因就是这里包含了乘法,而一旦VFL语句中包含了乘除法那么系统就会不识别而崩溃。

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

    MasonryUIView+AutolayoutMyLinearLayout

    Masonry框架

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

    UIView+Autolayout框架

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

    MyLinearLayout

    MyLinearLayout的实现充分参考了Android中的LinearLayout布局,但是却比LinearLayout更为强大,他几乎可以实现AutoLayout的所有功能甚至其不具备的功能。MyLinearLayout是一个基于流式布局的容器视图,我们只需要把子视图添加到MyLinearLayout中,并设置一些简单的约束参数那么就可以完成各种布局的要求了。

    相关文章

      网友评论

        本文标题:iOS 自动布局大全

        本文链接:https://www.haomeiwen.com/subject/voiqwttx.html