iOS UIButton的图片/文字位置自定义

按钮是我们最熟悉不过的控件了，每天都在接触，系统也为我们提供了有限的按钮样式。有些时候我们会有一些特殊的需求，直接创建系统样式的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];

运行以上代码。能看到效果：

图1

从图上可以看到我们给按钮设置了文字和图片之后，图片和文字的现实位置是从左往右依次显示的，而且默认是水平和垂直方向剧中显示的。那么我们操作什么属性 能够更改其设置呢？

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,
    };

UIControlContentHorizontalAlignmentLeft UIControlContentHorizontalAlignmentRight UIControlContentHorizontalAlignmentCenter UIControlContentHorizontalAlignmentFill（发生了重叠，图片会变形） UIControlContentHorizontalAlignmentLeading UIControlContentHorizontalAlignmentTrailing

垂直方向的设置我们可以通过：UIControlContentVerticalAlignment
其可设置类型：

    typedef NS_ENUM(NSInteger, UIControlContentVerticalAlignment) {
        UIControlContentVerticalAlignmentCenter  = 0,
        UIControlContentVerticalAlignmentTop     = 1,
        UIControlContentVerticalAlignmentBottom  = 2,
        UIControlContentVerticalAlignmentFill    = 3,
    };

我们分别进行不同的设置来看一下运行效果：

UIControlContentVerticalAlignmentTop UIControlContentVerticalAlignmentBottom UIControlContentVerticalAlignmentCenter UIControlContentVerticalAlignmentFill（图片会变形）

我们直接通过这两个属性进行设置：

    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)];

实现效果如下：

上文字 下图片

其实大致的思路就是这样，至于我们还有什么更近一步的设置，在此基础上进行调整，例如图片和文字之间的上下间距，图片和文字相对按钮整体的偏移等等。。