使用Masonry自动布局

对于新手来说,还是学习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倍
}];
约束条件的设置根据相对于的属性进行相关联,其他的控件的约束如上述一般大抵是以上的类似编写的约束。

最后的效果图如下:


使用Masonry自动布局_第1张图片
实现自动布局.png

以上。

你可能感兴趣的:(使用Masonry自动布局)