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