iOS九宫格布局

内容简介：iOS九宫格布局

目的

本文要跟大家分享的是一个简单九宫格算法，可以帮你自动计算间距，对控件(Button/Label/imageView...)或view进行有序排列。 Demo

由于可以定义列数/宽高，请自行设计应用场景。

代码解读

一、首先在控制器中定义几个宏（图1）

宽度：定义将要添加的这些控件的宽度。

高度：定义将要添加的这些控件的高度。

列数：你想让这些控件排成几列。

ps：这里所说的控件也可以是view。

二、九宫格形式添加控件 ,以添加图片为例（图2）

1. 代码要放在一个for循环里

循环的次数代表将要创建图片个数，不要忘了这个for循环

for (int i = 0; i<pictures.count; i++)

2. 首先创建控件，并添加到视图上

UIImageView *imageView = [[UIImageView alloc] init];

imageView.image = [UIImage imageNamed:pictures[i]];

[self.view addSubview:imageView];

3. 然后计算本张图片应该放在第几行和第几列

NSInteger row = i / COL_COUNT;

NSInteger col = i % COL_COUNT;

4. 计算图片平均排列的间距

CGFloat margin = (self.view.bounds.size.width - (PIC_WIDTH * COL_COUNT)) / (COL_COUNT + 1);

5. 计算图片所在的x和y坐标

CGFloat picX = margin + (PIC_WIDTH + margin) * col;

CGFloat picY = margin + (PIC_HEIGHT + margin) * row;

6. 定义这张图片的frame

imageView.frame = CGRectMake(picX, picY, PIC_WIDTH, PIC_HEIGHT);

至此九宫格形式添加完毕，其中的图片内容可以是网络加载或本地加载。

控制器初始化时把图片放到一个数组里，九宫格控件的总个数根据这个数组得到。

我做了一个本地加载图片的 Demo

以上所述就是小编给大家介绍的《iOS九宫格布局》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• iOS 中使用 FlexBox 布局实现图片九宫格
• 小程序—九宫格心形拼图
• Python处理图片九宫格，炫酷朋友圈
• iOS swift 最好用的 手势密码 九宫格
• iOS 仿新浪微博 九宫格 gif 循环播放
• css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。