[置顶] 用UIButton实现各种图文结合功能
iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作等。我们可以建立只有文字的Button，也可以建立只有图片的Button，具体的需求要看应用设计的具体情况。有时候我们希望应用的界面元素是丰富多彩的，因此可能需要建立一个即有图片也有文字的按钮出来，其实UIButton是支持具有图片和文字功能的按钮的，这个只需要分别调用setTitle:forState和setImage:forSate两个方法就可以实现具有图片和文字功能的按钮。但是系统默认的图文结合的按钮布局是图片在左边而文字在右边，而且整体水平和垂直居中，比如下面这个按钮：
![[置顶] 用UIButton实现各种图文结合功能_第1张图片](http://img.e-com-net.com/image/info5/73c65424f536474c91d92b3ab04570ea.jpg)
但是有的时候我们又希望图片在右边而文字在左边；或者图片在上边而文字在下面；或者图片在按钮的中间而文字在图片的下面等等，但我们又不想放弃使用按钮这个控件，这时候怎么办？ 事件总是能找到解决方法的， 有的人会先建立一个按钮控件铺在下面，而在上面分别覆盖一个UIImageView和UILabel来实现；而有的人则干脆在UIButton上建立一个UIImageView和UILabel两个子视图；而有的人则不会用UIButton来实现图文结合的功能。 前面说的几个方法看起来有效，也确实会解决问题，但缺点是代码量会增加，而且必须同时管理UIButton, UIImageView, UILabel这三个整体，如果哪天产品还希望有一个按钮按下高亮或者按下阴影效果时，估计你就傻眼了。。。
那么我们是否要放弃UIButton呢？答案是否定的，其实UIButton本身是可以支持各种图文结合的，既然UIButton上能同时显示图片和文字，那就可以肯定的说UIButton里面本身一定有一个UIImageView和UILabel子视图。UIButton本身就是一个复合控件，他分别提供了两个属性：
@property(nonatomic,readonly,retain)UILabel *titleLabelNS_AVAILABLE_IOS(3_0);
@property(nonatomic,readonly,retain)UIImageView *imageView NS_AVAILABLE_IOS(3_0);
需要注意的是这两个属性必须要调用完setTitle:forSate和setImage:forSate后才能获取到，否则有可能会返回nil。 其中的 titleLabel是用来保存文字的而imageView是用来保存图片的。那既然UIButton本身就带有一个图片控件和文本控件，那是不是我们只要分别通过调整子控件的frame值就能实现我们想要的图片文字的任何布局呢？ 答案是否定的。实验证明通过设置titleLabel，imageView的frame值根本不会改变按钮里面图片在左而文字在右的格局。 难道我们就要此放弃了吗？其实不用。在UIButton里面还有另外两个属性：
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // default is UIEdgeInsetsZero
@property(nonatomic) UIEdgeInsets imageEdgeInsets; // default is UIEdgeInsetsZero
在调整之前我们先定义几个特定的值：
CGRect titleRect = titleLabel.frame; //文本控件在按钮中的frame值。
CGRect imageRect = imageView.frame; //图片控件在按钮中的frame值。
CGFloat padding; //用于指定文本和图片的间隙值。
CGFloat selfWidth; //按钮控件的宽度
CGFloat selfHeight; //按钮控件的高度
CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.height; //图文上下布局时所占用的总高度，注意这里也算上他们之间的间隙值padding
同时还需要注意的是我们只是调整文本和视图的位置，并不会调整大小，如果我们想往右移动20的话，那么就应该设置left=20, right=-20，而如果我们想往上移动20的话，那么就应该设置top=-20,bottom=20
一、图片在左，文字在右 保持整体居中
![[置顶] 用UIButton实现各种图文结合功能_第2张图片](http://img.e-com-net.com/image/info5/f0b17f0b119b4f3b95ee16a063dfd7a8.jpg)
这种方式是按钮本来的图文布局方式，因为要设置图片和文本的间距，所以只需要文本右移padding/2而图片左移padding/2值就可以了。公式为：
titleEdgeInsets =UIEdgeInsetsMake(0,
padding/2,
0,
-padding/2);
imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
0,
padding/2);
二、图片在右，文字在左 保持整体居中
![[置顶] 用UIButton实现各种图文结合功能_第3张图片](http://img.e-com-net.com/image/info5/de2c4bc2c03f436982ed4891aedc4873.jpg)
这种方式下我们只需要将文字往左偏移图片的宽度并且再往左偏移padding/2就可以了，而图片则只需要往右偏移文本的宽度并再往右偏移padding/2就可以了。公式为：
titleEdgeInsets =UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
0,
(imageRect.size.width + padding/2));
imageEdgeInsets =UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
0,
-(titleRect.size.width+ padding/2));
三、图片在上，文字在下 保持整体居中
![[置顶] 用UIButton实现各种图文结合功能_第4张图片](http://img.e-com-net.com/image/info5/2235757412614dbfa7650bf1ea733091.jpg)
这种方式下当图片和文字要求垂直居中后，新的图片的顶部位置应该等于(selfHeight - totalHeight)/2， 因此垂直需要偏移的值就是新的位置减去原来的位置imageRect.origin.y；而新的图片的水平中心点要等于selfWidth/2，而原来的图片的水平中心点等于imageRect.origin.x + imageRect.size.width/2，两者相减就是水平需要偏移的值。而新的文本的顶部位置应该等于新的图片的顶部位置(selfHeight - totalHeight)/2 + 图片的高度imageRect.size.height + 间隙padding ,因此垂直需要偏移的值就是新的顶部值减去原来的顶部位置titleRect.origin.y; 而新的文本的水平中心点也是selfWidth/2，而原来的文本的水平中心点是titleRect.origin.x + titleRect.size.width/2， 两者相减就是水平需要偏移的值，又因为默认的情况下当按钮比较小时会自动保留图片的尺寸和将文字部分缩小，因为当我们实现文字和图片上下布局时，需要将文字的区域扩展到整个按钮部分，否则将会缩小按钮的文字的宽度，因为按钮的宽度为selfWidth,而文字的默认宽度是titleRect.size.width,所以上面的实现将文本移到中间后还需要分别向两边进行拉伸(selfWith - titleRect.size.width)/2来保证文本填充满所有的按钮区域，在下面的各种样式中凡是文字和图片垂直居中的情况下都要考虑这种情况 公式为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
四、图片在下，文字在上 保持整体居中
![[置顶] 用UIButton实现各种图文结合功能_第5张图片](http://img.e-com-net.com/image/info5/9518312936ab4f53b54cf7d0aa3b9d15.jpg)
这种方式就是方式三文字和图片位置调换，因此公式为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
五、图片保持居中，而文字左右居中，顶部距离按钮顶部
![[置顶] 用UIButton实现各种图文结合功能_第6张图片](http://img.e-com-net.com/image/info5/c644bb459ed7493bb2fba5f3c0da36aa.jpg)
这种方式要求图片在按钮居中，而文字则要求左右居中而垂直方向位置则是距离按钮顶部的间隙值。 上面因为描述了水平居中的调整，因此这里就不介绍了，只介绍垂直方向的调整。 因为要求图片要垂直居中，因此不需要调整垂直偏移。而文本要调整为距离顶部的间隙值，也就是新的文本的顶部值等于padding, 而原来顶部值是titleRect.origin.y，因此只需要偏移titleRect.origin.y - padding就可以了。公式为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y - padding),
-(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
0,
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
六、图片保持居中，而文字水平居中，底部距离按钮底部
![[置顶] 用UIButton实现各种图文结合功能_第7张图片](http://img.e-com-net.com/image/info5/60ec680049234ccd804fc1804dfedd43.jpg)
这种方式要求图片在按钮居中，而文字则要求左右居中而垂直方向的底部位置则是距离按钮底部的间隙值。图片的调整上面有介绍，而文字的水平调整上面也有说到，这里面只说文字的垂直调整。文字新的底部位置等于 selfHeight - padding, 而旧的底部位置是titleRect.size.height + titleRect.origin.y， 因此要偏移的位置就是两者相减的值。具体的公式为：
titleEdgeInsets =UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
0,
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
七、图片保持居中，而文字水平居中，并且在图片的上面
![[置顶] 用UIButton实现各种图文结合功能_第8张图片](http://img.e-com-net.com/image/info5/da782ed8e32a4504909e47090fa1971e.jpg)
这种方式要求图片在按钮居中，而文字则要求左右居中并且在垂直在图片的上面并保留出padding的间隙。 图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的底部位置等于图片的顶部位置 - padding 而文字老的底部位置等于titleRect.size.height + titleRect.origin.y, 因此两者的差值就是文字需要垂直偏移的值。具体的公式为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
0,
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
八、图片保持居中，而文字水平居中，并且在图片的下面
![[置顶] 用UIButton实现各种图文结合功能_第9张图片](http://img.e-com-net.com/image/info5/3d1ea2764d7141c2bbb2fa4a1098521c.jpg)
这种方式要求图片在按钮居中，而文字则要求左右居中并且垂直在图片的下面并保留出padding的间隙。图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的顶部位置等于imageRect.origin.y + imageRect.size.height + padding, 而文字老的顶部位置等于titleRect.origin.y，因此两者的差值就是文字需要垂直偏移的值。具体的公式为：
titleEdgeInsets =UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth /2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
0,
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
好了说了那么多的图文结合样式，我想应该可以满足您的需求了，如果这些图文结合的样式还是无法满足您的需求时则您还是别用UIButton了。
为了方便大家的使用，我把上面的图文结合样式整理成了一个UIButton的分类方法，大家可以直接拷贝使用了，要注意的是设置这个方法之前需要确定按钮的frame是已经被计算出来了：
头文件：
//
// UIButton+ImageTitleStyle.h
//
// Created by 欧阳大哥 on 14-7-13.
//
#import <UIKit/UIKit.h>
/*
针对同时设置了Image和Title的场景时UIButton中的图片和文字的关系
*/
typedef NS_ENUM(NSInteger, ButtonImageTitleStyle ) {
ButtonImageTitleStyleDefault = 0, //图片在左，文字在右，整体居中。
ButtonImageTitleStyleLeft = 0, //图片在左，文字在右，整体居中。
ButtonImageTitleStyleRight = 2, //图片在右，文字在左，整体居中。
ButtonImageTitleStyleTop = 3, //图片在上，文字在下，整体居中。
ButtonImageTitleStyleBottom = 4, //图片在下，文字在上，整体居中。
ButtonImageTitleStyleCenterTop = 5, //图片居中，文字在上距离按钮顶部。
ButtonImageTitleStyleCenterBottom = 6, //图片居中，文字在下距离按钮底部。
ButtonImageTitleStyleCenterUp = 7, //图片居中，文字在图片上面。
ButtonImageTitleStyleCenterDown = 8, //图片居中，文字在图片下面。
};
@interface UIButton (ImageTitleStyle)
/*
调整按钮的文本和image的布局，前提是title和image同时存在才会调整。
padding是调整布局时整个按钮和图文的间隙。
*/
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding;
@end
实现文件：
@implementation UIButton (ImageTitleStyle)
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding
{
if (self.imageView.image != nil && self.titleLabel.text != nil)
{
//先还原
self.titleEdgeInsets = UIEdgeInsetsZero;
self.imageEdgeInsets = UIEdgeInsetsZero;
CGRect imageRect = self.imageView.frame;
CGRect titleRect = self.titleLabel.frame;
CGFloat totalHeight = imageRect.size.height + padding + titleRect.size.height;
CGFloat selfHeight = self.frame.size.height;
CGFloat selfWidth = self.frame.size.width;
switch (style) {
case ButtonImageTitleStyleLeft:
if (padding != 0)
{
self.titleEdgeInsets = UIEdgeInsetsMake(0,
padding/2,
0,
-padding/2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
0,
padding/2);
}
break;
case ButtonImageTitleStyleRight:
{
//图片在右，文字在左
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
0,
(imageRect.size.width + padding/2));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
0,
-(titleRect.size.width+ padding/2));
}
break;
case ButtonImageTitleStyleTop:
{
//图片在上，文字在下
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleBottom:
{
//图片在下，文字在上。
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleCenterTop:
{
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y - padding),
-(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
0,
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleCenterBottom:
{
self.titleEdgeInsets = UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
0,
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleCenterUp:
{
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
0,
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleCenterDown:
{
self.titleEdgeInsets = UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
0,
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
}
break;
case ButtonImageTitleStyleRightLeft:
{
//图片在右，文字在左，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleRect.origin.x - padding),
0,
(titleRect.origin.x - padding));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - imageRect.origin.x - imageRect.size.width),
0,
-(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
}
break;
case ButtonImageTitleStyleLeftRight:
{
//图片在左，文字在右，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - titleRect.origin.x - titleRect.size.width),
0,
-(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.origin.x - padding),
0,
(imageRect.origin.x - padding));
}
break;
case ButtonImageTitleStyleDefault: {
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
}
break;
default:
break;
}
}
}
@end