4:按钮的图与标题位置调整二
之前，写过利用按钮的图片，标题边缘设置属性（）来控制图片与文字的位置，网上，也有很多的相关文章，但是真的用起来，你会发现，还不够，没错，还不够。
是什么不够呢，调整这两个属性对于我们的UI要求还不够，我们需要更精确的调整。这个时候，怎么办？
在这里跟大家介绍一种更简单的方式来对按钮的图片和文字进行更精确更直接的调整，这种方式就是——自定义一个按钮啊！屁大点事！！！
看到这里，一些刚入行的萌新，可能会觉得很烦。毕竟，所有的萌新都希望能用最简单的语言来做一切事。最好是写上一行NSLog（@“这个程序都按照设计写好了”），然后一个app就做好了。
不过，已经有过较丰富的工作经验的同学们都知道，自定义一个按钮，这真的是屁大点事。
在这里我要说一句，活到老，学到老这句话不是说这玩玩的。早不学，晚不学，早晚都要学的。
总之，看网上这方面的资料少到没有，之前写的按钮调整方法网上不少又有点不实用，所以就再写一篇比较方便的控制按钮图文UI的吧。
好吧，到这里不多说了，上代码。
//创建一个灰色view
UIView *tmpV1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, H_ScreenWidth, H_ScreenHeight/2.0)];
[self.view addSubview:tmpV1];
tmpV1.backgroundColor = [UIColor grayColor];
//创建三个按钮
for (int i = 1; i <= 3; i++) {
WLButton *btn = [[WLButton alloc] init];
btn.backgroundColor = [UIColor redColor];
btn.wl_imageFrame = CGRectMake(5*i, 5*i, 50-10*i, 10);
btn.wl_titleFrame = CGRectMake(5*i+55, 5*i+5, 50+10*i, 10);
btn.titleLabel.backgroundColor = [UIColor blueColor];
[tmpV1 addSubview:btn];
btn.frame = CGRectMake(5, 30*i + 30*(i-1), tmpV1.wl_width-10, 30);
[btn setTitle:@"111" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"12"] forState:UIControlStateNormal];
}
效果图：（只是为了给大家一个感受，原谅我渣渣的艺术细胞吧）
1
图中是一个图片为灰色电脑（超模糊版，理解就行），标题为111的红色按钮。对于按钮中的图文UI为，按钮的图片左边距与上边距距离按钮初识为5，依次加5。宽度初识为40，依次递减10，高度为10不变。
标题其他类似，左边距依次加5，昆都依次加10。
其中WLButton是我自定义的一个按钮，继承于按钮，重写了- (void)layoutSubviews；这个方法，代码如下。
- (void)layoutSubviews{
[super layoutSubviews];
//判断是否有直接设定图文UI
if (!CGRectEqualToRect(self.wl_imageFrame, CGRectZero)) {
self.imageView.frame = self.wl_imageFrame;
self.titleLabel.frame = self.wl_titleFrame;
}
}
看到现在，不知大家有没有发想熟悉的地方？没错，这其实就是相当于在一个红色view上add了一个图片和一个标题。这东西说白了原理很简单，UIButton也就是按钮是系统给我们封装好的一个控件。在按钮上有一个图片视图用来显示图片，一个label用来显示标题。
而我们要做的就是在按钮的子视图重新布局时（layoutSubviews被调用时），直接控制图片和标题的frame。就这么简单，其他的都不用去管。
如此，一个能够更精确的用来控制按钮图文的frame的按钮就完成了。
结尾语：以上可谓是最简单的写法了，主要是为了抛砖引玉。至于按钮的效果，按照自己需要的做就是了，白看不如一写。希望大家的工资越涨越高，^_^。
网友评论