iOS开发之button实现图片文字布局

我们在做开发时候，经常会遇到一写需求，也就是带文字和图片的一个按钮，如下图所示

按钮
当然可以写个contentView里面装一个label 和一个imageview,然后再给contentView添加一个点击事件，但是这样做过于麻烦。所以呢，个人认为相对优雅的做法就是给button添加一个类扩展category,说干就干。

h文件

//UIButton重新布局的类型
typedef NS_ENUM(NSInteger, GHImagePosition) {
    GHImagePositionNull = 0,
    GHImagePositionLeft = 1,              //图片在左，文字在右，默认
    GHImagePositionRight = 2,             //图片在右，文字在左
    GHImagePositionTop = 3,               //图片在上，文字在下
    GHImagePositionBottom = 4,            //图片在下，文字在上
};

@interface UIButton (GHLayout)

/**
 *  文本和图片间的间距
 */
@property (assign, nonatomic) CGFloat subMargin;

/**
 *  布局的类型
 */
@property (assign, nonatomic) GHImagePosition layoutType;

/**
 *  对按钮内部的图片和文本重新进行布局
 *
 *  @param layoutType 重新布局的类型
 *  @param subMargin  内部图片和文本之间的间距
 */
- (void)layoutWithType:(GHImagePosition)layoutType subMargin:(CGFloat)subMargin;

.m文件

- (void)layoutWithType:(GHImagePosition)layoutType subMargin:(CGFloat)subMargin {
    self.layoutType = layoutType;
    self.subMargin = subMargin;
    [self setImagePosition:self.layoutType spacing:self.subMargin];
}
#pragma mark - Runtime Setter and getter
- (void)setLayoutType:(GHImagePosition)layoutType {
    if (self.layoutType == layoutType) {
        return;
    }
    objc_setAssociatedObject(self, @selector(layoutType),[NSNumber numberWithInteger:layoutType],OBJC_ASSOCIATION_COPY_NONATOMIC);
    [self setNeedsLayout];
}

- (GHImagePosition)layoutType {
    NSNumber * result = objc_getAssociatedObject(self, @selector(layoutType));
    return [result integerValue];
}

- (void)setSubMargin:(CGFloat)subMargin {
    if (self.subMargin == subMargin) {
        return;
    }
    objc_setAssociatedObject(self, @selector(subMargin),[NSNumber numberWithFloat:subMargin],OBJC_ASSOCIATION_COPY_NONATOMIC);
    [self setNeedsLayout];
}

- (CGFloat)subMargin {
    NSNumber * result = objc_getAssociatedObject(self, @selector(subMargin));
    return [result floatValue];
}
#pragma mark - Layout Methods

- (void)setImagePosition:(GHImagePosition)postion spacing:(CGFloat)spacing {
    
    CGFloat imageWidth = self.imageView.image.size.width;
    CGFloat imageHeight = self.imageView.image.size.height;
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
    CGFloat labelWidth = [self.titleLabel.text sizeWithFont:self.titleLabel.font constrainedToSize:self.frame.size].width;
 
    CGFloat labelHeight = [self.titleLabel.text sizeWithFont:self.titleLabel.font constrainedToSize:self.frame.size].height;
#pragma clang diagnostic pop
 
    CGFloat imageOffsetX = (imageWidth + labelWidth) / 2 - imageWidth / 2;//image中心移动的x距离
    CGFloat imageOffsetY = imageHeight / 2 + spacing / 2;//image中心移动的y距离
    CGFloat labelOffsetX = (imageWidth + labelWidth / 2) - (imageWidth + labelWidth) / 2;//label中心移动的x距离
    CGFloat labelOffsetY = labelHeight / 2 + spacing / 2;//label中心移动的y距离
    
    CGFloat tempWidth = MAX(labelWidth, imageWidth);
    CGFloat changedWidth = labelWidth + imageWidth - tempWidth;
    CGFloat tempHeight = MAX(labelHeight, imageHeight);
    CGFloat changedHeight = labelHeight + imageHeight + spacing - tempHeight;
    
    switch (postion) {
        case GHImagePositionLeft:
            self.imageEdgeInsets = UIEdgeInsetsMake(0, -spacing/2, 0, spacing/2);
            self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, -spacing/2);
            self.contentEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, spacing/2);
            break;
            
        case GHImagePositionRight:
    
                 self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing/2, 0, -(labelWidth + spacing/2));
                   self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageWidth + spacing/2), 0, imageWidth + spacing/2);
                self.contentEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, spacing/2);
   
             break;
            
        case GHImagePositionTop:
            self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX, -labelOffsetY, labelOffsetX);
            self.contentEdgeInsets = UIEdgeInsetsMake(imageOffsetY, -changedWidth/2, changedHeight-imageOffsetY, -changedWidth/2);
            break;
            
        case GHImagePositionBottom:
            self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX, labelOffsetY, labelOffsetX);
            self.contentEdgeInsets = UIEdgeInsetsMake(changedHeight-imageOffsetY, -changedWidth/2, imageOffsetY, -changedWidth/2);
            break;
            
        default:
            break;
    }
    
}

使用：

 [self.button layoutWithType:GHImagePositionRight subMargin:10.f];

简单实用，哈哈

使用说明