Masonry的基本使用

来源：互联网发布：淘宝上品牌折扣店剪标编辑：程序博客网时间：2024/06/05 01:14

现在在很多公司基本上会要求开发者使用纯代码开发，尽量不使用Xib或者Storyboard，Xib或者Storyboard是对于前期开发更有效率，但是对后期的维护不利，所以很多时候我们只能使用代码约束，这里简单的介绍Masonry的基本使用。

首先Masonry是目前很流行的轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了，并具有高可读性。

下面是简单的效果展示

详细代码：

- (void)setupConstraints{    __weak JYThreeCirle *weakSelf = self;        // 设置红色View的约束    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {        // 设置红色view的顶部与父视图距离64        make.top.equalTo(weakSelf).offset(64);        // 设置红色view的宽高相等        make.width.mas_equalTo(weakSelf.redView.mas_height);        // 设置红色view的宽高和蓝色view、cyanView相等        make.width.height.mas_equalTo(@[weakSelf.blueView, weakSelf.cyanView]);        // 设置蓝色view水平居中        make.centerX.equalTo(weakSelf);    }];        // 设置蓝色View的约束    [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {        // 设置蓝色View顶部与红色view的底部距离30        make.top.mas_equalTo(weakSelf.redView.mas_bottom).offset(30);        // 蓝色View的左侧与父视图的距离是20        make.leading.equalTo(weakSelf).offset(20);        // 蓝色view的右边距离cyanView的左边-30        make.right.mas_equalTo(weakSelf.cyanView.mas_left).offset(-30);        // 蓝色view和cyanView宽度一致        make.width.mas_equalTo(weakSelf.cyanView);    }];        [self.cyanView mas_makeConstraints:^(MASConstraintMaker *make) {        // cyanView的右侧距离父视图-20        make.trailing.equalTo(weakSelf).offset(-20);        // cyanView和blueView的顶部在同一水平线上        make.top.mas_equalTo(weakSelf.blueView);    }];        // qq按钮的约束    [self.qqBtn mas_makeConstraints:^(MASConstraintMaker *make) {        // qqBtn的左侧与父视图距离50像素        make.leading.equalTo(weakSelf).offset(50);        // qqBtn的底部与父视图距离-20像素        make.bottom.equalTo(weakSelf).offset(-20);        // qqBtn宽高相等        make.height.mas_equalTo(weakSelf.qqBtn.mas_width);    }];        // weixinBtn按钮的约束    [self.weixinBtn mas_makeConstraints:^(MASConstraintMaker *make) {        // weixinBtn和qqBtn的底部、宽高都相等        make.bottom.height.width.mas_equalTo(weakSelf.qqBtn);        // weixinBtn的左边与qqBtn的右边相距30个像素        make.left.mas_equalTo(weakSelf.qqBtn.mas_right).offset(30);        // weixinBtn的右边与sinaBtn的左边相距-30个像素        make.right.mas_equalTo(weakSelf.sinaBtn.mas_left).offset(-30);    }];        // sinaBtn按钮的约束    [self.sinaBtn mas_makeConstraints:^(MASConstraintMaker *make) {        // sinaBtn的左侧与父视图距离-50个像素        make.trailing.equalTo(weakSelf).offset(-50);        // sinaBtn和qqBtn的底部、宽高都相等        make.bottom.height.width.mas_equalTo(weakSelf.qqBtn);    }];        // label的约束    [self.label mas_makeConstraints:^(MASConstraintMaker *make) {                // label的底部与weixinBtn的顶部相距-15        make.bottom.mas_equalTo(weakSelf.weixinBtn.mas_top).offset(-15);        // label水平居中        make.centerX.equalTo(weakSelf);    }];        // 左边的线    [self.leftLine mas_makeConstraints:^(MASConstraintMaker *make) {        // leftLine的左侧与父视图相距20        make.leading.equalTo(weakSelf).offset(20);        // leftLine的高为1        make.height.mas_equalTo(1);        // leftLine与label垂直居中        make.centerY.mas_equalTo(weakSelf.label);        // leftLine的右边与label的左边距离-10        make.right.mas_equalTo(weakSelf.label.mas_left).offset(-10);    }];        // 右边的线    [self.rightLine mas_makeConstraints:^(MASConstraintMaker *make) {        // rightLine的右侧与父视图相距-20        make.trailing.equalTo(weakSelf).offset(-20);        // rightLine的高度和垂直居中与leftLine一致        make.height.centerY.mas_equalTo(weakSelf.leftLine);        // rightLine的左边与label的右边相差10        make.left.mas_equalTo(weakSelf.label.mas_right).offset(10);    }];}

Demo下载

0 0