实用技巧：自定义UIButton中image和title布局

在开发中我们经常会用到一个图片加文字的控件，我们首先想到的用UIButton，但是在UIButton中文字和图片的布局默认是图片在右文字在左边(见下图)，而我们往往需要的并不是这样的布局，所以大部分时候会自定义满足我们需求的控件，或者继承UIButton，在layoutSubviews重新布局titleLabel和imageView。但是对于这简单控件自定义控件显得大材小用。而UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。

默认样式

• 图片在右，文字在左
  !注：titleEdgeInsets和imageEdgeInsets是相对于原始位置的，所以默认为UIEdgeInsetsZero

// 相比较原来的位置，文字相对左边的距离减少了图片的宽度，右边距离增加了图片的的宽度
   btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.frame.size.width, 0, btn.imageView.frame.size.width);
// 相比较原来的位置，图片距离左边的距离增加了文字的宽度，右边距离减少了文字的宽度
   btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.frame.size.width, 0, -btn.titleLabel.frame.size.width);

字左图右

问题：但是，如果你交换上面两行代码的位置，你会发现运行结果是这样的

交换代码后的结果

这是因为，ios8之后titleLabel的size默认为CGSizeZero,如果先设置titleEdgeInsets,titleLabel的size会被系统计算出来，再取就不是CGSizeZero。但如果先设置imageEdgeInsets，取出titleLabel的size为CGSizeZero，就会出现上图中的问题。
解决办法：
1、像上面代码先设置titleEdgeInsets
2、调用titleLabel的intrinsicContentSize，代码如下：

btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width, 0, -btn.titleLabel.intrinsicContentSize.width);

• 文字和图片都居中

    btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width*0.5, 0, -btn.titleLabel.intrinsicContentSize.width*0.5);
    btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.intrinsicContentSize.width*0.5, 0, btn.imageView.intrinsicContentSize.width*0.5);
  // 或者（只设置一边距离，默认会减少一半）
//    btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width, 0, 0);
//    btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.intrinsicContentSize.width, 0, 0);

居中

• 上图片下文字

  btn.imageEdgeInsets = UIEdgeInsetsMake(-btn.titleLabel.intrinsicContentSize.height*0.5, btn.titleLabel.intrinsicContentSize.width*0.5, btn.titleLabel.intrinsicContentSize.height*0.5, -btn.titleLabel.intrinsicContentSize.width*0.5);
  btn.titleEdgeInsets = UIEdgeInsetsMake(btn.imageView.intrinsicContentSize.height*0.5, -btn.imageView.intrinsicContentSize.width*0.5, -btn.imageView.intrinsicContentSize.height*0.5, btn.imageView.intrinsicContentSize.width*0.5);
    //或者（只设置一边距离，默认会减少一半）
//    btn.imageEdgeInsets = UIEdgeInsetsMake(-btn.titleLabel.intrinsicContentSize.height, btn.titleLabel.intrinsicContentSize.width, 0, 0);
//    btn.titleEdgeInsets = UIEdgeInsetsMake(btn.imageView.intrinsicContentSize.height, -btn.imageView.intrinsicContentSize.width, 0, 0);

上图片下文字

• 下图片上文字

btn.imageEdgeInsets = UIEdgeInsetsMake(btn.titleLabel.intrinsicContentSize.height*0.5, btn.titleLabel.intrinsicContentSize.width*0.5, -btn.titleLabel.intrinsicContentSize.height*0.5, -btn.titleLabel.intrinsicContentSize.width*0.5);
    btn.titleEdgeInsets = UIEdgeInsetsMake(-btn.imageView.intrinsicContentSize.height*0.5, -btn.imageView.intrinsicContentSize.width*0.5, btn.imageView.intrinsicContentSize.height*0.5, btn.imageView.intrinsicContentSize.width*0.5);
    //或者(只设置一边距离，默认会减少一半）
    btn.imageEdgeInsets = UIEdgeInsetsMake(btn.titleLabel.intrinsicContentSize.height, btn.titleLabel.intrinsicContentSize.width, 0, 0);
    btn.titleEdgeInsets = UIEdgeInsetsMake(-btn.imageView.intrinsicContentSize.height, -btn.imageView.intrinsicContentSize.width, 0, 0);

下图片上文字

最后，我把这几种类型写成了一个Category，只要简单的调用就可以了。代码在这里。
本文虽然很简单，却是在开发中很实用的技巧。