我们在项目中经常看见这样的效果
我们第一印象是个UICollectionView 可是是否发现这个不需要去创建一个UICollectionView
我们只需要六个按钮就可以了，当然 如果很多的话，也是一样的我们只需要改变个数就可以了
废话不多说 直接上代码
小弟为了给大家方便理解，给大家每一行都加了注释
![Uploading 2406962-d7d7867e64c1596b_785170.png . . .]
给大家看一下效果图
如果你不是需要8个按钮，而是需要9个 只需要改一下个数就可以了，是不是很方便。
同时，如果你需要改变每个按钮的大小，直接改变那个宽:W 高:W的值就可以了。
这里涉及到一个自定义按钮，我就下篇文章告诉大家吧，这个其实也很简单，为了大家方便，快速的使用起来，我给大家上代码，可以直接复制过去使用
int totalColumns = 4; // 每行放多少个
//按钮的宽
CGFloat W = 80;
//按钮的高
CGFloat H = W;
//按钮之间的间隔 同时也是按钮距离左右屏幕的间隔
CGFloat margin = (self.view.frame.size.width - totalColumns*W)/(totalColumns + 1);
//总数是多少个
NSInteger number = 8;
//循环创建按钮
for (int i = 0; i < number; i++)
{
//自定义按钮
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
//决定在哪一行
int row = i /totalColumns;
//决定在哪一列
int col = i %totalColumns;
//按钮的背景颜色
button.backgroundColor = [UIColor redColor];
//给按钮设图片
[button setImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
//每个按钮的X值
CGFloat X = margin + col *(W + margin);
//每个按钮的Y值
CGFloat Y = 20 + row*(H + margin);
//按钮尺寸大小和位置
button.frame = CGRectMake(X, Y, W, H);
//每个按钮添加到父控件上
[self.view addSubview:button];
}
还有需求是这样的
当然如果你需要让他们左右两边没有边距，但是中间所有的按钮都有边距，然后文字在图片的下面，我们知道系统提供的按钮设置图片和文字的话，图片在左边，文字会在图片 所以我们需要自定义按钮 右边看效果图
同样直接给大家上代码哈
这里涉及到一个自定义按钮，我就下篇文章告诉大家吧，这个其实也很简单，为了大家方便，快速的使用起来，我给大家上代码，可以直接复制过去使用
// 每行放多少个
int totalColumns = 3;
//每个按钮的宽
CGFloat W = WIDTH/3;
//每个按钮的高
CGFloat H = W;
//总数是多少个
int number = 12;
//创建按钮
for (int i = 0; i < number; i++)
{
//自定义按钮
CustomButton *button = [CustomButton buttonWithType:UIButtonTypeCustom];
//按钮所在哪一行
int row = i / totalColumns;//行
//按钮所在哪一列
int col = i % totalColumns;//列
//按钮设置图片
[button setImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];
//按钮设置文字
[button setTitle:@"你好" forState:UIControlStateNormal];
//按钮的X
CGFloat X = col * (W + 1);
//按钮的Y
CGFloat Y = row * (H + 1);
//按钮的尺寸位置
button.frame = CGRectMake(X, Y, W, H);
//添加都父控件
[self.view addSubview:button];
}
最后给大家看一下思路，直接看图，基本就懂了
备注：
如果有不足或者错误的地方还望各位读者批评指正，可以评论留言，笔者收到后第一时间回复。
QQ/微信：2366889552 /lan2018yingwei。
简书号：凡尘一笑：[简书]
http://www.jianshu.com/users/0158007b8d17/latest_articles
感谢各位观众老爷的阅读，如果觉得笔者写的还凑合，可以关注或收藏一下，不定期分享一些好玩的实用的demo给大家。
文／凡尘一笑（简书作者）
原文链接： http://www.jianshu.com/p/8ae080edb3ea
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
