iOS Masonry介紹與使用

標籤：

由於蘋果公司不斷推出新的機型，所以大家都知道iOS開發中UI布局常常需要適配，同時也應該瞭解到蘋果裝置的適配主要是4，5，6，6plus這4種裝置的適配。適配的方法有代碼適配和使用xib添加約束，其中代碼適配是用到autolayout但是官方推出的文檔和Demo實在是繁瑣，個人覺得還不如笨辦法使用寬高比來的實在（但是計算寬高比以及擷取裝置需要的方法和代碼太多），直到發現Masonry這個做適配的第三方真是頗為簡單好用，所以簡單記錄一下。

iPhone的尺寸規格

裝置	尺寸	邏輯解析度	Scale Factor	裝置解析度
3GS	3.5inch	320*480	@1x	320*480
4(s)	3.5inch	320*480	@2x	640*960
5(s)	4inch	320*568	@2x	640*1136
5c	4inch	320*568	@2x	640*1136
6(s)	4.7inch	375*667	@2x	750*1334
6(s)plus	5.5inch	414*736	@3x	1242*2208

Masonry的源碼：https://github.com/SnapKit/Masonry

Masonry是一個輕量級的布局架構，它擁有自己的描述文法，採用更優雅的鏈式文法封裝自動布局，並簡潔明了，具有高可讀性。

Masonry支援的屬性有：

    //左側，相當於NSAutoLayout的NSLayoutAttributeLeft    @property (nonatomic, strong, readonly) MASConstraint *left;    //上側，相當於NSAutoLayout的NSLayoutAttributeTop    @property (nonatomic, strong, readonly) MASConstraint *top;    //右側，相當於NSAutoLayout的NSLayoutAttributeRight    @property (nonatomic, strong, readonly) MASConstraint *right;    //下冊，相當於NSAutoLayout的NSLayoutAttributeBottom    @property (nonatomic, strong, readonly) MASConstraint *bottom;    //首部，相當於NSAutoLayout的NSLayoutAttributeLeading    @property (nonatomic, strong, readonly) MASConstraint *leading;    //尾部，相當於NSAutoLayout的NSLayoutAttributeTrailing    @property (nonatomic, strong, readonly) MASConstraint *trailing;    //寬，相當於NSAutoLayout的NSLayoutAttributeWidth    @property (nonatomic, strong, readonly) MASConstraint *width;    //高，相當於NSAutoLayout的NSLayoutAttributeHeight    @property (nonatomic, strong, readonly) MASConstraint *height;    //橫向中點（即x軸中點），相當於NSAutoLayout的NSLayoutAttributeCenterX    @property (nonatomic, strong, readonly) MASConstraint *centerX;    //縱向中點（即y軸中點），相當於NSAutoLayout的NSLayoutAttributeCenterY    @property (nonatomic, strong, readonly) MASConstraint *centerY;    //文本基準，相當於NSAutoLayout的NSLayoutAttributeBaseline    @property (nonatomic, strong, readonly) MASConstraint *baseline;

瞭解了Masonry支援的屬性後，我們大致也瞭解一下Masonry給我們提供的給控制項添加約束的三個方法。

//    新增約束    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;//    修改已有約束    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;//    清除之前已有約束，只保留新的約束    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

簡單的案例：

1.置中顯示一個寬度和高度都為200的UIView

代碼：

__weak typeof (self) weakSelf = self;//防止block中循環參考    UIView *centerView = [[UIView alloc] init];    centerView.backgroundColor = [UIColor redColor];    [self.view addSubview:centerView];    [centerView mas_makeConstraints:^(MASConstraintMaker *make) {        make.center.equalTo(weakSelf.view);        make.size.mas_equalTo(CGSizeMake(200, 200));    }];

：

2.相框效果.即子UIView小於supview。

代碼：

__weak typeof (self) weakSelf = self;//防止block中循環參考    UIView *photoView = [[UIView alloc] init];    photoView.layer.borderWidth = 1;    photoView.layer.borderColor = [UIColor blackColor].CGColor;    photoView.backgroundColor = [UIColor grayColor];    [self.view addSubview:photoView];        UIImageView *imageView = [[UIImageView alloc] init];    imageView.image = [UIImage imageNamed:@"1"];    [photoView addSubview:imageView];            [photoView mas_makeConstraints:^(MASConstraintMaker *make) {        make.center.equalTo(weakSelf.view);        make.size.mas_equalTo(CGSizeMake(200, 200));    }];        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {//        方式一：//        make.top.equalTo(photoView).offset(10);//        make.left.equalTo(photoView).offset(10);//        make.bottom.equalTo(photoView).offset(-10);//        make.right.equalTo(photoView).offset(-10);//        方式二：//        make.top.left.bottom.right.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));//        方式三：        make.edges.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));    }];

效果

使用Masonry的添加約束的之前，必須先把View添加到視圖中。

iOS Masonry介紹與使用