T iOS九宫格布局 - CocoaChina_让移动开发更简单

首页 >iOS开发

iOS九宫格布局

2017-06-16 14:12 编辑: suiling 分类:iOS开发 来源:remember17

目的

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

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

3873004-50f5a92483f77dce.png

代码解读

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

3873004-9d9ce455f9260430.png

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

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

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

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

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

3873004-c8dc9eb309bf7d2f.png

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 

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:小事: 自动生成Getter代码
下一篇:33 款主宰 2017 iOS 开发的开源库
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部