按钮图片文字随意摆放

日常开发中我门都会遇到图片和文字在一个区域，这样的话系统的按钮就满足不了我们需求，下面先看图:

上代码:

/*
 *按钮图片和文字一体随意摆放.
 */

#import <UIKit/UIKit.h>

@interface XMButton : UIButton

@property (nonatomic,assign)CGRect titleRect;
@property (nonatomic,assign)CGRect imageRect;


@end


#import "XMButton.h"

@implementation XMButton


- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        self.titleLabel.font = [UIFont systemFontOfSize:13];
    }
    
    return self;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    if (!CGRectIsEmpty(self.titleRect)&&!CGRectEqualToRect(self.titleRect, CGRectZero)) {
        
        return self.titleRect;
    }
    
    return [super titleRectForContentRect:contentRect];
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    if (!CGRectIsEmpty(self.imageRect)&&!CGRectEqualToRect(self.imageRect, CGRectZero)) {
        
        return self.imageRect;
    }
    
    return [super imageRectForContentRect:contentRect];
}
@end

调用：

 //图上文下
    XMButton *wxButton = [XMButton buttonWithType:UIButtonTypeCustom];
    [wxButton setTitle:@"我是微信" forState:UIControlStateNormal];
    [wxButton setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
    [wxButton setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];
    [wxButton setBackgroundColor:[UIColor greenColor]];
    [wxButton setImage:[UIImage imageNamed:@"weixinfenxiang"] forState:UIControlStateNormal];
    wxButton.frame = CGRectMake(20, 70, 80, 80);
    wxButton.imageRect = CGRectMake(10, 5, wxButton.bounds.size.width-20, wxButton.bounds.size.height-25);
    wxButton.titleRect = CGRectMake(CGRectGetMinX(wxButton.imageRect), CGRectGetMaxY(wxButton.imageRect), CGRectGetWidth(wxButton.imageRect), 20);
    wxButton.titleLabel.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:wxButton];
    
    
    //图下文上
    XMButton *qqButton = [XMButton buttonWithType:UIButtonTypeCustom];
    [qqButton setTitle:@"我是企鹅" forState:UIControlStateNormal];
    [qqButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [qqButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
    qqButton.backgroundColor = [UIColor greenColor];
    [qqButton setImage:[UIImage imageNamed:@"qqfenxiang"] forState:UIControlStateNormal];
    qqButton.frame = CGRectMake(20, 200, 80, 80);
    qqButton.titleRect = CGRectMake(10,5, qqButton.bounds.size.width-20, 20);
    qqButton.imageRect = CGRectMake(10, CGRectGetMaxY(qqButton.titleRect), CGRectGetWidth(qqButton.titleRect),CGRectGetHeight(qqButton.frame)-30);
    qqButton.titleLabel.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:qqButton];
    
    //图右文左
    XMButton *wbButton = [XMButton buttonWithType:UIButtonTypeCustom];
    [wbButton setTitle:@"我是微博" forState:UIControlStateNormal];
    [wbButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [wbButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
    wbButton.backgroundColor = [UIColor greenColor];
    [wbButton setImage:[UIImage imageNamed:@"weibofenxiang"] forState:UIControlStateNormal];
    wbButton.frame = CGRectMake(20, 300, 130, 60);
    wbButton.titleRect = CGRectMake(10, wbButton.bounds.size.height/2-20/2, 60, 20);
    wbButton.imageRect = CGRectMake(CGRectGetMaxX(wbButton.titleRect), 5, wbButton.bounds.size.width-wbButton.titleRect.size.width-20, wbButton.bounds.size.height-10);
    wbButton.titleLabel.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:wbButton];
    
    
    //系统默认（图左文右）
    XMButton *pyButton = [XMButton buttonWithType:UIButtonTypeCustom];
    [pyButton setTitle:@"我是朋友圈" forState:UIControlStateNormal];
    [pyButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [pyButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];
    pyButton.backgroundColor = [UIColor greenColor];
    [pyButton setImage:[UIImage imageNamed:@"pengyouquanfenxiang"] forState:UIControlStateNormal];
    pyButton.frame = CGRectMake(20, 400, 130, 60);
    [self.view addSubview:pyButton];

2.另外一种方式:

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, CDMImagePosition) {
    CDMImagePositionLeft = 0,              //图片在左，文字在右，默认
    CDMImagePositionRight = 1,             //图片在右，文字在左
    CDMImagePositionTop = 2,               //图片在上，文字在下
    CDMImagePositionBottom = 3,            //图片在下，文字在上
};

@interface UIButton (CDMImagePosition)

/**
 *  利用UIButton的titleEdgeInsets和imageEdgeInsets来实现文字和图片的自由排列
 *  注意：这个方法需要在设置图片和文字之后才可以调用，且button的大小要大于 图片大小+文字大小+spacing
 *
 *  @param spacing 图片和文字的间隔
 */
- (void)setImagePosition:(CDMImagePosition)postion spacing:(CGFloat)spacing;

@end

#import "UIButton+CDMImagePosition.h"

@implementation UIButton (CDMImagePosition)

- (void)setImagePosition:(CDMImagePosition)postion spacing:(CGFloat)spacing {
    CGFloat imageWith = 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].width;
    CGFloat labelHeight = [self.titleLabel.text sizeWithFont:self.titleLabel.font].height;
#pragma clang diagnostic pop
    
    CGFloat imageOffsetX = (imageWith + labelWidth) / 2 - imageWith / 2;//image中心移动的x距离
    CGFloat imageOffsetY = imageHeight / 2 + spacing / 2;//image中心移动的y距离
    CGFloat labelOffsetX = (imageWith + labelWidth / 2) - (imageWith + labelWidth) / 2;//label中心移动的x距离
    CGFloat labelOffsetY = labelHeight / 2 + spacing / 2;//label中心移动的y距离
    
    switch (postion) {
        case CDMImagePositionLeft:
            self.imageEdgeInsets = UIEdgeInsetsMake(0, -spacing/2, 0, spacing/2);
            self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, -spacing/2);
            break;
            
        case CDMImagePositionRight:
            self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing/2, 0, -(labelWidth + spacing/2));
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageHeight + spacing/2), 0, imageHeight + spacing/2);
            break;
            
        case CDMImagePositionTop:
            self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX, -labelOffsetY, labelOffsetX);
            break;
            
        case CDMImagePositionBottom:
            self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
            self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX, labelOffsetY, labelOffsetX);
            break;
            
        default:
            break;
    }
    
}

还有一种利用分类＋runtime 的形式，留给大家写吧，Demo 就不上了，代码都在上面了.