iOS Masonry實(shí)現(xiàn)九宮格布局

直接復(fù)制下面代碼看效果
一、常規(guī)布局方式


517349-20160819194720781-2023804629.png
517349-20160819194712937-1138283651.png
517349-20160819194657703-1828190789.png
- (void)viewDidLoad {
    [super viewDidLoad];
    // TODO: 創(chuàng)建一個(gè)裝載九宮格的容器
    UIView *containerView = [[UIView alloc] init];
    [self.view addSubview:containerView];
    containerView.backgroundColor = [UIColor whiteColor];
    containerView.layer.borderWidth = 1;
    containerView.layer.borderColor = [UIColor grayColor].CGColor;
    
　  // TODO:給該容器添加布局代碼
    [containerView makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(15);
        make.top.equalTo(66);
        make.right.equalTo(-15);
        make.height.equalTo(300);
    }];

    // TODO:  為該容器添加宮格View 
    for (int i = 0; i < 10; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor randomColor];
        [containerView addSubview:view];
    }

    // TODO: 執(zhí)行九宮格布局

   /*
     一行代碼，就可以實(shí)現(xiàn)九宮格布局
     
     -[NSArray mas_distributeSudokuViewsWithFixedItemWidth:fixedItemHeight:fixedLineSpacing:fixedInteritemSpacing:warpCount:topSpacing:bottomSpacing:leadSpacing:tailSpacing:]
     
     參數(shù)介紹：
     
     fixedItemWidth: 宮格的寬度，如果設(shè)置為0的話，則由父容器控制寬度，如果不為零，則可以控制父容器的寬度
     
     fixedItemHeight：與fixedItemWidth同理
     
     fixedLineSpacing：宮格之間行的間距，如果宮格只有一行，則不生效
     
     fixedInteritemSpacing：宮格之間列的間距，如果只有一列，則不生效
     
     warpCount：折行的位置，如果設(shè)置為3，則表示該九宮格需要布局3列，值得一提的是，如果NSArray本身的count如果小于warpCount，則該函數(shù)會(huì)用空的UIView填充到缺失區(qū)域。
     
     topSpacing：bottomSpacing：leadSpacing：tailSpacing：九宮格頂邊距，底邊距，左邊距以及右邊距
     */

  [containerView.subviews  mas_distributeSudokuViewsWithFixedItemWidth:0
                                                        fixedItemHeight:0
                                                       fixedLineSpacing:10
                                                  fixedInteritemSpacing:20
                                                              warpCount:3
                                                             topSpacing:10
                                                          bottomSpacing:10
                                                            leadSpacing:10
                                                            tailSpacing:10];
    
}

二、另外一種布局方式

517349-20160819200905937-430060348.png

view創(chuàng)建代碼不變 masnory實(shí)現(xiàn)代碼如下

/**
 *  九宮格布局 固定ItemSize 可變ItemSpacing
 *
 *  @param fixedItemWidth  固定寬度
 *  @param fixedItemHeight 固定高度
 *  @param warpCount       折行點(diǎn)
 *  @param topSpacing      頂間距
 *  @param bottomSpacing   底間距
 *  @param leadSpacing     左間距
 *  @param tailSpacing     右間距
 */
/*
- (void)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth
                                    fixedItemHeight:(CGFloat)fixedItemHeight
                                          warpCount:(NSInteger)warpCount
                                         topSpacing:(CGFloat)topSpacing
                                      bottomSpacing:(CGFloat)bottomSpacing
                                        leadSpacing:(CGFloat)leadSpacing
                                        tailSpacing:(CGFloat)tailSpacing;
 */
[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:50
                                                       fixedItemHeight:50
                                                             warpCount:3
                                                            topSpacing:10
                                                         bottomSpacing:10
                                                           leadSpacing:10
                                                           tailSpacing:10];

// !!!: 實(shí)現(xiàn)如下 給數(shù)組加一個(gè)擴(kuò)展

.h

#import "MASUtilities.h"
#import "MASConstraintMaker.h"
#import "MASViewAttribute.h"

@interface NSArray (Sudoku)


