关于UIButton大家都很熟悉,系统默认的样式,是image在左,title在右的,如下图所示:
但是,很多情况下UI的设计可不是这么样的,最常用的是image在右边,title在左的button,和类似分享页面的那种上面是image,下面是title的button;如下图所示:
笔者每次需要这种需求的时候,都是查很多资料,看了一些不痛不痒的介绍,然后再很复杂的实现;效果暂且不说,耽误了大量的时间,所以,花点时间研究了一下这种效果实现,在这里总结一下:
PS:如果你只是想使用这种效果,可直接下载Demo1,Demo2,里面有笔者扩展的方法可以直接使用;如果你想了解其中的原理,请耐心看完本文.本文是对笔者实现这种效果以及之间遇到的问题的一个总结;
这里,笔者介绍两种实现的方式,一种是通过对系统的UIButton进行扩展(category),一种是通过继承自UIButton,自定义;
1.对UIButton扩展(category)
这种方式主要是用到了UIButton的下面两个属性:
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // default is UIEdgeInsetsZero
@property(nonatomic) UIEdgeInsets imageEdgeInsets; // default is UIEdgeInsetsZero
下面以设置为title在左,image在右为例进行介绍:
首先来看一下这两个属性的类型:
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
他有四个参数: top left bottom right表示上左下右的偏移量,其含义为:
top : 为正数的时候,是往下偏移,为负数的时候往上偏移;
left : 为正数的时候往右偏移,为负数的时候往左偏移;
bottom : 为正数的时候往上偏移,为负数的时候往下偏移;
right :为正数的时候往左偏移,为负数的时候往右偏移;
回过头来看这两个属性titleEdgeInsets就是设置title的偏移量,imageEdgeInsets就是设置image的偏移量;
那么问题来了,怎样设置这个偏移量呢?很多介绍这种方式的使用的偏移量的都是固定的值(但是这些值是从哪里参考而来并没有说明),一旦你的button的frame和他介绍的不一样,就需要多次修改,以找到最合适的偏移量,看得云里雾里不说,调整偏移量也花费了很多时间;经过笔者的一些测试,发现还是有些公共的东西可以使用的:
相信大家第一个想到的就是UIButton的titleLabel和imageView的frame;所以,首先获取他们的frame:
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
// title和image之间的间隙
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width;
然后设置他们各自偏移量:
[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];
这两个属性的默认值都是0,所以,在不需要偏移的方向上,偏移量设置为0即可,那么,怎么知道哪个方向需要偏移,哪个方向不需要偏移呢?
其实,很简单,只需要仔细观察,偏移前(系统默认布局)和偏移后(你想要的布局)有哪些变化:
对于image:由左边移动到右边,可知,上下不变,左右偏移,即image的left和right变化;
对于title:由右边移动到左边,同样是上下不变,左右偏移,即title的left和right变化;
清楚了哪些方向上有变化,接下来就是变化多少的问题了:
因为要把image移动到button的右边,需要往右移动,所以imageEdgeInsets距左边界(left)的偏移量需要设置为标题的宽度加上他们之间的间隙,即:titleSize.width + space,右边的偏移量(right)同样是titleSize.width + space,但是应该是负的,即:-(titleFrame.size.width + space);其他方向没有移动,直接设为默认值0;
同理,title需要往左移动,需要设置titleEdgeInsets距离左边界(left)的偏移量为负的image + space的宽度,即: '-(imageSize.width + space' (同 '-(titleFrame.origin.x - imageFrame.origin.x)' ),此时title距离右边界的偏移量(right)就不是0了,而应该是image + space的宽度,即:imageSize.width + space;
设置完后,看一下效果,似乎并不是预想的那样:
回头仔细看了下设置,逻辑上似乎并没有错误,那是哪儿出了问题呢?仔细查找后找到了问题,因为这时获取到的
title的size值为0:
但是,笔者偶然间发现,只要在获取titleSize之前,使用一次button的titleLabel和imageView,就能获取到他的size了,设置一下titleLabel和imageView的任意属性都行,如果不需要设置这些属性,可以和我一样,设置一下它的背景色和button一致(只是为了提前使用一次):
button.titleLabel.backgroundColor = button.backgroundColor;
button.imageView.backgroundColor = button.backgroundColor;
PS:这样虽然能够获取到titleSize,但是多这么一个操作,实在不是正常的,如果你有更好的方式获取,还请留言告知,感谢!!
PS: 新增
关于获取的titleLabel的frame为zero可以参考这里的介绍, button的title被设置后,并不会立马去更新其frame, 所以需要在合适的地方主动更新, 这里使用的是解决方法中的第一种, 即:
[self layoutIfNeeded];
这样设置之后,基本能够实现需求了:
[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];
效果图如下:
会发现,几乎和系统默认的一致;
最终实现效果的完整设置(主要是获取
size的时机)为:
[self layoutIfNeeded];
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width
[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];
最终效果图:
- 修改为图片再上,标题在下样式
过程基本相同,只是在最后设置的时候不同,这里直接给出主要设置代码:
[self layoutIfNeeded];
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width
[self setImageEdgeInsets:UIEdgeInsetsMake(0,0, titleFrame.size.height + space, -(titleFrame.size.width))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(imageFrame.size.height + space, -(imageFrame.size.width), 0, 0)];
效果图:
针对此方法,本人写了一个UIButton的category:Demo地址,里面的类目可直接拿来使用,简单调用一个方法即可;
2.通过自定义Button
该方法,是通过自定义一个button,继承自UIButton,然后重写下面两个方法:
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
对于这两个方法,网上的一些介绍真是不得不吐槽了,模糊不清;后来根据笔者多次尝试,个人理解为:方法的参数contentRect,即内容的frame,其值和button的bounds是一样的,通过这个参数可以获取到当前button的size;返回值为CGRect类型,即是title或image在button的绝对坐标值;换句话说,这里返回的是一个绝对坐标,即button的子控件在button上的绝对布局,这里可以返回一个写死的frame(查到的使用此方法的也都是写死的frame),但要注意,不要超过contentRect的范围**;
有一点需要说明:这两个方法不是只调用一次,会被多次调用,只要button的title改变,都会调用此方法,最后一次调用,返回的frame值,才是最终的布局frame,所以,在这里,可以通过获取button的标题,动态地修改其frame,使title和image显示紧凑;
明白了这两个方法,下面就开始使用它:
- 标题在左侧,图像在右侧
一般这种布局的button都是宽度比高大很多,所以,这里我以button的高度为参考来设置imageView和titleLabel的高度,即:
CGFloat inteval = CGRectGetHeight(contentRect)/8.0;
//设置图片的宽高为button高度的3/4;
CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;
这个间隔可以根据自己的需求修改;
然后设置imageView的frame:
CGRect rect = CGRectMake(CGRectGetWidth(contentRect) - imageH - inteval, inteval, imageH, imageH);
即:
-(CGRect)imageRectForContentRect:(CGRect)contentRect {
CGFloat inteval = CGRectGetHeight(contentRect)/8.0;
//设置图片的宽高为button高度的3/4;
CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;
CGRect rect = CGRectMake(CGRectGetWidth(contentRect) - imageH - inteval, inteval, imageH, imageH);
return rect;
}
下面来设置titleLabel的frame:
-(CGRect)titleRectForContentRect:(CGRect)contentRect {
CGFloat inteval = CGRectGetHeight(contentRect)/8.0;
//设置图片的宽高为button高度的3/4;
CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;
CGRect rect = CGRectMake(inteval, inteval, CGRectGetWidth(contentRect) - imageH - 2*inteval, CGRectGetHeight(contentRect) - 2*inteval);
return rect;
}
效果图:
这种设置的方法好处是,可以手动控制titleLabel和imageView的frame,但是不足之处是,不能像系统的那样根据图片的scale和title字符串的大小来设置frame的大小;
当button的frame能够很好的包含title和image的时候,效果基本差不多;当button的frame不适合时区别还是很明显的:
可以看出,主要的区别是:系统默认的可以动态地修改子控件的frame,虽然显示效果也不是很理想;
- 标题在底部,图像在上面
思路基本一致,这里直接给出设置代码:
-(CGRect)imageRectForContentRect:(CGRect)contentRect {
CGFloat inteval = CGRectGetWidth(contentRect)/16.0;
inteval = MIN(inteval, 6);
//设置图片的宽高为button宽度的7/8;
CGFloat imageW = CGRectGetWidth(contentRect) - 22 * inteval;
CGRect rect = CGRectMake(inteval, inteval, imageW, imageW);
return rect;
}
-(CGRect)titleRectForContentRect:(CGRect)contentRect {
CGFloat inteval = CGRectGetWidth(contentRect)/16.0;
inteval = MIN(inteval, 6);
//设置图片的宽高为button宽度的7/8;
CGFloat imageW = CGRectGetWidth(contentRect) - 22 * inteval;
CGRect rect = CGRectMake(0, inteval*2 + imageW, CGRectGetWidth(contentRect) , CGRectGetHeight(contentRect) - 3*inteval - imageW);
return rect;
}
效果图:
这里有一点说明:就是标题的对齐方式,上面的效果图是设置了居中对齐,系统默认是居左的,什么时候更改这个设置呢?
我的做法是这样的,因为我增加了一个自定义属性,用来选择设置的
button的样式:
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger,LZRelayoutButtonType) {
LZRelayoutButtonTypeNomal = 0,//默认
LZRelayoutButtonTypeLeft = 1,//标题在左
LZRelayoutButtonTypeBottom = 2,//标题在下
};
@interface LZRelayoutButton : UIButton
@property (assign,nonatomic)LZRelayoutButtonType lzType;
@end
我重写了它的setter方法:
-(void)setLzType:(LZRelayoutButtonType)lzType {
_lzType = lzType;
if (lzType != LZRelayoutButtonTypeNomal) {
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
}
这种方式的设置,我写了一个Demo,里面的自定义button可以拿来直接使用,如果对你有帮助,还请star支持一下,感谢!!!
总结
以上两种方式都能实现重新布局UIButton的子控件的效果,各有优缺点:
第一种方式:需要精确的设置偏移量,但是有些量是无法获取的,只能在使用时调整,特别是设置标题在底部时,总感觉image的左右距离button的左右间隙不一致;
第二种方式:对frame的控制就比较自由了,需要注意的是对间隔的把控,使用这种方式就没有第一种的方式问题了;
不管是系统默认,还是我们修改之后的button,其frame的设置都是很重要的,不合适的frame会让button看起来很不舒服...
PS:因为文章是从本人CSDN博客迁移而来,所以,文中使用图片带有CSDN的水印,原文 地址: [iOS]详解调整UIButton的title和image的位置
