在iOS开发的过程中经常会遇到需要在button中既放置图片和文字，系统默认会将图片居左，文字居右； 但我们也常常会遇到 图片居上文字居下 或者图片居右文字居左的需求，网上也有很多方法来实现这样的需求， 无非是以下几种方式：
- 设置imageEdgeInsets，titleEdgeInsets，调整图片跟文字的大小；
- 写一个类继承 UIButton，在这个类里设置 它 imageView 跟 titleLabel 的frame；
- 写一个自定义控件， button 上添加一个图片，一个label；
第一种方式，固然能实现需求，但是我们还是得计算 图片跟 文字的偏移量，当文字长短发生变化，图片大小发生变化或 通过网络加载的图片，无法固定图片位置的时候，我们又有一大堆的坑要填
第二种第三种 都需要自定义控件，我就不再多说了，我不喜欢这种方式
下面来看看我怎么简单实现Button 图片跟文字的任意布局的把。
我选择使用Category ，直接使用Button自带的titleLabel和imageView 来设置label和image的排列方式
.h 文件
#import
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
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值了，各位一看就能明白
一个问题的解决方法很多，需要我们不断的思考，不断的去实践。相信此文也能给大家提供一些新思路，对大家有一些帮助。