利用 runtime 实现UIButton图片在上和文字在下

在iOS开发的过程中经常会遇到需要在button中既放置图片和文字，系统默认会将图片居左，文字居右； 但我们也常常会遇到 图片居上文字居下 或者图片居右文字居左的需求，网上也有很多方法来实现这样的需求， 无非是以下几种方式：

1. 设置imageEdgeInsets，titleEdgeInsets，调整图片跟文字的大小；
2. 写一个类继承 UIButton，在这个类里设置 它 imageView 跟 titleLabel 的frame；
3. 写一个自定义控件， button 上添加一个图片，一个label；

第一种方式，固然能实现需求，但是我们还是得计算 图片跟 文字的偏移量，当文字长短发生变化，图片大小发生变化或 通过网络加载的图片，无法固定图片位置的时候，我们又有一大堆的坑要填
第二种第三种 都需要自定义控件，我就不再多说了，我不喜欢这种方式

下面来看看我怎么简单实现Button 图片跟文字的任意布局的把。
我选择使用Category ，直接使用Button自带的titleLabel和imageView 来设置label和image的排列方式

.h 文件

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    ButtonImgViewStyleTop,
    ButtonImgViewStyleLeft,
    ButtonImgViewStyleBottom,
    ButtonImgViewStyleRight,
} ButtonImgViewStyle;

@interface UIButton (Extensions)


/**
 设置 按钮 图片所在的位置

 @param style   图片位置类型（上、左、下、右）
 @param size    图片的大小
 @param space 图片跟文字间的间距
 */
- (void)setImgViewStyle:(ButtonImgViewStyle)style imageSize:(CGSize)size space:(CGFloat)space;

@end

.m 实现

#import "UIButton+Extensions.h"
#import <objc/runtime.h>

static const char Btn_ImgViewStyle_Key;
static const char Btn_ImgSize_key;
static const char Btn_ImgSpace_key;

@implementation UIButton (Extensions)

- (void)setImgViewStyle:(ButtonImgViewStyle)style imageSize:(CGSize)size space:(CGFloat)space
{
    objc_setAssociatedObject(self, &Btn_ImgViewStyle_Key, @(style), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    objc_setAssociatedObject(self, &Btn_ImgSpace_key, @(space), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    objc_setAssociatedObject(self, &Btn_ImgSize_key, NSStringFromCGSize(size), OBJC_ASSOCIATION_COPY_NONATOMIC);  
}


+ (void)load
{
    Method m1 = class_getInstanceMethod([self class], @selector(layoutSubviews));
    Method m2 = class_getInstanceMethod([self class], @selector(layoutSubviews1));
    method_exchangeImplementations(m1, m2);
}

- (void)layoutSubviews1
{
    [self layoutSubviews1];

    NSNumber *typeNum = objc_getAssociatedObject(self, &Btn_ImgViewStyle_Key);
    if (typeNum) {
        NSNumber *spaceNum = objc_getAssociatedObject(self, &Btn_ImgSpace_key); 
        NSString *imgSizeStr = objc_getAssociatedObject(self, &Btn_ImgSize_key);
        CGSize imgSize = self.currentImage ? CGSizeFromString(imgSizeStr) : CGSizeZero;
        CGSize labelSize = self.currentTitle.length ? [self.currentTitle sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}] : CGSizeZero;

        CGFloat space = (labelSize.width && self.currentImage) ? spaceNum.floatValue : 0;

        CGFloat width = self.frame.size.width;
        CGFloat height = self.frame.size.height;

        CGFloat imgX, imgY, labelX, labelY;

        switch (typeNum.integerValue) {
            case ButtonImgViewStyleLeft:
            {
                imgX = (width - imgSize.width - labelSize.width - space)/2.0;
                imgY = (height - imgSize.height)/2.0;
                labelX = imgX + imgSize.width + space;
                labelY = (height - labelSize.height)/2.0;
                self.imageView.contentMode = UIViewContentModeRight;
                break;
            }
            case ButtonImgViewStyleTop:
            {
                imgX = (width - imgSize.width)/2.0;
                imgY = (height - imgSize.height - space - labelSize.height)/2.0;
                labelX = (width - labelSize.width)/2;
                labelY = imgY + imgSize.height + space;
                self.imageView.contentMode = UIViewContentModeBottom;
                break;
            }
            case ButtonImgViewStyleRight:
            {
                labelX = (width - imgSize.width - labelSize.width - space)/2.0;
                labelY = (height - labelSize.height)/2.0;
                imgX = labelX + labelSize.width + space;
                imgY = (height - imgSize.height)/2.0;
                self.imageView.contentMode = UIViewContentModeLeft;
                break;
            }
            case ButtonImgViewStyleBottom:
            {
                labelX = (width - labelSize.width)/2.0;
                labelY = (height - labelSize.height - imgSize.height -space)/2.0;
                imgX = (width - imgSize.width)/2.0;
                imgY = labelY + labelSize.height + space;
                self.imageView.contentMode = UIViewContentModeTop;
                break;
            }
            default:
                break;
        }
        self.imageView.frame = CGRectMake(imgX, imgY, imgSize.width, imgSize.height);
        self.titleLabel.frame = CGRectMake(labelX, labelY, labelSize.width, labelSize.height);
    }
}

@end

来看看使用吧

#import "ViewController.h"
#import "UIButton+Extensions.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 100, 90, 66)];
    button.backgroundColor = [UIColor lightGrayColor];
    [button setImage:[UIImage imageNamed:@"xiaoshou"] forState:UIControlStateNormal];
    [button setTitle:@"小手上划" forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:13];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setImgViewStyle:ButtonImgViewStyleTop imageSize:CGSizeMake(32, 31) space:7];

    [self.view addSubview:button];
}