/**
 *  九宮格布局 固定ItemSize 可變ItemSpacing
 *
 *  @param fixedItemWidth  固定寬度
 *  @param fixedItemHeight 固定高度
 *  @param warpCount       折行點(diǎn)
 *  @param topSpacing      頂間距
 *  @param bottomSpacing   底間距
 *  @param leadSpacing     左間距
 *  @param tailSpacing     右間距
 */
- (void)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth
                                    fixedItemHeight:(CGFloat)fixedItemHeight
                                          warpCount:(NSInteger)warpCount
                                         topSpacing:(CGFloat)topSpacing
                                      bottomSpacing:(CGFloat)bottomSpacing
                                        leadSpacing:(CGFloat)leadSpacing
                                        tailSpacing:(CGFloat)tailSpacing;


/**
 *  九宮格布局 可變ItemSize 固定ItemSpacing
 *
 *  @param fixedLineSpacing      行間距
 *  @param fixedInteritemSpacing 列間距
 *  @param warpCount             折行點(diǎn)
 *  @param topSpacing            頂間距
 *  @param bottomSpacing         底間距
 *  @param leadSpacing           左間距
 *  @param tailSpacing           右間距
 */
- (void)mas_distributeSudokuViewsWithFixedLineSpacing:(CGFloat)fixedLineSpacing
                                fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
                                            warpCount:(NSInteger)warpCount
                                           topSpacing:(CGFloat)topSpacing
                                        bottomSpacing:(CGFloat)bottomSpacing
                                          leadSpacing:(CGFloat)leadSpacing
                                          tailSpacing:(CGFloat)tailSpacing;


/**
 *  九宮格布局 固定ItemSize 固定ItemSpacing
 *  可由九宮格的內(nèi)容控制SuperView的大小
 *  如果warpCount大于[self count]，該方法將會(huì)用空白的View填充到superview中
 *
 *  Sudoku Layout, has fixed item size, and fix item space
 *  If warp count greater than self.count, It's fill empty view to superview
 *
 *  @param fixedItemWidth        固定寬度，如果設(shè)置成0，則表示自適應(yīng)，If set it to zero, indicates the adaptive.
 *  @param fixedItemHeight       固定高度，如果設(shè)置成0，則表示自適應(yīng)，If set it to zero, indicates the adaptive.
 *  @param fixedLineSpacing      行間距
 *  @param fixedInteritemSpacing 列間距
 *  @param warpCount             折行點(diǎn)
 *  @param topSpacing            頂間距
 *  @param bottomSpacing         底間距
 *  @param leadSpacing           左間距
 *  @param tailSpacing           右間距
 *
 *  @return 一般情況下會(huì)返回[self copy], 如果warpCount大于[self count]，則會(huì)返回一個(gè)被空白view填充過的數(shù)組，可以讓你循環(huán)調(diào)用removeFromSuperview或者干一些其他的事情;
 *  @return Normal will return [self copy], If warpCount bigger than [self count] , It will return a empty views filled array, you could enumerate [subview removeFromSuperview] or do other things;
 */
- (NSArray *)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth
                                         fixedItemHeight:(CGFloat)fixedItemHeight
                                        fixedLineSpacing:(CGFloat)fixedLineSpacing
                                   fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
                                               warpCount:(NSInteger)warpCount
                                              topSpacing:(CGFloat)topSpacing
                                           bottomSpacing:(CGFloat)bottomSpacing
                                             leadSpacing:(CGFloat)leadSpacing
                                             tailSpacing:(CGFloat)tailSpacing;
@end

.m

#import "NSArray+Sudoku.h"
#import "View+MASAdditions.h"

@implementation NSArray (Sudoku)


- (MAS_VIEW *)star_commonSuperviewOfViews {
    
    if (self.count == 1) {
        return ((MAS_VIEW *)self.firstObject).superview;
    }
    
    MAS_VIEW *commonSuperview = nil;
    MAS_VIEW *previousView = nil;
    for (id object in self) {
        if ([object isKindOfClass:[MAS_VIEW class]]) {
            MAS_VIEW *view = (MAS_VIEW *)object;
            if (previousView) {
                commonSuperview = [view mas_closestCommonSuperview:commonSuperview];
            } else {
                commonSuperview = view;
            }
            previousView = view;
        }
    }
    NSAssert(commonSuperview, @"Can't constrain views that do not share a common superview. Make sure that all the views in this array have been added into the same view hierarchy.");
    return commonSuperview;
}



