如何理解UIButton的imageEdgeInsets和tit

理论

var imageEdgeInsets: UIEdgeInsets { get set }

Use this property to resize and reposition the effective drawing rectangle for the button image. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. Use the UIEdgeInsetsMake(::::) function to construct a value for this property. The default value is UIEdgeInsetsZero.

var titleEdgeInsets: UIEdgeInsets { get set }

Use this property to resize and reposition the effective drawing rectangle for the button title. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. Use the UIEdgeInsetsMake(::::) function to construct a value for this property. The default value is UIEdgeInsetsZero.

官方文档对于这个两个属性的解释如上，老实说，非常不直观，看完依然不懂。要理解titleEdgeInsets，可以从以下几方面考虑（imageEdgeInsets的理解与titleEdgeInsets完全一致）：

• 首先，最重要的是将它理解为title的新位置与title旧位置之间的相对关系！而不是title与button中心的相对关系。

• 其次，要理解正值和负值对position的影响，可以参考CSS的padding。在CSS中，padding为正时，意味着view向内收缩，padding为负，意味着view向外扩张。

  
  

  实现titleLabel在左，imageView在右

  首先不考虑两者之间的spacing，答案就是

  button.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleLabel.width, bottom: 0, right: -titleLabel.width)
  button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageView.width, bottom: 0, right: imageView.width)
  

  imageView右移，相当于它的左侧向内收缩了titleLabel.width（正值），它的右侧向外扩张了titleLabel.width（负值）。

  titleLabel左移，相当于它的左侧向外扩张了imageView.width（负值）它的右侧向内收缩了imageView.width（正值）。

  实际使用时，我们可以编写一个UIButton的extension，方便使用。实现时需要考虑title和image之间的spacing，以及增加spacing后若button宽度不够导致的image和title的压缩。下面的代码给出了alignHorizontal()的两种实现，第一个是完全按照我们上面所讲概念编写的，第二个是一种更优雅的写法。

  extension UIButton {
  
      func alignHorizontal2(spacing: CGFloat, imageFirst: Bool) {
          let edgeOffset = spacing / 2
          if imageFirst {
              imageEdgeInsets = UIEdgeInsets(top: 0,
                                             left: -edgeOffset,
                                             bottom: 0,
                                             right: edgeOffset)
              titleEdgeInsets = UIEdgeInsets(top: 0,
                                             left: edgeOffset,
                                             bottom: 0,
                                             right: -edgeOffset)
          } else {
              guard let imageSize = self.imageView?.image?.size,
                  let text = self.titleLabel?.text,
                  let font = self.titleLabel?.font
                  else {
                      return
              }
              let labelString = NSString(string: text)
              let titleSize = labelString.size(attributes: [NSFontAttributeName: font])
              imageEdgeInsets = UIEdgeInsets(top: 0,
                                             left: titleSize.width + edgeOffset,
                                             bottom: 0,
                                             right: -titleSize.width - edgeOffset)
              titleEdgeInsets = UIEdgeInsets(top: 0,
                                             left: -imageSize.width - edgeOffset,
                                             bottom: 0,
                                             right: imageSize.width + edgeOffset)
          }
  
          // increase content width to avoid clipping
          contentEdgeInsets = UIEdgeInsets(top: 0, left: edgeOffset, bottom: 0, right: edgeOffset)
      }
  
      func alignHorizontal(spacing: CGFloat, imageFirst: Bool) {
          let edgeOffset = spacing / 2
          imageEdgeInsets = UIEdgeInsets(top: 0,
                                         left: -edgeOffset,
                                         bottom: 0,
                                         right: edgeOffset)
          titleEdgeInsets = UIEdgeInsets(top: 0,
                                         left: edgeOffset,
                                         bottom: 0,
                                         right: -edgeOffset)
  
          if !imageFirst {
              self.transform = CGAffineTransform(scaleX: -1, y: 1)
              imageView?.transform = CGAffineTransform(scaleX: -1, y: 1)
              titleLabel?.transform = CGAffineTransform(scaleX: -1, y: 1)
          }
  
          // increase content width to avoid clipping
          contentEdgeInsets = UIEdgeInsets(top: 0, left: edgeOffset, bottom: 0, right: edgeOffset)
      }
  
  }
  

  实现titleLabel和imageView垂直居中

  若imageView在上，titleLabel在下，且不考虑两者之间的spacing，答案是

  let imageVerticalOffset = (titleSize.height + spacing)/2
  let titleVerticalOffset = (imageSize.height + spacing)/2
  let imageHorizontalOffset = (titleSize.width)/2
  let titleHorizontalOffset = (imageSize.width)/2
  
  imageEdgeInsets = UIEdgeInsets(top: -imageVerticalOffset,
                                 left: imageHorizontalOffset,
                                 bottom: imageVerticalOffset,
                                 right: -imageHorizontalOffset)
  titleEdgeInsets = UIEdgeInsets(top: titleVerticalOffset,
                                 left: -titleHorizontalOffset,
                                 bottom: -titleVerticalOffset,
                                 right: titleHorizontalOffset)
  

  对于imageView，是右移+上移，以button的中心为原点，原imageView中心坐标是(titleWidth/2, 0)，新imageView中心坐标是(0, titleHeight/2)，因此水平方向的位移是titleWidth/2，垂直方向上的是titleHeight/2。相当于它的左侧向内收缩了titleWidth/2（正值），它的右侧向外扩张了titleWidth/2（负值），上侧向上扩张了titleHeight/2（负值），下侧向内收缩了titleHeight/2（正值）。

  对于titleLabel，是左移+下移，以button的中心为原点，原titleLabel中心坐标是(imageWidth/2, 0)，新titleLabel中心坐标是(0, -imageHeight/2)，，因此水平方向的位移是imageWidth/2，垂直方向上的是imageHeight/2。相当于它的左侧向外扩张了imageWidth/2（负值），它的右侧向内收缩了imageWidth/2（正值），上侧向内收缩了imageHeight/2（正值），下侧向外扩张了imageHeight/2（负值）。

  实际使用使用的代码如下，该代码考虑title和image之间的spacing，以及增加spacing后若button高度不够导致的image和title的压缩。

  extension UIButton {
  
      func alignVertical(spacing: CGFloat, imageTop: Bool) {
          guard let imageSize = self.imageView?.image?.size,
              let text = self.titleLabel?.text,
              let font = self.titleLabel?.font
              else {
                  return
          }
          let labelString = NSString(string: text)
          let titleSize = labelString.size(attributes: [NSFontAttributeName: font])
  
          let imageVerticalOffset = (titleSize.height + spacing)/2
          let titleVerticalOffset = (imageSize.height + spacing)/2
          let imageHorizontalOffset = (titleSize.width)/2
          let titleHorizontalOffset = (imageSize.width)/2
          let sign: CGFloat = imageTop ? 1 : -1
  
          imageEdgeInsets = UIEdgeInsets(top: -imageVerticalOffset * sign,
                                         left: imageHorizontalOffset,
                                         bottom: imageVerticalOffset * sign,
                                         right: -imageHorizontalOffset)
          titleEdgeInsets = UIEdgeInsets(top: titleVerticalOffset * sign,
                                         left: -titleHorizontalOffset,
                                         bottom: -titleVerticalOffset * sign,
                                         right: titleHorizontalOffset)
  
          // increase content height to avoid clipping
          let edgeOffset = (min(imageSize.height, titleSize.height) + spacing)/2
          contentEdgeInsets = UIEdgeInsets(top: edgeOffset, left: 0, bottom: edgeOffset, right: 0)
      }
  
  }
  

  最好“成对”EdgeInsets

  我们上面讲的都是titleEdgeInset的标准用法，即left与right，top与bottom都是成对设置，且它们的值互为相反数。我们最好一直使用这种方式，否则可能导致未知bug。

  若仅设置titleEdgeInsets.left，不设置titleEdgeInsets.right会怎样?

  若仅设置titleEdgeInsets.left = -imageWidth，title会居中，而不是靠左！即相当于titleEdgeInsets.left = -imageWidth/2，titleEdgeInsets.right = -imageWidth/2。

  这样看起来似乎是一种设置edgeInsets的简便写法，即不需要设置4个值，仅需要设置翻倍的2个就好了。但最好不要这样写，因为测试过程中发现，使用这种方式实现alignVertical(spacing: CGFloat, imageTop: Bool) 时，若button的高度正好囊括image和title时，imageTop为true或false时，总会有一种情况下image会被压缩。

  搜了很多文章也没找到titleEdgeInset和imageEdgeInset实现机制，所有人都是在猜它是怎么实现的，因此也无法确定这个bug的原因。

  若设置titleEdgeInsets.left == titleEdgeInsets.right会怎样?

  标准用法中，titleEdgeInsets.left和titleEdgeInsets.right总是互为相反数，因为当title向一个方向移动时，必然是一侧收缩，一侧扩张。那么titleEdgeInsets.left == titleEdgeInsets.right时会怎样呢？测试显示结果不确定。

  当titleEdgeInsets.left == titleEdgeInsets.right == titleWidth/2时，按理说title肯定会被完全折叠，消失，但实际上

  • 若button宽度正好囊括image和title，title才会完全折叠起来。
  • 若button宽度比较大时，title只会部分折叠。

  因为EdgeInset的机制未知，所以也无法猜透它的原因。总之，最好按标准方式操作titleEdgeInset和imageEdgeInset，不然会有很多莫名其妙的问题。

  其他

  • 使用Xib时，imageEdgeInsets和titleEdgeInsets的right都不能设置为负数，经测试，通过代码方式设置负数是有效的，Xib中无法设置应该是Bug。

  参考

  详解UIButton的imageEdgeInsets和titleEdgeInsets属性

  UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列

  UIButton: how to center an image and a text using imageEdgeInsets and titleEdgeInsets?