iOS Masonry九宫格布局 - 一行代码实现九宫格

IMG_0085.PNG

各题型得分率模块，题型数量不定。
这个页面使用UIScrollView，
宫格模块没有使用UICollectionView，原因：
1.UICollectionView继承UIScrollView，就会面临滚动视图嵌套。

2. UICollectionView处理大量列表数据有优势，这里使用题型不超过10种，不回超出屏幕，UICollectionView复用机制体现不出来
3. UICollectionViewd代码量大，逻辑处理麻烦

使用Masonry，代码如下：
第一步：创建一个装载九宫格的容器

// 创建一个装载九宫格的容器
    UIView *containerView = [[UIView alloc] init];
    [self addSubview:containerView];
    containerView.backgroundColor = [UIColor whiteColor];
    
    // 给该容器添加布局代码
    [containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(icon.mas_bottom).offset(2);
        make.centerX.equalTo(@0);
        // topSpacing 30
        // 方格高度57x2
        // 分割线 1
        make.height.equalTo(@145);
        make.width.equalTo(@229);
    }];

第二步：为该容器添加宫格View

for (int i = 0; i < 3; i++) {
        WJExamedCustoItem *view = [[WJExamedCustoItem alloc] init];
        view.backgroundColor = defaultLightBlueColor;
        [containerView addSubview:view];
    }

第三步：布局宫格

[containerView.subviews mas_distributeSudokuViewsWithFixedItemWidth:114
                                                        fixedItemHeight:57
                                                       fixedLineSpacing:1
                                                  fixedInteritemSpacing:1
                                                              warpCount:2
                                                             topSpacing:30
                                                          bottomSpacing:0
                                                            leadSpacing:0
                                                            tailSpacing:0];

其他，WJExamedCustoItem，简单实现如下

//
//  WJExamedCustoItem.m
//  KingTalent
//
//  Created by 王杰 on 2021/1/26.
//  Copyright © 2021 我用双手成就你的梦想. All rights reserved.
//
/*
 报告页面 各题型得分率
 */

#import "WJExamedCustoItem.h"
@interface WJExamedCustoItem ()
@property (nonatomic,strong)UILabel * topLabel;
@property (nonatomic,strong)UILabel * bottomLabel;

@end

@implementation WJExamedCustoItem

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self createUI];
       
    }
    return self;
}

- (void)createUI{
    self.topLabel = [[UILabel alloc]init];
    [self addSubview:self.topLabel];
    [self.topLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@0);
        make.centerX.equalTo(@0);
    }];
    self.topLabel.text = @"16分";
    
    self.bottomLabel = [[UILabel alloc]init];
    [self addSubview:self.bottomLabel];
    [self.bottomLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(@(-15));
        make.centerX.equalTo(@0);
    }];
    self.bottomLabel.text = @"A1型题得分";
    self.bottomLabel.font = [UIFont systemFontOfSize:14 weight:UIFontWeightMedium];
    self.bottomLabel.textColor = kTMainTitleColor;
    
}

@end

注意事项：

注意事项.png

宫格布局 固定ItemSize 固定ItemSpacing的情况下make.height.equalTo(@145);只要不是145，就会造成约束冲突，必须准确到每一个点像素。

宫格布局 可变ItemSize 固定ItemSpacing的情况下，则不需要考虑点像素准确。因为ItemSize通常是用来展示内容的，ItemSpacing通常是用来作为分割线的。ItemSize根据父视图，或者手机屏幕的宽来控制大小，即：如果图片的话，大屏手机显示内容更大。

个人很喜欢可变ItemSize 固定ItemSpacing，但有时候需求是需要固定ItemSize

工具类地址：NSArray+Sudoku