@end

效果如下： 图片在上，文字在下，间隔为 7

![Upload 屏幕快照 2017-03-22 下午3.10.35.png failed. Please try again.]

#import "ViewController.h"
#import "UIButton+Extensions.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 100, 90, 66)];
    button.backgroundColor = [UIColor lightGrayColor];
    [button setImage:[UIImage imageNamed:@"xiaoshou"] forState:UIControlStateNormal];
    [button setTitle:@"小手上划" forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:13];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setImgViewStyle:ButtonImgViewStyleRight imageSize:CGSizeMake(32, 31) space:7];

    [self.view addSubview:button];
}

@end

效果如下：图片在右，文字居左，间隔 7

![Upload 屏幕快照 2017-03-22 下午3.15.50.png failed. Please try again.]

如果你对实现原理感兴趣，那么下面的很重要！

我在Category里给Button添加了一个方法：

• (void)setImgViewStyle:(ButtonImgViewStyle)style imageSize:(CGSize)size space:(CGFloat)space；

1.layoutSubviews是对subviews重新布局。如果，我们想更新子视图的位置的时候，可以通过调用layoutSubviews方法，既可以实现对子视图重新布局。我就是在 这个方法里重新 布局了 Button的两个子视图，imageView跟titleLabel；
2.Category 并不能给 类添加属性，按照1的思路，我需要记录下我添加的这个方法里的参数值，在 layoutSubviews 中使用；
3.在 Category 里重写 layoutSubviews，调用父类 [super layoutSubviews] 时没有效果。 而不调用 super 的方法时，会导致图片绘制不上，亲测！
4.为解决2的问题，我使用了一些 runtime 的方法，首先 Category 并不能给 类添加属性， 我使用 runtime 的 objc_setAssociatedObject、objc_getAssociatedObject 方法给Button 动态的添加了几个属性；
5.为解决3的问题，我使用runtime将 系统的 layoutSubviews 与 我写的 layoutSubviews1 进行交换， 在layoutSubviews1 里首先调用 [self layoutSubviews1]; 看起来貌似循环调用了，不用担心，由于此方法已与layoutSubviews方法交换，所以实际上是调用了系统的 layoutSubviews方法，也就解决了3中的问题
6.接下来也就是重新计算 imageView跟titleLabel 的frame值了，各位一看就能明白
一个问题的解决方法很多，需要我们不断的思考，不断的去实践。相信此文也能给大家提供一些新思路，对大家有一些帮助。