iOS边练边学--九宫格布局

一、介绍一下ViewController中的结构

二、九宫格设计思路

三、代码实现

// 点击增加按钮
- (void)add:(UIButton *)btn
{
    // 定义一行中的列数（个数）
    NSInteger cols = 3;
    
    // 小格子的尺寸
    NSInteger bagWidth = 80;
    NSInteger bagHeight = 120;
    
    // 小格子横向之间的间距
    CGFloat marginX = (self.shops.frame.size.width - (bagWidth*cols))/(cols - 1);
    // 小格子纵向之间的间距
    CGFloat marginY = 15;
    
    // x方向的倍数
    CGFloat x = bagWidth + marginX;
    // y方向的倍数
    CGFloat y = bagHeight + marginY;
    
    // 小格子的索引
    NSInteger index = self.shops.subviews.count;
    // 小格子x坐标
    NSInteger tempX = index % cols;  // 小格子所在的列
    CGFloat bagX = tempX * x;
    // 小格子y坐标
    NSInteger tempY = index / cols; // 小格子所在的行
    CGFloat bagY = tempY * y;
    // 创建放图片和标签的view
    UIView *bag = [[UIView alloc] init];
    bag.frame = CGRectMake(bagX, bagY, bagWidth, bagHeight);
    bag.backgroundColor = [UIColor redColor];
    
    // 创建图片
    UIImageView *image = [[UIImageView alloc] init];
    [image setImage:[UIImage imageNamed:self.things[index][@"icon"]]];
    image.frame = CGRectMake(0, 0, 80, 80);
    
    // 创建标签
    UILabel *label = [[UILabel alloc] init];
    label.frame = CGRectMake(0, 80, 80, 40);
    label.text = self.things[index][@"name"];
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont systemFontOfSize:13];
    
    [bag addSubview:label];
    [bag addSubview:image];
    [self.shops addSubview:bag];
    
    // 改变按钮状态
    [self changeState:btn];
}

四、练习效果图

PS：参考小码哥视频教学，初学者膜拜大神！