在实际开发中，经常会遇到这几种图文排列情况

笨笨的我，第一次接到UI类似上图下字设计时，毫不犹豫的用了一个UILabel和UIImageView的组合，自己觉得很完美。但是随着这种设计的地方越来越多，就产生了很多重复代码。

继续笨笨的我想到了用个UIView对上面封装一下，三下五除二完工，代码有所减少。

突然有一天，又来了第二种类似左图右字的设计。这是我已经开始警醒了，随后将之前用UIView封装的那个类直接满足了以上四种情况。

又过了不久，产品经理告诉我，把这个位置（类似上图下字的地方）加个可以跳转，因为之前用的UIView所以很自然的想到了添加一个手势。。。

直到有一天，我在仿支付宝首页时，发现他的最顶上那一栏图文是一体的（因为点击图片和文字都有高亮）。然后上网查了查，原来是UIButton实现的。思路，看了这种思路后，默默的回去重构了之前的代码。给UIButton写了个扩展,大概意思就是把imageEdgeInsets、titleEdgeInsets封装到一个方法里,支持上面的四种情况，代码又减少了一点，似乎已经很完美了。

就这样又过了一段时间。UI给了一套大概这样的九宫格设计。

用UICollectionView做布局，缝隙大小不对的同学可以看这里

看了一下，迅速用 UICollectionView做出主体结构，然后每个cell上面放上UIButton，调用封装的那个方法。Run一下。咦，字和图片怎么有的是歪的，歪的，检查代码，没错啊。思考一下，关于坐标的就只有imageEdgeInsets,titleEdgeInsets

最终确定罪魁祸首是imageEdgeInsets,titleEdgeInsets

至于具体原因还不知道，知道的同学告诉我一下。

解决

用NSLayoutConstraint约束图片，文字继续上面思路就好了（直接设置frame肯定是不行的）

extension UIButton {

    func set(_ title: String?, with image: UIImage?, direction: NSLayoutAttribute = .top, interval: CGFloat = 10.0) {
        setTitle(title, for: .normal)
        setImage(image, for: .normal)
        guard let titleSize = titleLabel?.bounds.size, let imageSize = imageView?.bounds.size else {
            return
        }
        let horizontal = (frame.width - titleSize.width - imageSize.width - interval) / 2
         let h = imageSize.height + interval
        let vertical = (frame.height - titleSize.height - h) / 2
        imageView?.translatesAutoresizingMaskIntoConstraints = false
        if let constraints = imageView?.superview?.constraints {
            imageView?.superview?.removeConstraints(constraints)
        }
        switch direction {
        case .left, .right:
            let centerY = NSLayoutConstraint(item: imageView!, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0)

            let isRight = direction == .right
            let constraint = NSLayoutConstraint(item: imageView!, attribute: direction, relatedBy: .equal, toItem: self, attribute: direction, multiplier: 1, constant: horizontal * (isRight ? -1 : 1))
            imageView?.superview?.addConstraints([centerY, constraint])

            let offsetX = isRight ? -(0.5 * interval + imageSize.width) * 2 : interval
            titleEdgeInsets = UIEdgeInsets(top: 0, left: offsetX, bottom: 0, right: 0)
        case .bottom, .top:
            let value: CGFloat = direction == .top ? 1 : -1

            let centerX = NSLayoutConstraint(item: imageView!, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0)

            let constraint = NSLayoutConstraint(item: imageView!, attribute: direction, relatedBy: .equal, toItem: self, attribute: direction, multiplier: 1, constant: vertical * value)
            imageView?.superview?.addConstraints([centerX, constraint])

            titleEdgeInsets = UIEdgeInsets(top: h * value, left: -imageSize.width, bottom: 0, right: 0)
        default:
            fatalError("方向不匹配")
        }
    }
}

上面代码不好理解的应该是

let offsetX = isRight ? -(0.5 * interval + imageSize.width) * 2 : interval

在iPhone 5s上打印UIButton的titleLabel、imageView、frame

假如什么什么也不做，直接设置title、image的效果

结合上面打印的结果很容易得出imageView的x坐标

let imageViewX = (frame.width - imageView.frame.width - titleLabel.frame.width) / 2 = 41.25

因为1px=0.5pt，6p 3px=1pt，因为像素为最小单位，不可再分，所以系统取值41

知道以上公式后很容易得出

图片在左边，与文字间距interval（imageView的位置是NSLayoutConstraint约束定死的）

titleEdgeInsets = UIEdgeInsets(top: 0, left: interval, bottom: 0, right: 0)

图片在右边，与文字间距interval

根据打印结果,应该得出这个等式

let left =  horizontal - titleLabel.frame.minX
titleEdgeInsets = UIEdgeInsets(top: 0, left: left, bottom: 0, right: 0)

效果是这样的

计算结果是肯定没错的，根据我测量实际刚好差一半，具体原因我也不知道

修改后

let left =  horizontal - titleLabel.frame.minX
titleEdgeInsets = UIEdgeInsets(top: 0, left: left * 2, bottom: 0, right: 0)

但是这里还是有个问题，就是UICollectionViewCell复用后，titleLabel的坐标又不对了，根据我打印titleLabel.frame.minX是动态的

那只有想办法得出一个静态的titleLabel.frame.minX

根据以上打印结果，可以推导出

let width =  frame.width - imageView.frame.width - titleLabel.frame.width

titleLabel.frame.minX == width  / 2 + imageView.frame.width // 全是静态的

-0.5 * interval - imageSize.width == width / 2 - interval / 2 - titleLabel.frame.minX


titleEdgeInsets = UIEdgeInsets(top: 0, left: -0.5 * interval - imageSize.width, bottom: 0, right: 0)

以上问题完美解决

Demo