前言:
每當碰到iOS的UIButton里同時出現(xiàn)文字標題和圖片的時候巷送，總會去重寫一個按鈕，重新布局里面的 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詳解
結語
了結一大心結
