使用Masonry自动布局

作者: Brade_Tong | 来源:发表于2017-03-17 17:30 被阅读41次

    对于新手来说,还是学习Masonry框架进行布局比较好,毕竟这个框架使用的人群基数较大。

    一、首先两句话介绍一下这个框架:

    1、Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。
    2、添加约束的条件主要是利用block模块
    官网上的sample code 截图.png

    二、Masonry支持的一些属性如下属性:

    注意:其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了

    三、具体的使用步骤

    1、首先,创建视图控件,添加到self.view上,(PS:以下以我自己创建的self.firstView为例)

    例如:

    [self.view addSubview:self.firstView];
    - (UIView *)firstView{
        if (_firstView == nil) {
            _firstView = [[UIView alloc]init];
            _firstView.backgroundColor = [UIColor orangeColor];
        }
        return _firstView;
    }
    
    2、将AutoresizingMask布局关掉
    self.firstView.translatesAutoresizingMaskIntoConstraints = NO;
    
    3、接着添加约束条件
    __weak __typeof(self) weakSelf = self;//这里用一个弱引用来表示self,用于下面的Block中,会循环引用(若不用目前也没发现问题。)
    [self.firstView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(weakSelf.view.mas_left).offset(16);//使得左边等于sele.view的左右,间距为16
    make.top.equalTo(weakSelf.view.mas_top).offset(48);//使得顶部与sele.view的间距为48
    make.width.equalTo(weakSelf.view.mas_width).multipliedBy(0.5);//设置宽度为self.view的一半,multipliedBy倍数的意思,这里是self.view宽度的0.5倍
    make.height.equalTo(weakSelf.view.mas_height).multipliedBy(0.25);//设置高度为self.view的0.25倍
    }];
    约束条件的设置根据相对于的属性进行相关联,其他的控件的约束如上述一般大抵是以上的类似编写的约束。
    

    最后的效果图如下:


    实现自动布局.png

    以上。

    相关文章

      网友评论

        本文标题:使用Masonry自动布局

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