前言:
每当碰到iOS的UIButton里同时出现文字标题和图片的时候，总会去重写一个按钮，重新布局里面的 titlelabel imageview layout。这次终于知道怎么通过EdgeInsets去调整了，而不必去重写。
效果图：
效果图.png
代码地址：
代码地址：https://github.com/gityuency/ObjectiveCTools
示例代码类名 【ButtonTitleImageInsetViewController】
才知道，UIButton 里 titleLabel 的约束，左边是相对于imageView的右边，其他相对于父视图；同样，imageView的右边约束相对于titleLabel的左边，其余相对于父视图。
在调整EdgeInsets的时候，先按照左右调整，然后再去调整上下。原理请看文章下方的链接。
上代码！
import UIKit
class ButtonTitleImageInsetViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
demo_1()
demo_2()
demo_3()
demo_4()
demo_5()
demo_6()
demo_7()
}
func demo_1() {
let string = "文字在左,图片在右,中间间距"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textWidth = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil).width
let image = UIImage(named: "ff_IconShowAlbum")
let imageWidth = image?.size.width ?? 0
let p10: CGFloat = 10
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(textWidth * 2) - p10)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageWidth * 2) - p10, bottom: 0, right: 0)
view.addSubview(button)
button.backgroundColor = .yellow
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(150)
make.width.equalTo(textWidth + imageWidth + p10)
}
}
func demo_2() {
let string = "文字在左,图片在右,中间间距,按钮宽度稍大"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textWidth = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil).width
let image = UIImage(named: "ff_IconShowAlbum")
let imageWidth = image?.size.width ?? 0
let p10: CGFloat = 10
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(textWidth * 2) - p10)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageWidth * 2) - p10, bottom: 0, right: 0)
view.addSubview(button)
button.backgroundColor = .yellow
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(200)
make.width.equalTo(textWidth + imageWidth + p10 + 200)
}
}
func demo_3() {
let string = "文字在左,图片在右,紧凑"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textWidth = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil).width
let image = UIImage(named: "ff_IconShowAlbum")
let imageWidth = image?.size.width ?? 0
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageWidth * 2), bottom: 0, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(textWidth * 2))
view.addSubview(button)
button.backgroundColor = .orange
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(250)
// 无需指定宽度
}
}
func demo_4() {
let string = "文字在左,图片在右,按钮宽度稍大"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textWidth = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil).width
let image = UIImage(named: "ff_IconShowAlbum")
let imageWidth = image?.size.width ?? 0
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -(textWidth * 2))
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageWidth * 2), bottom: 0, right: 0)
view.addSubview(button)
button.backgroundColor = .orange
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(300)
make.width.equalTo(333)
}
}
func demo_5() {
let string = "图片在上,文字在下,中间间距,四周紧凑"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textSize = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
let image = UIImage(named: "ff_IconShowAlbum")
let imageSize = image?.size ?? CGSizeZero
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
let p10: CGFloat = 10
button.titleEdgeInsets = UIEdgeInsets(top: imageSize.height + p10, left: -imageSize.width, bottom: 0, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: textSize.height + p10, right: -textSize.width)
view.addSubview(button)
button.backgroundColor = .cyan
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(350)
make.height.equalTo(textSize.height + imageSize.height + p10) //高度只可能比这个高, 否则样式出问题
let maxWidth = textSize.width > imageSize.width ? textSize.width : imageSize.width
make.width.equalTo(maxWidth) //将文字或者图片的最大宽度作为按钮的宽度,这样按钮就能紧凑包裹内容, 也可以不指定宽度,按钮的宽度默认就是 (图片+文字)
}
}
func demo_6() {
let string = "图片在下,文字在上,中间间距"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let textSize = string.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
let image = UIImage(named: "ff_IconShowAlbum")
let imageSize = image?.size ?? CGSizeZero
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
let p10: CGFloat = 10
button.titleEdgeInsets = UIEdgeInsets(top: -imageSize.height - p10, left: -imageSize.width, bottom: 0, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: -textSize.height - p10, right: -textSize.width)
view.addSubview(button)
button.backgroundColor = .cyan
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(450)
make.height.equalTo(textSize.height + imageSize.height + p10) //高度只可能比这个高, 否则样式出问题
//可以不指定宽度
}
}
func demo_7() {
let string = "原始样式"
let font = UIFont.systemFont(ofSize: 16, weight: .medium)
let image = UIImage(named: "ff_IconShowAlbum")
let button = UIButton()
button.titleLabel?.font = font
button.setTitle(string, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.setImage(image, for: .normal)
view.addSubview(button)
button.backgroundColor = .green
button.snp.remakeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalToSuperview().offset(600)
}
}
}
感谢这位iOS玩家的指教：
iOS UIButton之UIEdgeInsets详解
结语
了结一大心结
网友评论