iOS常用到有标题同时有图片的按钮，但是系统控件默认只提供图片在左，标题在右的样式，想要其他的样式就需要自己处理，常用的处理方式有两种。
一种是设置两个UIEdgeInsets属性
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
@property(nonatomic) UIEdgeInsets imageEdgeInsets;
相信用过这两个设置的都知道，按钮用这两个设置很难找准位置。
另外一种是两个接口
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
两个接口可以分别设置图片和标题的位置。效果图
图片在右.png
图片在左.png
图片在上.png
图片在下.png
为了方便使用一般都会封装一个UIButton的子类，写一个结构体作为图片和标题相对位置的设置选择和内部处理判断。
typedef enum {
imageTop = 0, // 图片上 标题下
imageLeft, // 图片左 标题右
imageBottom, // 图片下 标题上
imageRight, // 图片右 标题左
} ImageStyle;
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
if (self.buttonStyle == imageRight) {
return [self imageRectWithImageRightForContentTect:contentRect];
}
else if (self.buttonStyle == imageTop){
return [self imageRectWithImageTopForContentTect:contentRect];
}
else if (self.buttonStyle == imageBottom){
return [self imageRectWithImageBottomForContentTect:contentRect];
}
else {
return [self imageRectWithImageLeftForContentTect:contentRect];
}
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
if (self.buttonStyle == imageRight) {
return [self titleRectWithImageRightForContentTect:contentRect];
}
else if (self.buttonStyle == imageTop){
return [self titleRectWithImageTopForContentTect:contentRect];
}
else if (self.buttonStyle == imageBottom){
return [self titleRectWithImageBottomForContentTect:contentRect];
}
else {
return [self titleRectWithImageLeftForContentTect:contentRect];
}
}
初始化方法中做一些默认设置,设置font是因为在处理方法中用于判断标题的长度或者宽度，按说系统一定有默认值的，但是不设置就是获取不到，所以这里做了默认的设置。
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.titleLabel.font = titleFont;
self.buttonStyle = imageLeft;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
return self;
}
- (instancetype)init{
self = [super init];
if (self) {
self.titleLabel.font = titleFont;
self.buttonStyle = imageLeft;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
return self;
}
常用情况下按钮都不会占满按钮高度或者宽度，而且多为正方形，所以在处理的时候左右布局时给图片的尺寸定位按钮高度的0.6，上下布局时为按钮1/2高度的0.6。具体到有特殊需求的时候都可以调整。贴出图片在右和图片在上的两个处理代码。
#pragma mark imageRight 图片在右 文字在左
- (CGRect)imageRectWithImageRightForContentTect:(CGRect)contentRect{
CGFloat imageWH = CGRectGetHeight(contentRect)*scale;
CGFloat inteval = (CGRectGetHeight(contentRect)-imageWH)/2;
CGFloat titleW = [self widthForTitleString:[self titleForState:UIControlStateNormal] ContentRect:contentRect];
CGFloat titleX = (CGRectGetWidth(contentRect)-titleW-imageWH)/2;
if (titleX < 0) {
titleX = 0;
}
CGRect rect = CGRectMake(titleX+titleW , inteval, imageWH, imageWH);
return rect;
}
- (CGRect)titleRectWithImageRightForContentTect:(CGRect)contentRect{
CGFloat imageWH = CGRectGetHeight(contentRect)*scale;
CGFloat titleW = [self widthForTitleString:[self titleForState:UIControlStateNormal] ContentRect:contentRect];
CGFloat titleX = (CGRectGetWidth(contentRect)-titleW-imageWH)/2;
if (titleX < 0) {
titleX = 0;
}
CGRect rect = CGRectMake(titleX, 0, titleW , CGRectGetHeight(contentRect));
return rect;
}
#pragma mark imageTop 图片在上 文字在下
- (CGRect)imageRectWithImageTopForContentTect:(CGRect)contentRect{
CGFloat imageWH = CGRectGetHeight(contentRect)/2*scale;
CGFloat titleH = [self heightForTitleString:[self titleForState:UIControlStateNormal] ContentRect:contentRect];
CGFloat imageY = (CGRectGetHeight(contentRect)-imageWH-titleH)/2;
CGFloat imageX = (CGRectGetWidth(contentRect) - imageWH)/2;
CGRect rect = CGRectMake(imageX, imageY, imageWH, imageWH);
return rect;
}
- (CGRect)titleRectWithImageTopForContentTect:(CGRect)contentRect{
CGFloat imageWH = CGRectGetHeight(contentRect)/2*scale;
CGFloat titleH = [self heightForTitleString:[self titleForState:UIControlStateNormal] ContentRect:contentRect];
CGFloat titleY = (CGRectGetHeight(contentRect)-imageWH-titleH)/2+imageWH;;
CGRect rect = CGRectMake(0, titleY, CGRectGetWidth(contentRect) , titleH);
return rect;
}
#pragma mark 计算标题内容宽度
- (CGFloat)widthForTitleString:(NSString *)string ContentRect:(CGRect)contentRect{
if (string) {
CGSize constraint = contentRect.size;
NSAttributedString* attributedText = [[NSAttributedString alloc] initWithString:string attributes:@{NSFontAttributeName: self.titleLabel.font}];
CGRect rect = [attributedText boundingRectWithSize:constraint options:NSStringDrawingUsesLineFragmentOrigin context:nil];
CGSize size = rect.size;
CGFloat width = MAX(size.width, 30);
CGFloat imageW = [self imageForState:UIControlStateNormal].size.width;
if (width+imageW > CGRectGetWidth(contentRect)) { // 当标题和图片宽度超过按钮宽度时不能越界
return CGRectGetWidth(contentRect) - imageW;
}
return width+10;
}
else {
return CGRectGetWidth(contentRect)/2;
}
}
#pragma mark 计算标题文字内容的高度
- (CGFloat)heightForTitleString:(NSString *)string ContentRect:(CGRect)contentRect{
if (string) {
CGSize constraint = contentRect.size;
NSAttributedString* attributedText = [[NSAttributedString alloc] initWithString:string attributes:@{NSFontAttributeName: self.titleLabel.font}];
CGRect rect = [attributedText boundingRectWithSize:constraint options:NSStringDrawingUsesLineFragmentOrigin context:nil];
CGSize size = rect.size;
CGFloat height = MAX(size.height, 5);
if (height > CGRectGetHeight(contentRect)/2) { // 当标题高度超过按钮1/2宽度时
return CGRectGetHeight(contentRect)/2 ;
}
return height;
}
else {
return CGRectGetHeight(contentRect)/2;
}
}
如此，初始化的时候只需要设置下按钮样式即可，默认是图片在左。
MCButton *button = [[MCButton alloc] initWithFrame:CGRectMake(50, 50, 100, 50)];
button.buttonStyle = imageBottom;
button.titleLabel.font = [UIFont systemFontOfSize:15.0];
[button setTitle:@"测试按钮" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor lightGrayColor]];
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"点评_icon_评论"] forState:UIControlStateNormal];
[self.view addSubview:button];
demo地址 GitHub给个Star噢!
喜欢就点个赞呗!
欢迎大家提出更好的改进意见和建议，一起进步！
网友评论