【iOS】自动布局之Purelayout

作者: 狍子君 | 来源:发表于2016-01-14 19:03 被阅读2779次

    masonry这个第三方库件在github上很出名,貌似也很好用,但是我在看过masonry的介绍和使用方法之后,觉得有点隐隐的蛋疼。
    因为本人工作时间不多,加上一直都用的是Objective-C,看着masonry提供的方法基本上都是点语法,我的[]呢?!!怎么不在了?

    于是在github上搜索到另外一个较出名的布局,便有了这段Purelayout的尝试。


    生成一个UIView:

    UIView *view = [UIView newAutoLayoutView];
    
    + (instancetype)newAutoLayoutView
    {
        ALView *view = [self new];
        view.translatesAutoresizingMaskIntoConstraints = NO;
        return view;
    }
    

    newAutoLayoutView是UIView的一个扩展方法,其实达到的目的就是生成一个UIView实例,并把该实例的translatesAutoresizingMaskIntoConstraints属性置为NO。这个属性值在默认情况下是YES,如果设置为 NO,那么在运行时,程序不会自动将AutoresizingMask转化成 Constraint。

    1.view相对于父容器间距的位置
    [view autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:10];//相对于父容器顶部距离10
    [view autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:10];//相对于父容器左部距离10
    [view autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:10];//相对于父容器右部距离10
    [view autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:10];//相对于父容器底部距离10
    

    值得注意的是Purelayout对UILabel做了一些人性化的处理:
    在有的国家地区文字是从右至左的,以下代码就是将label的起始位置距离父容器10

    [label autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:10];
    
    2.相对于父容器的中心位置:
    [view autoCenterInSuperview];//view在父容器中心位置
    [view autoAlignAxisToSuperviewAxis:ALAxisHorizontal];//view在父容器水平中心位置
    [view autoAlignAxisToSuperviewAxis:ALAxisVertical];//view在父容器垂直中心位置
    
    3.设置大小
    [view autoSetDimensionsToSize:CGSizeMake(300, 300)];//设置view的大小为300*300
    [view autoSetDimension:ALDimensionHeight toSize:300];//设置view的高度为300
    [view autoSetDimension:ALDimensionWidth toSize:300];//设置view的宽度为300
    
    4.相对位置

    NSLayoutRelation是一个枚举类型:

    typedef NS_ENUM(NSInteger, NSLayoutRelation) {
        NSLayoutRelationLessThanOrEqual = -1,
        NSLayoutRelationEqual = 0,
        NSLayoutRelationGreaterThanOrEqual = 1,
    };
    

    见名知意,你懂的。

    [view1 autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:view2 withOffset:20 relation:NSLayoutRelationEqual];//view1的顶部在view2的底部的20像素的位置
    
    5.中心对齐
    [view1 autoAlignAxis:ALAxisVertical toSameAxisOfView:view2];//view1相对于view2保持在同一个垂直中心上
    

    view1相对于view2保持在同一个垂直中心上

    6.相对大小
    [view1 autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:view2];
    

    view1的宽度和view2的宽度相等


    在使用purelayout的时候值得注意:
    1.purelayout提供的方法有些是只支持iOS8及以上的,如果iOS7及以下的调用了是会奔溃的,本人就是因为这个被搞得欲仙欲死。好在purelayout在方法中都有介绍。以上介绍的几种使用场景的方法,也都是支持iOS7及以下系统的。
    2.在view父容器为nil的时候,执行purelayout的方法会崩溃。

    有兴趣的可以直接去github下载官方的demo,写的也是相当ok的。

    持续更新~~~

    相关文章

      网友评论

      • 舒马赫:推荐使用xml的布局库FlexLib,采用前端布局标准flexbox(不使用autolayout),支持热刷新,国际化等。可以到这里了解详细信息:

        https://github.com/zhenglibao/FlexLib
      • 野比大雄001:求分享一下,qq2361542328,谢谢啦!
      • 野比大雄001:purelayout提供的方法有些是只支持iOS8及以上的,如果iOS7及以下的调用了是会奔溃的,请问大神是如何解决的?
        狍子君:@旧火车 一般情况下我只用到ios7的方法,仅支持ios8的我一般不用的

      本文标题:【iOS】自动布局之Purelayout

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