在实际开发中，经常会遇到这几种图文排列情况
笨笨的我，第一次接到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)
以上问题完美解决