- (void)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth
                                    fixedItemHeight:(CGFloat)fixedItemHeight
                                          warpCount:(NSInteger)warpCount
                                         topSpacing:(CGFloat)topSpacing
                                      bottomSpacing:(CGFloat)bottomSpacing
                                        leadSpacing:(CGFloat)leadSpacing
                                        tailSpacing:(CGFloat)tailSpacing {
    if (self.count < 2) {
        NSAssert(self.count>1,@"views to distribute need to bigger than one");
        return;
    }
    if (warpCount < 1) {
        NSAssert(false, @"warp count need to bigger than zero");
        return;
    }
    
    MAS_VIEW *tempSuperView = [self star_commonSuperviewOfViews];
    
    NSInteger rowCount = self.count % warpCount == 0 ? self.count / warpCount : self.count / warpCount + 1;
    
    MAS_VIEW *prev;
    for (int i = 0; i < self.count; i++) {
        
        MAS_VIEW *v = self[i];
        
        // 當(dāng)前行
        NSInteger currentRow = i / warpCount;
        // 當(dāng)前列
        NSInteger currentColumn = i % warpCount;
        
        [v mas_makeConstraints:^(MASConstraintMaker *make) {
            // 固定寬度
            make.width.equalTo(@(fixedItemWidth));
            make.height.equalTo(@(fixedItemHeight));
            
            // 第一行
            if (currentRow == 0) {
                make.top.equalTo(tempSuperView).offset(topSpacing);
            }
            // 最后一行
            if (currentRow == rowCount - 1) {
                make.bottom.equalTo(tempSuperView).offset(-bottomSpacing);
            }
            // 中間的若干行
            if (currentRow != 0 && currentRow != rowCount - 1){
                CGFloat offset = (1-(currentRow/((CGFloat)rowCount-1)))*(fixedItemHeight+topSpacing)-currentRow*bottomSpacing/(((CGFloat)rowCount-1));
                make.bottom.equalTo(tempSuperView).multipliedBy(currentRow/((CGFloat)rowCount-1)).offset(offset);
            }
            
            // 第一列
            if (currentColumn == 0) {
                make.left.equalTo(tempSuperView).offset(leadSpacing);
            }
            // 最后一列
            if (currentColumn == warpCount - 1) {
                make.right.equalTo(tempSuperView).offset(-tailSpacing);
            }
            // 中間若干列
            if (currentColumn != 0 && currentColumn != warpCount - 1) {
                CGFloat offset = (1-(currentColumn/((CGFloat)warpCount-1)))*(fixedItemWidth+leadSpacing)-currentColumn*tailSpacing/(((CGFloat)warpCount-1));
                make.right.equalTo(tempSuperView).multipliedBy(currentColumn/((CGFloat)warpCount-1)).offset(offset);
            }
        }];
        prev = v;
    }
}

- (void)mas_distributeSudokuViewsWithFixedLineSpacing:(CGFloat)fixedLineSpacing
                                fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
                                            warpCount:(NSInteger)warpCount
                                           topSpacing:(CGFloat)topSpacing
                                        bottomSpacing:(CGFloat)bottomSpacing
                                          leadSpacing:(CGFloat)leadSpacing
                                          tailSpacing:(CGFloat)tailSpacing {
    
    [self mas_distributeSudokuViewsWithFixedItemWidth:0 fixedItemHeight:0 fixedLineSpacing:fixedLineSpacing fixedInteritemSpacing:fixedInteritemSpacing warpCount:warpCount topSpacing:topSpacing bottomSpacing:bottomSpacing leadSpacing:leadSpacing tailSpacing:tailSpacing];
}

