iOS masonry九宮格 單行 多行佈局

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