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

2017-03-22 本文已影响0人 GerryZhu

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

设置imageEdgeInsets，titleEdgeInsets，调整图片跟文字的大小；
写一个类继承 UIButton，在这个类里设置它 imageView 跟 titleLabel 的frame；
写一个自定义控件， 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值了，各位一看就能明白
一个问题的解决方法很多，需要我们不断的思考，不断的去实践。相信此文也能给大家提供一些新思路，对大家有一些帮助。

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

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

猜你喜欢

热点阅读