UIButton中有title和image的属性,只有其一的时候,默认都是居中排版。若两者都有,默认的排版则是image在左,title在右的。我们可以修改image和title的edgeInsets的值来达到改变排版的目的。
下面是创建一个UIButton的category,用来简单的engeInsets修改及定制image和title的间距
typedef NS_ENUM(NSUInteger, ZLButtonEdgeInsetStyle) {
ZLButtonEdgeInsetStyleTop, //imageView在上,titleLabel在下
ZLButtonEdgeInsetStyleLeft, //imageView在左,titleLabel在右 (UIButton的默认排版)
ZLButtonEdgeInsetStyleBottom, //imageView在下,titleLabel在上
ZLButtonEdgeInsetStyleRight //imageView在右,titleLabel在左
};
/*
* @param style:根据枚举设置ImageView和titleLabel的样式
* @param space:ImageView和titleLabel的间距
*/
- (void)layoutWithEdgeInsetStyle:(ZLButtonEdgeInsetStyle)style spaceBetweenImageAndTitle:(CGFloat)space {
/**
* UIButton中的titleEdgeInsets是title相对于其上左下右的inset,跟tableView的contentInset是类似的。
* 若只有title或只有image时,那它上下左右都是相对于button的。
* 如果同时有image和label,UIButton默认的排版是image在左,title在右的,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。
*/
//1.获取imageView和titleLabel的宽高
CGFloat imageViewWidth = self.imageView.frame.size.width;
CGFloat imageViewHeight = self.imageView.frame.size.height;
CGFloat titleLabelWidth = 0.f;
CGFloat titleLabelHeight = 0.f;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// 由于iOS8中titleLabel的size为0,用下面的这种设置
titleLabelWidth = self.titleLabel.intrinsicContentSize.width;
titleLabelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
titleLabelWidth = self.titleLabel.frame.size.width;
titleLabelHeight = self.titleLabel.frame.size.height;
}
//2.声明全局的imageView、titleLabel的EdgeInsets
UIEdgeInsets imageViewEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets titleLabelEdgeInsets = UIEdgeInsetsZero;
//3.根据style设置EdgeInsets
switch (style) {
case ZLButtonEdgeInsetStyleTop:
{
imageViewEdgeInsets = UIEdgeInsetsMake(- titleLabelHeight - space/2.f, 0.f, 0.f, - titleLabelWidth);
titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, - imageViewWidth, -imageViewHeight - space/2.f, 0.f);
}
break;
case ZLButtonEdgeInsetStyleLeft:
{
imageViewEdgeInsets = UIEdgeInsetsMake(0.f, - space/2.f, 0.f, space/2.f);
titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, space/2.f, 0.f, - space/2.f);
}
break;
case ZLButtonEdgeInsetStyleBottom:
{
imageViewEdgeInsets = UIEdgeInsetsMake(0.f, 0.f, - titleLabelHeight - space/2.f, - titleLabelWidth);
titleLabelEdgeInsets = UIEdgeInsetsMake(- imageViewHeight - space/2.f, - imageViewWidth, 0.f, 0.f);
}
break;
case ZLButtonEdgeInsetStyleRight:
{
imageViewEdgeInsets = UIEdgeInsetsMake(0.f, titleLabelWidth + space/2.f, 0.f, - titleLabelWidth - space/2.f);
titleLabelEdgeInsets = UIEdgeInsetsMake(0.f, - imageViewWidth - space/2.f, 0.f, imageViewWidth + space/2.f);
}
break;
default:
break;
}
//4.赋值
self.imageEdgeInsets = imageViewEdgeInsets;
self.titleEdgeInsets = titleLabelEdgeInsets;
}
调用及效果
[self.buttonTop layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleTop spaceBetweenImageAndTitle:5.f];
[self.buttonLeft layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleLeft spaceBetweenImageAndTitle:10.f];
[self.buttonBottom layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleBottom spaceBetweenImageAndTitle:15.f];
[self.buttonRight layoutWithEdgeInsetStyle:ZLButtonEdgeInsetStyleRight spaceBetweenImageAndTitle:20.f];