ios创建多宫格界面方法（2）

最近的一个工程里有使用到UICollectionView来创建多宫格界面，并自定义边框和宫格的背景图片，以下为工程里多宫格界面的实现代码，在此记录一下。

完整代码

1.新建一个继承于NSObject的模型类ScanToolModel

//ScanToolModel.h文件实现
@interface ScanToolModel : NSObject
//图片
@property (nonatomic,strong) NSString  *imageStr;
//名称
@property (nonatomic,strong) NSString  *titleStr;
//标识
@property (nonatomic,assign) NSInteger  btnTag;
@end

//ScanToolModel.m文件实现
@implementation ScanToolModel
//初始化
- (instancetype)init{
    if (self = [super init]) {
        _imageStr = @"";
        _titleStr = @"";
        _btnTag = 0;
    }
    return self;
}

2.新建继承于UICollectionViewCell的类ScanToolCell，用于编辑每个cell的内容

//ScanToolCell.h文件实现
@interface ScanToolCell : UICollectionViewCell
//每个cell上定义一个按钮
@property (nonatomic,strong)UIButton *btn;
@property (nonatomic,strong)ScanToolModel *model;
@end

//ScanToolCell.m文件实现
@implementation ScanToolCell
{
    UIImageView  *imageView;
    UILabel  *titleLab;
}
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self loadBtnView];
    }
    return self;
}
//自定义界面
- (void)loadBtnView{
    CGFloat btnWidth = SCREEN_W/3.00;
    CGFloat btnHeight = SCREEN_H/ 4;
    self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.btn setFrame:CGRectMake(0, 0, btnWidth, btnHeight)];
    [self.btn setBackgroundColor:[UIColor clearColor]];
    [self.contentView addSubview:self.btn];
    //图片
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake((VIEWFSW(self.btn)-IPHONE6(59))/2,IPHONE6(17), IPHONE6(59), IPHONE6(59))];
    [self.contentView addSubview:imageView];
   //名称
    titleLab = [[UILabel alloc] initWithFrame:CGRectMake(0, VIEWFH_Y(imageView)+IPHONE6(2), VIEWFSW(self.btn), IPHONE6(44))];
    [titleLab setTextColor:UIColor.whiteColor];
    [titleLab setTextAlignment:NSTextAlignmentCenter];
    [titleLab setFont:[UIFont systemFontOfSize:16.0]];
    [titleLab setNumberOfLines:0];
    [self.contentView addSubview:titleLab];
}
//赋值
- (void)setModel:(ScanToolModel *)model{
    [self.btn setTag:model.btnTag];
    [imageView setImage:IMAGENAMED(model.imageStr)];
    [titleLab setText:model.titleStr];
}

3.在VC中实现

- (void)viewDidLoad {
    [super viewDidLoad];
    [self loadSourceData];
    [self createCollection];
}
//获取数据
-(void) loadSourceData{
       NSArray *baseAry = @[
                 @[@"res_ico_dtc_check",@"按钮1"],
                 @[@"res_ico_obd2",@"按钮2"],
                 @[@"res_ico_datalive",@"按钮3"],
                 @[@"res_ico_freeze_frame",@"按钮4"],
                 @[@"res_ico_smog_check",@"按钮5"],
                 @[@"res_ico_o2_seson",@"按钮6"],
                 @[@"res_ico_mode6",@"按钮7"],
                 @[@"res_ico_MIL",@"按钮8"],
                 @[@"res_ico_vehicle_info",@"按钮9"],
                 @[@"res_ico_battery_test",@"按钮10"],
                 @[@"scbg",@"按钮11"],@[@"repss",@"按钮12"]];
         for (NSInteger i = 0; i < baseAry.count; i ++) {
            ScanToolModel *model = [[ScanToolModel alloc] init];
            model.imageStr = baseAry[i][0];
            model.titleStr = baseAry[i][1];
            model.btnTag = 3200 + I;
            [_dataAry addObject:model];
            NSString *btnStr = [NSString stringWithFormat:@"%ld",(long)I];
            [btnAry addObject:btnStr];
        }
}
//创建12宫格
- (void)createCollection{
    //自定义宫格边框背景
    for (NSInteger i = 0; i < 4; i ++) {
        for (NSInteger j = 0; j < 3; j ++) {
            CGFloat btnW =  SCREEN_W/3.00;
            CGFloat btnH = SCREEN_H/4.0;
            CGFloat  btnX = j*btnW;
            CGFloat btnY = I*btnH;
            UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(btnX, btnY, btnW, btnH)];
            [backView.layer setBorderColor:RGBA(170, 170, 170, 0.5).CGColor];
            [backView.layer setBorderWidth:0.5];
            [backView.layer setMasksToBounds:YES];
            [self.view addSubview:backView];
            UIImageView *img = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, btnW, btnH)];
           //每个宫格的背景
            img.image = [UIImage imageNamed:@"obd_backgroup"];
            [backView addSubview:img];
            img.clipsToBounds=YES;
            img.userInteractionEnabled=YES;
        }
    }
    UICollectionViewFlowLayout * lay = [[UICollectionViewFlowLayout alloc]init];
    collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_W, SCREEN_H) collectionViewLayout:lay];
    collect.backgroundColor = [UIColor clearColor];
    [collect registerClass:[ScanToolCell class] forCellWithReuseIdentifier:@"cell"];
    [collect setDelegate:self];
    [collect setDataSource:self];
    [self setUpLongPressGes];
    [self.view addSubview:collect];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _dataAry.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ScanToolCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    ScanToolModel *scantoolmodel = _dataAry[indexPath.item];
    cell.model = scantoolmodel;
    //因为在cell上自定义了按钮，所以在这使用自定义按钮触发事件，不使用didSelectItemAtIndexPath方法
    [cell.btn addTarget:self action:@selector(selectorBtn:) forControlEvents:UIControlEventTouchUpInside];
    return cell;
}
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
}
//实现按钮点击方法
- (void)selectorBtn:(UIButton *)sender{
    for (int i = 0; i < _dataAry.count; i ++) {
        ScanToolModel *model = _dataAry[i];
        if (model.btnTag == sender.tag) {
            [self funcButtonClickAction:model.titleStr];
            break;
        }
    }
}
//在此处理点击按钮后的操作
- (void)funcButtonClickAction:(NSString *)title
{
}

效果图

img_1.png
除了使用UICollectionView来实现多宫格界面，也可以使用其它方式实现，可参考ios创建多宫格界面方法（1）。