Masonry是個好東西，在當前尺寸各異的iOS開發適配中發揮着至關重要的作用，由於項目中Masonry布局用的比較多，對於UI布局也有了一些自己的理解，經常會有人問道Masonry布局九宮格要怎么布局呢，單行、多行要怎么做到自動布局呢，之前用frame布局九宮格需要2層for循環，各種判斷才可以完成一套九宮格布局，那使用Masonry是不是也這么麻煩呢，答案是否定的！下面把Masonry布局單行，多行的代碼貼出來，注釋的很詳細，有需要的同學可以參考參考，可能對於Masonry的使用會有不一樣的理解。
圖片
代碼
//
// ViewController.m
// SudokuLayout
//
// Created by Tiny on 2017/12/29.
// Copyright © 2017年 hxq. All rights reserved.
//
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//如果需要考慮橫豎屏可以將布局代碼寫在LayoutSubViews這個方法中
//九宮格布局單行
[self layoutOneLine];
//九宮格布局多行 其實跟單行布局差不多，唯一要注意的是要判斷換行的問題 為了體現差異，把兩種單獨寫 代碼確實有大量重復的
//多行布局是支持單行的
[self layoutMultiLine];
//分析了代碼可以看出來 多行布局和單行布局其實沒有什么特殊的地方
//區別點 1.確定什么時候換行
// 2.確定距離布局區域頂部的距離多少
//當前在真是開發環境中還會存在各種差異，但是只要理解了布局思路，相信不管怎么樣布局都會游刃有余
}
-(void)layoutOneLine{
//單行布局 不需要考慮換行的問題
CGFloat marginX = 10; //按鈕距離左邊和右邊的距離
CGFloat marginY = 10; //按鈕距離布局頂部的距離
CGFloat toTop = 50; //布局區域距離頂部的距離
CGFloat gap = 10; //按鈕與按鈕之間的距離
NSInteger col = 5; //這里只布局5列
NSInteger count = 5; //這里先設置布局5個按鈕
CGFloat viewWidth = self.view.bounds.size.width; //視圖的寬度
CGFloat viewHeight = self.view.bounds.size.height; //視圖的高度
CGFloat itemWidth = (viewWidth - marginX *2 - (col - 1)*gap)/col*1.0f; //根據列數 和 按鈕之間的間距 這些參數基本可以確定要平鋪的按鈕的寬度
CGFloat height = itemWidth; //按鈕的高度可以根據情況設定 這里設置為相等
UIButton *last = nil; //上一個按鈕
//准備工作完畢 既可以開始布局了
for (int i = 0 ; i < count; i++) {
UIButton *item = [self buttonCreat];
[item setTitle:@(i).stringValue forState:UIControlStateNormal];
[self.view addSubview:item];
//布局
[item mas_makeConstraints:^(MASConstraintMaker *make) {
//寬高是固定的，前面已經算好了
make.width.mas_equalTo(itemWidth);
make.height.mas_equalTo(height);
//topTop距離頂部的距離，單行不用考慮太多，多行，還需要計算距離頂部的距離
make.top.mas_offset(toTop+marginY);
if (!last) { //last為nil 說明是第一個按鈕
make.left.mas_offset(marginX);
}else{
//第二個或者后面的按鈕 距離前一個按鈕右邊的距離都是gap個單位
make.left.mas_equalTo(last.mas_right).mas_offset(gap);
}
}];
last = item;
}
}
-(void)layoutMultiLine{
//多行布局 要考慮換行的問題
CGFloat marginX = 10; //按鈕距離左邊和右邊的距離
CGFloat marginY = 1; //距離上下邊緣距離
CGFloat toTop = 200; //按鈕距離頂部的距離
CGFloat gapX = 10; //左右按鈕之間的距離
CGFloat gapY = 10; //上下按鈕之間的距離
NSInteger col = 5; //這里只布局5列
NSInteger count = 13; //這里先設置布局任意個按鈕
CGFloat viewWidth = self.view.bounds.size.width; //視圖的寬度
CGFloat viewHeight = self.view.bounds.size.height; //視圖的高度
CGFloat itemWidth = (viewWidth - marginX *2 - (col - 1)*gapX)/col*1.0f; //根據列數 和 按鈕之間的間距 這些參數基本可以確定要平鋪的按鈕的寬度
CGFloat itemHeight = itemWidth; //按鈕的高度可以根據情況設定 這里設置為相等
UIButton *last = nil; //上一個按鈕
//准備工作完畢 既可以開始布局了
for (int i = 0 ; i < count; i++) {
UIButton *item = [self buttonCreat];
[item setTitle:@(i).stringValue forState:UIControlStateNormal];
[self.view addSubview:item];
//布局
[item mas_makeConstraints:^(MASConstraintMaker *make) {
//寬高是固定的，前面已經算好了
make.width.mas_equalTo(itemWidth);
make.height.mas_equalTo(itemHeight);
//topTop距離頂部的距離，單行不用考慮太多，多行，還需要計算距離頂部的距離
//計算距離頂部的距離 --- 根據換行
CGFloat top = toTop + marginY + (i/col)*(itemHeight+gapY);
make.top.mas_offset(top);
if (!last || (i%col) == 0) { //last為nil 或者(i%col) == 0 說明換行了 每行的第一個確定它距離左邊邊緣的距離
make.left.mas_offset(marginX);
}else{
//第二個或者后面的按鈕 距離前一個按鈕右邊的距離都是gap個單位
make.left.mas_equalTo(last.mas_right).mas_offset(gapX);
}
}];
last = item;
}
}
#pragma mark - Private
-(UIButton *)buttonCreat{
UIButton *item = [[UIButton alloc] init];
item.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0f];
item.titleLabel.font = [UIFont systemFontOfSize:16];
[item setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
return item;
}
@end
如上，代碼中的注釋已經很詳細了，相信看到這里的同學都已經明白了布局原理，這里強調下最后總結的幾句話：
分析了代碼可以看出來 多行布局和單行布局其實沒有什么特殊的地方 區別點
1.確定什么時候換行
2.確定距離布局區域頂部的距離多少
當然在真實開發環境中還會存在各種差異，但是只要理解了布局思路，相信不管怎么樣布局都會游刃有余
由於代碼只有一個文件，也已經全部貼出來了。這里就不提供demo了(-_-)
版權歸tinych,qqcc1388所有，轉載請標注轉載來源：http://www.cnblogs.com/qqcc1388/p/8143836.html