iOS Masonry九宮格佈局 - 一行代碼實現九宮格

時間  2019-12-20
標籤 ios masonry 九宮 佈局 一行 代碼 實現 欄目 iOS 简体版
原文   原文鏈接

已經有一年多沒有發過博客了，時隔一年的第一篇博客，上點有用的東西。git

 

如何使用Masonry實現的九宮格佈局函數？怎麼才能一句代碼就搞定九宮格佈局？github

跟隨這篇文章走出九宮格的困境，讓你再也不爲九宮格佈局的代碼感到煩心，讓你拋棄使用CollectionView。數組

 

直接上效果圖：dom

 以上三張圖片的九宮格佈局，皆由一句代碼完成:函數

#import "Masonry.h"

@implementation UIColor (Extensions)


+ (instancetype)randomColor {
    
    CGFloat red = arc4random_uniform(255) / 255.0;
    CGFloat green = arc4random_uniform(255) / 255.0;
    CGFloat blue = arc4random_uniform(255) / 255.0;
    return [self colorWithRed:red green:green blue:blue alpha:1.0];
}

@end

@interface ViewController ()

@end


@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 建立一個裝載九宮格的容器
    UIView *containerView = [[UIView alloc] init];
    [self.view addSubview:containerView];
    containerView.backgroundColor = [UIColor whiteColor];
    containerView.layer.borderWidth = 1;
    containerView.layer.borderColor = [UIColor grayColor].CGColor;
    
　　// 給該容器添加布局代碼
    [containerView makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(15);
        make.top.equalTo(66);
        make.right.equalTo(-15);
        make.height.equalTo(300);
    }];
    // 爲該容器添加宮格View 
    for (int i = 0; i < 10; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor randomColor];
        [containerView addSubview:view];
    }
    // 執行九宮格佈局
    [containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:0 fixedItemHeight:0 fixedLineSpacing:10 fixedInteritemSpacing:20 warpCount:3 topSpacing:10 bottomSpacing:10 leadSpacing:10 tailSpacing:10];
    
}

@end

 

該方法追求極簡的方式實現九宮格佈局，只須要一行代碼，就能讓你實現上圖的九宮格佈局佈局

-[NSArray mas_distributeSudokuViewsWithFixedItemWidth:fixedItemHeight:fixedLineSpacing:fixedInteritemSpacing:warpCount:topSpacing:bottomSpacing:leadSpacing:tailSpacing:]this

首先我來講說該方法的介個參數：spa

fixedItemWidth: 宮格的寬度，若是設置爲0的話，則由父容器控制寬度，若是不爲零，則能夠控制父容器的寬度code

fixedItemHeight：與fixedItemWidth同理orm

fixedLineSpacing：宮格之間行的間距，若是宮格只有一行，則不生效

fixedInteritemSpacing：宮格之間列的間距，若是隻有一列，則不生效

warpCount：折行的位置，若是設置爲3，則表示該九宮格須要佈局3列，值得一提的是，若是NSArray自己的count若是小於warpCount，則該函數會用空的UIView填充到缺失區域。

topSpacing：bottomSpacing：leadSpacing：tailSpacing：九宮格頂邊距，底邊距，左邊距以及右邊距，很少說

 

接下來上實現代碼：

 

- (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;

}

/**

 *  九宮格佈局 固定ItemSize 固定ItemSpacing

 *  可由九宮格的內容控制SuperView的大小

 *  若是warpCount大於[self count]，該方法將會用空白的View填充到superview中

 *

 *  @param fixedItemWidth        固定寬度，若是設置成0，則表示自適應

 *  @param fixedItemHeight       固定高度，若是設置成0，則表示自適應

 *  @param fixedLineSpacing      行間距

 *  @param fixedInteritemSpacing 列間距

 *  @param warpCount             折行點

 *  @param topSpacing            頂間距

 *  @param bottomSpacing         底間距

 *  @param leadSpacing           左間距

 *  @param tailSpacing           右間距

 *

 *  @return 通常狀況下會返回[self copy], 若是warpCount大於[self count]，則會返回一個被空白view填充過的數組，可讓你循環調用removeFromSuperview或者幹一些其餘的事情;

 */

- (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，則表示自適應
                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;
}

 

 

固然這種九宮格佈局的方式仍是不可以知足大家

 

接下來看另一種佈局方式：

這種佈局方法以父容器的大小爲基準，宮格大小固定不變，宮格之間互相間距無約束，使用方法和上圖相似

[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:50 fixedItemHeight:50 warpCount:3 topSpacing:10 bottomSpacing:10 leadSpacing:10 tailSpacing:10];

上實現代碼：

/**
 *  九宮格佈局 固定ItemSize 可變ItemSpacing
 *
 *  @param fixedItemWidth  固定寬度
 *  @param fixedItemHeight 固定高度
 *  @param warpCount       折行點
 *  @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 {
    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];
        
        // 當前行
        NSInteger currentRow = i / warpCount;
        // 當前列
        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;
    }
}

項目地址：https://github.com/iStarEternal/Sudoku/tree/master

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程