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：参考小码哥视频教学，初学者膜拜大神！