关于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;
设置完后,看一下效果,似乎并不是预想的那样:

但是,笔者偶然间发现,只要在获取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)];

效果图如下:

[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;  
}  

效果图:

#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的位置

(完)