您的位置:首页 > 移动开发 > IOS开发

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

2016-03-05 15:23 495 查看
一、介绍一下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:参考小码哥视频教学,初学者膜拜大神!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: