UIButton按钮的标题和图片排列

实现上述效果的方法有很多种，介绍其中一种附带上完整代码。

原理就是在自定义的按钮中重写- (void)layoutSubviews方法并在该方法内重新设置titleLabel以及imageView的frame，以达到我们想要的效果。

项目中写了两个初始化方法，第一种：

#pragma mark - 图片文字排列类型  图片大小
- (id)initWithFrame:(CGRect)frame arrangementType:(ArrangementType )arrangementType imageSize:(CGSize)size;

只需传入枚举值和图片大小，方便直接使用，能够满足大多数需求。

枚举：

typedef NS_ENUM(NSInteger,ArrangementType) {
    ArrangementTypeTextUp = 100,//上文字下图片
    ArrangementTypeTextDown,//下文字上图片  图片大小
    ArrangementTypeTextLeft,//左文字右图片  图片大小
    ArrangementTypeTextRight,//右文字左图片  图片大小
};

第二种：

#pragma mark - 完全自己设置位置
- (id)initWithFrame:(CGRect)frame titleFrame:(CGRect)titleFrame imageFrame:(CGRect)imageFrame;

需要自己设置titleLabel和imageView的frame的位置和大小。

完整代码 .h:

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger,ArrangementType) {
    ArrangementTypeTextUp = 100,//上文字下图片
    ArrangementTypeTextDown,//下文字上图片  图片大小
    ArrangementTypeTextLeft,//左文字右图片  图片大小
    ArrangementTypeTextRight,//右文字左图片  图片大小
};

@interface DEButton : UIButton

#pragma mark - 图片文字排列类型  图片大小
- (id)initWithFrame:(CGRect)frame arrangementType:(ArrangementType )arrangementType imageSize:(CGSize)size;
#pragma mark - 完全自己设置位置
- (id)initWithFrame:(CGRect)frame titleFrame:(CGRect)titleFrame imageFrame:(CGRect)imageFrame;



@end

DEButton为自定义按钮继承自UIButton。

.m:

#import "DEButton.h"
static CGFloat gap = 5;
@implementation DEButton
{
    CGRect titleRect;
    CGRect imageRect;
}

- (id)initWithFrame:(CGRect)frame arrangementType:(ArrangementType )arrangementType imageSize:(CGSize)size{
    if (self = [super initWithFrame:frame]) {
        CGFloat width = frame.size.width;
        CGFloat height = frame.size.height;
        switch (arrangementType) {
            case ArrangementTypeTextUp:
                imageRect = CGRectMake((width-size.width)/2, height - size.height, size.width, size.height);
                titleRect = CGRectMake(0, 0, width, height - size.height);
                self.titleLabel.textAlignment = NSTextAlignmentCenter;
                break;
            case ArrangementTypeTextDown:
                imageRect = CGRectMake((width-size.width)/2, 0, size.width, size.height);
                titleRect = CGRectMake(0, size.height, width, height - size.height);
                self.titleLabel.textAlignment = NSTextAlignmentCenter;
                break;
            case ArrangementTypeTextLeft:
                imageRect = CGRectMake(width - size.width - gap, (height - size.height)/2, size.width, size.height);
                titleRect = CGRectMake(0, 0, width - size.width - gap, height);
                break;
            case ArrangementTypeTextRight:
                imageRect = CGRectMake(gap, (height - size.height)/2, size.width, size.height);
                titleRect = CGRectMake( size.width + gap, 0, width - size.width - gap, height);
                break;
            default:
                break;
        }
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame titleFrame:(CGRect)titleFrame imageFrame:(CGRect)imageFrame{
    if (self = [super initWithFrame:frame]) {
        titleRect = titleFrame;
        imageRect = imageFrame;
    }
    return self;
}

- (void)layoutSubviews{
    [super layoutSubviews];
    self.titleLabel.frame = titleRect;
    self.imageView.frame = imageRect;
}
@end