按钮需要同时设置图片和文案且两者的相对位置不一定，这个需求十分常见，稍有经验的开发者一定会想到自己写个可以自适应各种情况的扩展方法，以前需要用的时候找过一些别人写的，拷贝过来发现并不能适应所有情况，后来自己研究下写了一个，可适配项目中各种使用场景。最近工作比较空一些想把以前积累的一些东西重新回顾总结一下，就先把这个分享出来。
首先要了解UIButton内部是怎么布局的
- UIButton同时设置了image和title的情况下默认布局是图片在左、文字在右，图片和文字之间间距为0，图片和文字整体居中显示
- UIButton提供了imageEdgeInsets、titleEdgeInsets这两个属性，便是用于调整两个控件的相对位置，imageEdgeInsets中的top、left、bottom相对于UIButton，right相对于title的left，同理，titleEdgeInsets中的top、bottom、right相对于UIButton，left相对于image的right，每个方向的赋值：正值代表这个方向的内边距增大，负值代表减小。
- 如果要图片相比原始位置向左偏移5，那么可以设置
self.imageEdgeInsets = UIEdgeInsets.init(top: 0, left: -5, bottom: 0, right: 5)
左右两边都要设置，如果只设置left：-5或者只设置right：5的话，偏移量只有2.5
- 如果想要图片相比原始位置往左偏移5，往下偏移10，则设置
self.imageEdgeInsets = UIEdgeInsets.init(top: 10, left: -5, bottom: -10, right: 5)
根据以上的了解我们可以开始处理以下4种情况：
原始位置，灰色区域是按钮，按钮size=(150,150)，图片size=(50,50)
1. 图片在左，文案在右，间距20
默认即是图片在左，所以只考虑间距就可以了
let spacing = 20
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -spacing/2, bottom: 0, right: spacing/2)
self..titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing/2, bottom: 0, right: -spacing/2)
图片在左，文案在右，间距20
2. 图片在右，文案在左，间距20
这里要考虑到图片和文案本身的宽高
let imageSize = self.imageView?.image?.size ?? .zero
let titleSize = self.titleRect(forContentRect: self.frame).size//系统为titleLabel分配的size
*这里注意下，获取系统为文案提供的size，不一定是文案完全展示所需的size，原因后面会解释；图片和文案水平布局的情况下不需要考虑这个问题，因为实际需求中不会有*
let spacing = 20
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleSize.width + spacing/2, bottom: 0,
right: -(titleSize.width + spacing/2))
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageSize.width + spacing/2), bottom: 0, right: imageSize.width + spacing/2)
3. 图片在上，文案在下，间距spacing
let imageTop = -(titleSize.height/2 + spacing/2)
let titleTop = imageSize.height/2 + spacing/2
self.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: titleSize.width/2, bottom: -imageTop, right: -titleSize.width/2)
self.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width/2, bottom: -titleTop, right: imageSize.width/2)
4. 图片在下，文案在上，间距spacing
let imageTop = titleSize.height/2 + spacing/2
let titleTop = -(imageSize.height/2 + spacing/2)
self.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: titleSize.width/2, bottom: -imageTop, right: -titleSize.width/2)
self.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width/2, bottom: -titleTop, right: imageSize.width/2)
特殊情况
还记得我开头说的之前拷贝过别人写的不能很好地适配各种情况吗？
当图标和文字上下布局但图片和文案所需宽度之和大于button的实际宽度时，默认先保证图片的完整显示同时将文字部分缩小，导致系统给分配的宽度不足以完整显示文字，这个时候上面的布局方法就不能完美自适应了可能会出现水平方向上位置异常的现象，这种情况需要特殊处理一下，还记得前面说的注意点吗，为什么获取系统分配的size，主要是用在这里判断文案size是否被系统挤压了
var titleNeedSize: CGSize = .zero//展示文字实际所需的size
if let font = self.titleLabel?.font {
titleNeedSize = title.size(withAttributes: [NSAttributedString.Key.font: font])
}
var isTitleCompress = false//文字是否被系统压缩
if isSureTitleCompress {
isTitleCompress = true
} else if titleNeedSize.width > titleSize.width {
isTitleCompress = true
}
isSureTitleCompress这个变量是该设置方法的一个参数，setImage(image anImage: UIImage?, title: String, imagePosition: ImagePosition, additionalSpacing: CGFloat, isSureTitleCompress: Bool = false)因为逻辑中是通过获取系统分配文案size和实际所需size比较，决定走哪个分支逻辑的，如果明确知道button设置的尺寸会导致文案被挤压且可能在button的生命周期多次调用这个方法的话需要把这个参数置为true，否则会有问题；试想一下，如果没有设置为true，第一次调用这个方法时逻辑没问题，第二次再调用时获取的titleSize已经满足了实际展示的需求，就会走到文案没被挤压的逻辑分支中
图片在上，文案在下的情况最终处理应该是这样
let imageTop = -(titleSize.height/2 + spacing/2)
let titleTop = imageSize.height/2 + spacing/2
if isTitleCompress {
let imageLeft = (self.bounds.size.width - imageSize.width) / 2
self.imageEdgeInsets = UIEdgeInsets.init(top: imageTop, left: imageLeft, bottom: -imageTop, right: 0)
self.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width, bottom: -titleTop, right: 0)
} else {
self.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: titleSize.width/2, bottom: -imageTop, right: -titleSize.width/2)
self.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width/2, bottom: -titleTop, right: imageSize.width/2)
}
完整代码
最终设置方法的完整代码如下，不用命名空间直接写在扩展中的朋友把代码中的base换成self就可以了
extension YXKit where Base: UIButton {
/*
UIButton默认布局是图片在左、文字在右，图片和文字之间边距为0，图片和文字整体居中显示
当同时存在image和title时，imageEdgeInsets中的top、left、bottom相对于UIButton，right相对于title，同理，titleEdgeInsets中的top、bottom、rright相对于UIButton，left相对于title
imageEdgeInsets = UIEdgeInsets.init(top: 5, left: 0, bottom: -5, right: 0) 表示图片整体向下移动5
imageEdgeInsets = UIEdgeInsets.init(top: -5, left: 4, bottom: 5, right: -4) 表示图片整体向上移动5，向右移动4
默认的情况下当按钮比较小时会自动保留图片的尺寸和将文字部分缩小，一般出现在图标和文字上下布局，button的整体较小时,因为按钮总体宽度比较小，导致系统给分配的宽度不足以完整显示文字
*/
enum ImagePosition: Int {
case top = 1
case left = 2
case bottom = 3
case right = 4
}
/// 设置label相对于图片的位置
/// - Parameters:
/// - anImage: 按钮图片
/// - title: 标题
/// - imagePosition: label相对于图片的位置（上下左右）
/// - additionalSpacing: 文字和图片的间隔
/// - state: UIControl.State
/// - isSureTitleCompress: 是否明确文字被系统挤压，true：使用文字被压缩的调整模式，false：根据系统为文字分配的size自动适配（主要是了为了应对有些文字挤压的按钮被重复设置的情况）
func setImage(image anImage: UIImage?, title: String, imagePosition: ImagePosition, additionalSpacing: CGFloat, state: UIControl.State = .normal, isSureTitleCompress: Bool = false){
base.setImage(anImage, for: state)
base.setTitle(title, for: state)
positionLabelRespectToImage(title: title, position: imagePosition, spacing: additionalSpacing, isSureTitleCompress: isSureTitleCompress)
}
private func positionLabelRespectToImage(title: String, position: ImagePosition,spacing: CGFloat, isSureTitleCompress: Bool = false) {
base.layoutIfNeeded()//这一步很重要，否则如果UIButton通过约束会导致titleRect获取的rect不准
let imageSize = base.imageView?.image?.size ?? .zero
let titleSize = base.titleRect(forContentRect: base.frame).size//系统为titleLabel分配的size
var titleNeedSize: CGSize = .zero//展示文字实际所需的size
if let font = base.titleLabel?.font {
titleNeedSize = title.size(withAttributes: [NSAttributedString.Key.font: font])
}
var isTitleCompress = false//文字是否被系统压缩
if isSureTitleCompress {
isTitleCompress = true
} else if titleNeedSize.width > titleSize.width {
isTitleCompress = true
}
switch (position){
case .top:
let imageTop = -(titleSize.height/2 + spacing/2)
let titleTop = imageSize.height/2 + spacing/2
if isTitleCompress {
let imageLeft = (base.bounds.size.width - imageSize.width) / 2
base.imageEdgeInsets = UIEdgeInsets.init(top: imageTop, left: imageLeft, bottom: -imageTop, right: 0)
base.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width, bottom: -titleTop, right: 0)
} else {
base.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: titleSize.width/2, bottom: -imageTop, right: -titleSize.width/2)
base.titleEdgeInsets = UIEdgeInsets(top: titleTop, left: -imageSize.width/2, bottom: -titleTop, right: imageSize.width/2)
}
case .left:
base.imageEdgeInsets = UIEdgeInsets(top: 0, left: -spacing/2, bottom: 0, right: spacing/2)
base.titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing/2, bottom: 0, right: -spacing/2)
case .bottom:
let imageTop = titleSize.height/2 + spacing/2
let titleTop = -(imageSize.height/2 + spacing/2)
if isTitleCompress {
let imageLeft = (base.bounds.size.width - imageSize.width) / 2
base.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: imageLeft, bottom: -imageTop, right: 0)
base.titleEdgeInsets = UIEdgeInsets(top: titleTop,
left: -imageSize.width, bottom: -titleTop, right: 0)
} else {
base.imageEdgeInsets = UIEdgeInsets(top: imageTop, left: titleSize.width/2, bottom: -imageTop, right: -titleSize.width/2)
base.titleEdgeInsets = UIEdgeInsets(top: titleTop,
left: -imageSize.width/2, bottom: -titleTop, right: imageSize.width/2)
}
case .right:
base.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleSize.width + spacing/2, bottom: 0,
right: -(titleSize.width + spacing/2))
base.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageSize.width + spacing/2), bottom: 0, right: imageSize.width + spacing/2)
}
}
}
为什么不考虑button的尺寸小到连图片都不能完整显示的情况，为什么不考虑高度不够的情况？因为实际需求中不存在
网友评论