UIButton的title和image
UIButton的默认布局是:title在右,image在左;
系统默认.png
一种是设置UIButton的以下两个属性:
// default is UIEdgeInsetsZero
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
// default is UIEdgeInsetsZero
@property(nonatomic) UIEdgeInsets imageEdgeInsets;
需要精确的设置偏移量,但是有些量是无法获取的,只能在使用时调整,特别是设置标题在底部时,总感觉image的左右距离button的左右间隙不一致;
还有一种就是,自定义button,继承自UIButton,重写UIButton的以下两个方法:
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
对frame的控制就比较自由了,需要注意的是对间隔把控,使用这种方式就没有第一种的方式问题了;
不管是系统默认,还是我们修改之后的,button的frame设置都是很重要的,不合适的frame会让button看起来很不舒服...
设置属性
- 修改为标题在左,图片在右样式
其属性的类型为UIEdgeInsets,为一个结构体:
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 :为正数的时候往左偏移,为负数的时候往右偏移;
button.titleLabel.backgroundColor = button.backgroundColor;
button.imageView.backgroundColor = button.backgroundColor;
// 在使用一次titleLabel和imageView后才能正确获取titleSize
CGSize titleSize = button.titleLabel.bounds.size;
CGSize imageSize = button.imageView.bounds.size;
CGFloat interval = 1.0;
button.imageEdgeInsets = UIEdgeInsetsMake(0,titleSize.width + interval, 0, -(titleSize.width + interval));
button.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageSize.width + interval), 0, imageSize.width + interval);
效果
标题在左效果.png
- 修改为图片在上,标题在下样式
button.titleLabel.backgroundColor = button.backgroundColor;
button.imageView.backgroundColor = button.backgroundColor;
CGSize titleSize = button.titleLabel.bounds.size;
CGSize imageSize = button.imageView.bounds.size;
CGFloat interval = 1.0;
[button setImageEdgeInsets:UIEdgeInsetsMake(0,0, titleSize.height + interval, -(titleSize.width + interval))];
[button setTitleEdgeInsets:UIEdgeInsetsMake(imageSize.height + interval, -(imageSize.width + interval), 0, 0)];
效果
标题在下.png
通过自定义Button
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
这两个方法不是只调用一次,会被多次调用,只要button的title改变,都会调用此方法,最后一次调用,返回的frame值,才是最终的布局frame,所以,在这里,可以通过获取button的标题,动态地修改其frame,使title和image显示紧凑;
- 标题在左侧,图像在右侧
一般这种布局的不同都是宽度比高大很多,这里我以button的高度为参考来设置imageView和titleLabel的高度
CGFloat inteval = CGRectGetHeight(contentRect) / 8.0;
// 设置图片的宽高为button高度的 3/4;
CGFloat imageH = CGRectGetHeight(contentRect) - 2 * 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) - 2 * 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) - 2 * inteval;
CGRect rect = CGRectMake(inteval, inteval, CGRectGetWidth(contentRect) - imageH - 2*inteval, CGRectGetHeight(contentRect) - 2*inteval);
return rect;
}
效果图:
标题在左效果.png