- (NSArray *)mas_distributeSudokuViewsWithFixedItemWidth:(CGFloat)fixedItemWidth
                                         fixedItemHeight:(CGFloat)fixedItemHeight
                                        fixedLineSpacing:(CGFloat)fixedLineSpacing
                                   fixedInteritemSpacing:(CGFloat)fixedInteritemSpacing
                                               warpCount:(NSInteger)warpCount
                                              topSpacing:(CGFloat)topSpacing
                                           bottomSpacing:(CGFloat)bottomSpacing
                                             leadSpacing:(CGFloat)leadSpacing
                                             tailSpacing:(CGFloat)tailSpacing {
    if (self.count < 1) {
        return self.copy;
    }
    if (warpCount < 1) {
        NSAssert(false, @"warp count need to bigger than zero");
        return self.copy;
    }
    
    MAS_VIEW *tempSuperView = [self star_commonSuperviewOfViews];
    
    NSArray *tempViews = self.copy;
    if (warpCount > self.count) {
        for (int i = 0; i < warpCount - self.count; i++) {
            MAS_VIEW *tempView = [[MAS_VIEW alloc] init];
            [tempSuperView addSubview:tempView];
            tempViews = [tempViews arrayByAddingObject:tempView];
        }
    }
    
    NSInteger columnCount = warpCount;
    NSInteger rowCount = tempViews.count % columnCount == 0 ? tempViews.count / columnCount : tempViews.count / columnCount + 1;
    
    MAS_VIEW *prev;
    for (int i = 0; i < tempViews.count; i++) {
        
        MAS_VIEW *v = tempViews[i];
        NSInteger currentRow = i / columnCount;
        NSInteger currentColumn = i % columnCount;
        
        [v mas_makeConstraints:^(MASConstraintMaker *make) {
            if (prev) {
                // 固定寬度
                make.width.equalTo(prev);
                make.height.equalTo(prev);
            }
            else {
                // 如果寫的item高寬分別是0，則表示自適應(yīng)
                if (fixedItemWidth) {
                    make.width.equalTo(@(fixedItemWidth));
                }
                if (fixedItemHeight) {
                    make.height.equalTo(@(fixedItemHeight));
                }
            }
            
            // 第一行
            if (currentRow == 0) {
                make.top.equalTo(tempSuperView).offset(topSpacing);
            }
            // 最后一行
            if (currentRow == rowCount - 1) {
                // 如果只有一行
                if (currentRow != 0 && i-columnCount >= 0) {
                    make.top.equalTo(((MAS_VIEW *)tempViews[i-columnCount]).mas_bottom).offset(fixedLineSpacing);
                }
                make.bottom.equalTo(tempSuperView).offset(-bottomSpacing);
            }
            // 中間的若干行
            if (currentRow != 0 && currentRow != rowCount - 1) {
                make.top.equalTo(((MAS_VIEW *)tempViews[i-columnCount]).mas_bottom).offset(fixedLineSpacing);
            }
            
            // 第一列
            if (currentColumn == 0) {
                make.left.equalTo(tempSuperView).offset(leadSpacing);
            }
            // 最后一列
            if (currentColumn == columnCount - 1) {
                // 如果只有一列
                if (currentColumn != 0) {
                    make.left.equalTo(prev.mas_right).offset(fixedInteritemSpacing);
                }
                make.right.equalTo(tempSuperView).offset(-tailSpacing);
            }
            // 中間若干列
            if (currentColumn != 0 && currentColumn != warpCount - 1) {
                make.left.equalTo(prev.mas_right).offset(fixedInteritemSpacing);
            }
        }];
        prev = v;
    }
    return tempViews;
}
@end
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,155評論 25贊 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,167評論 1贊 92
  • 翻譯自“Collection View Programming Guide for iOS” 0 關(guān)于iOS集合視...
    lakerszhy閱讀 4,076評論 1贊 22
  • 二級標(biāo)題 引語。與上面必須空一行，要不然這個(gè)一點(diǎn)都不好用的客戶端的編輯器死活不好控制引語范圍。 代碼呢？怎么插？ ...
    Youth霖閱讀 221評論 0贊 0
  • 當(dāng)不愛的時(shí)候，請不要失去自己的自信。因?yàn)閻垡粋€(gè)人，并非因他的優(yōu)秀，而只是一種感覺。他讓你有這樣的感覺，于是你愛他。...
    文靜視界閱讀 300評論 0贊 1

友情鏈接更多精彩內(nèi)容