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

一、介绍一下ViewController中的结构

二、九宫格设计思路

三、代码实现

 // 点击增加按钮
 - (void)add:(UIButton *)btn
 {
     // 定义一行中的列数（个数）
     NSInteger cols = ;

     // 小格子的尺寸
     NSInteger bagWidth = ;
     NSInteger bagHeight = ;

     // 小格子横向之间的间距
     CGFloat marginX = (self.shops.frame.size.width - (bagWidth*cols))/(cols - );
     // 小格子纵向之间的间距
     CGFloat marginY = ;

     // 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(, , , );

     // 创建标签
     UILabel *label = [[UILabel alloc] init];
     label.frame = CGRectMake(, , , );
     label.text = self.things[index][@"name"];
     label.textAlignment = NSTextAlignmentCenter;
     label.font = [UIFont systemFontOfSize:];

     [bag addSubview:label];
     [bag addSubview:image];
     [self.shops addSubview:bag];

     // 改变按钮状态
     [self changeState:btn];
 }

四、练习效果图

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