按钮是我们最熟悉不过的控件了，每天都在接触，系统也为我们提供了有限的按钮样式。有些时候我们会有一些特殊的需求，直接创建系统样式的Button并不能满足我们的要求，这个时候就需要自定义按钮了。
首先我们从一个简单的例子说起，先来看看做这些工作会常用的按钮的一些基本属性：
代码创建一个Button控件：
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(40, 100, 200, 70);
// button.center = self.view.center;
[button setImage:[UIImage imageNamed:@"icon1"] forState:UIControlStateNormal];
[button setTitle:@"按钮1" forState:UIControlStateNormal];
button.backgroundColor = [UIColor grayColor];
[self.view addSubview:button];
运行以上代码。能看到效果：
从图上可以看到我们给按钮设置了文字和图片之后，图片和文字的现实位置是从左往右依次显示的，而且默认是水平和垂直方向剧中显示的。那么我们操作什么属性 能够更改其设置呢？
UIControlContentHorizontalAlignment与UIControlContentVerticalAlignment
水平方向的设置我们可以通过：UIControlContentHorizontalAlignment
typedef NS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
UIControlContentHorizontalAlignmentCenter = 0,
UIControlContentHorizontalAlignmentLeft = 1,
UIControlContentHorizontalAlignmentRight = 2,
UIControlContentHorizontalAlignmentFill = 3,
UIControlContentHorizontalAlignmentLeading API_AVAILABLE(ios(11.0), tvos(11.0)) = 4,
UIControlContentHorizontalAlignmentTrailing API_AVAILABLE(ios(11.0), tvos(11.0)) = 5,
};
垂直方向的设置我们可以通过：UIControlContentVerticalAlignment
其可设置类型：
typedef NS_ENUM(NSInteger, UIControlContentVerticalAlignment) {
UIControlContentVerticalAlignmentCenter = 0,
UIControlContentVerticalAlignmentTop = 1,
UIControlContentVerticalAlignmentBottom = 2,
UIControlContentVerticalAlignmentFill = 3,
};
我们分别进行不同的设置来看一下运行效果：
我们直接通过这两个属性进行设置：
if (@available(iOS 11.0, *)) {
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentTrailing;
} else {
// Fallback on earlier versions
}
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
UIEdgeInsets
我们知道 UIEdgeInsets结构体中 包含top, left, bottom, right数值，表示其距离上，左，下，右的边距。所以通过UIEdgeInsets可以对Button或者其图片/标题进行边距对调控。
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
我们知道按钮有以下三个属性：
@property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero. On tvOS 10 or later, default is nonzero except for custom buttons.
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // default is UIEdgeInsetsZero
reverses to shift between engrave and emboss appearance
@property(nonatomic) UIEdgeInsets imageEdgeInsets;
其中：（1）contentEdgeInsets的top、left、bottom、right都是相对于button本身，控制着image和title整体的偏移量；
（2）imageEdgeInsets的top、left、bottom相对于button，right相对于title，控制着image的相对偏移量；
（3）titleEdgeInsets的top、bottom、right相对于button，left相对于image，控制着title的相对偏移量；
在此，做一点点强调：top向下偏移为正 bottom向上偏移为正 right向左偏移为正 left向右偏移为正
我们知道 UIButton上的图片文字布局是默认的左图片右文字，那么出了这种样式之外，其它的一些样式怎么实现呢？
左文字 右图片
以上设置的结果：
在这里我们相当于把文字向左移动可一个图片都宽度，而图片向右移动了文字的宽度。在此我们还可以设置图片和文字之间的间距：
这个时候文字多向左移动了10个点，图片多向右移动了十个点，也就相当于图片和文字之间多出了20个点的距离，其结果如下：
上图片 下文字
我们编写如下代码：
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
[button setTitleEdgeInsets:UIEdgeInsetsMake(button.imageView.frame.size.height ,-button.imageView.frame.size.width, 0.0,0.0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(-button.imageView.frame.size.height, 0.0,0.0, -button.titleLabel.bounds.size.width)];
运行之后 可以看到按钮展示出来之后的效果：
上文字 下图片
示例代码：
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
[button setTitleEdgeInsets:UIEdgeInsetsMake(-button.imageView.frame.size.height ,-button.imageView.frame.size.width, 0.0,0.0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0,-button.imageView.frame.size.height, -button.titleLabel.bounds.size.width)];
实现效果如下：
其实大致的思路就是这样，至于我们还有什么更近一步的设置，在此基础上进行调整，例如图片和文字之间的上下间距，图片和文字相对按钮整体的偏移等等。。
