UILabel的基本使用
我们在项目中经常看见这样的效果
我们第一印象是个UICollectionView 可是是否发现这个不需要去创建一个UICollectionView
2406962-871d3d5a8a8897ee.p
我们只需要六个按钮就可以了,当然 如果很多的话,也是一样的我们只需要改变个数就可以了
废话不多说 直接上代码
小弟为了给大家方便理解,给大家每一行都加了注释
![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]; }
最后给大家看一下思路,直接看图,基本就懂了