UIButton 九宫格

我们在项目中经常看见这样的效果
我们第一印象是个UICollectionView 可是是否发现这个不需要去创建一个UICollectionView

2406962-871d3d5a8a8897ee.png

我们只需要六个按钮就可以了，当然 如果很多的话，也是一样的我们只需要改变个数就可以了
废话不多说 直接上代码

小弟为了给大家方便理解，给大家每一行都加了注释

![Uploading 2406962-d7d7867e64c1596b_785170.png . . .]

给大家看一下效果图

2406962-f1038f255573e980.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];

}

                 还有需求是这样的

当然如果你需要让他们左右两边没有边距，但是中间所有的按钮都有边距，然后文字在图片的下面，我们知道系统提供的按钮设置图片和文字的话，图片在左边，文字会在图片 所以我们需要自定义按钮 右边看效果图

2406962-2a363eecb0ba1f71.png

同样直接给大家上代码哈

2406962-bf1822e0a60d04ff.png

这里涉及到一个自定义按钮，我就下篇文章告诉大家吧，这个其实也很简单，为了大家方便，快速的使用起来，我给大家上代码，可以直接复制过去使用

// 每行放多少个

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];

}

最后给大家看一下思路，直接看图，基本就懂了

652450-8f1263b54aa822b3.png.jpeg

备注：

如果有不足或者错误的地方还望各位读者批评指正，可以评论留言，笔者收到后第一时间回复。

QQ/微信：2366889552 /lan2018yingwei。

号：凡尘一笑：[]

http://www.jianshu.com/users/0158007b8d17/latest_articles

感谢各位观众老爷的阅读，如果觉得笔者写的还凑合，可以关注或收藏一下，不定期分享一些好玩的实用的demo给大家。

文／凡尘一笑（作者）

原文链接： http://www.jianshu.com/p/8ae080edb3ea

著作权归作者所有，转载请联系作者获得授权，并标注“作者”。