swift 設(shè)置UIbutton圖片文字位置布局

1.圖片在右文字在左
image.png
 lazy var editBtn: UIButton = {
        var btn = UIButton()
        btn.clipsToBounds = true
        btn.layer.cornerRadius = 12
        btn.backgroundColor = UIColor("#FE4C5A")
        btn.setTitle("編輯資料", for: .normal)
        btn.setTitleColor(.white, for: .normal)
        btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
        btn.setImage(UIImage(named: "me_right_white"), for: .normal)
        //圖片在右
        //self.titleEdgeInsets = UIEdgeInsetsMake(0, -(img_w+spacing), 0, (img_w+spacing))
//        self.imageEdgeInsets = UIEdgeInsetsMake(0, (title_w+spacing), 0, -(title_w+spacing))
        btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(7 + 4), bottom: 0, right: (7 + 4))
        btn.imageEdgeInsets = UIEdgeInsets(top: 0, left: (40 + 4), bottom: 0, right: -(40 + 4))
        return btn
    }()

2.圖片在左文字在右
image.png
  lazy var loveBtn: UIButton = {
        var btn = UIButton()
        btn.clipsToBounds = true
        btn.layer.cornerRadius = 12
        btn.backgroundColor = .white
        btn.setTitle("心動(dòng)", for: .normal)
        btn.setTitleColor(UIColor("#636366"), for: .normal)
        btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
        btn.setImage(UIImage(named: "home_heart_white@2x"), for: .normal)
        btn.setImage(UIImage(named: "home_heart_red@2x"), for: .selected)
//        btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 4/2, bottom: 0, right: -4/2)
//        btn.imageEdgeInsets = UIEdgeInsets(top: 0, left: -4/2, bottom: 0, right: 4/2)
        btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -4)
        btn.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        return btn
    }()

方法二: 加在extension UIbutton里


extension UIButton {
    //MARK: - 按枚舉將 btn 的 image 和 title 之間位置處理
    func setupButtonImageAndTitlePossitionWith(padding: CGFloat, style: ButtonImageAndTitlePossitionStyle){
        let imageRect: CGRect = self.imageView?.frame ?? CGRect.init()
        let titleRect: CGRect = self.titleLabel?.frame ?? CGRect.init()
        let selfWidth: CGFloat = self.frame.size.width
        let selfHeight: CGFloat = self.frame.size.height
        let totalHeight = titleRect.size.height + padding + imageRect.size.height
        switch style {
        case .imageIsLeft:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: padding / 2, bottom: 0, right: -padding / 2)
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -padding / 2, bottom: 0, right: padding / 2)
        case .imageIsRight:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageRect.size.width + padding/2), bottom: 0, right: (imageRect.size.width + padding/2))
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: (titleRect.size.width + padding / 2), bottom: 0, right: -(titleRect.size.width +  padding/2))
        case .imageIsTop :
            self.titleEdgeInsets = UIEdgeInsets(top: ((selfHeight - totalHeight) / 2 + imageRect.size.height + padding - titleRect.origin.y), left: (selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2, bottom: -((selfHeight - totalHeight) / 2 + imageRect.size.height + padding - titleRect.origin.y), right: -(selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2)
            self.imageEdgeInsets = UIEdgeInsets(top: ((selfHeight - totalHeight) / 2 - imageRect.origin.y), left: (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2), bottom: -((selfHeight - totalHeight) / 2 - imageRect.origin.y), right: -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2))
        case .imgageIsBottom:
            self.titleEdgeInsets = UIEdgeInsets(top: ((selfHeight - totalHeight) / 2 - titleRect.origin.y), left: (selfWidth / 2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2, bottom: -((selfHeight - totalHeight) / 2 - titleRect.origin.y), right: -(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2)
            self.imageEdgeInsets = UIEdgeInsets(top: ((selfHeight - totalHeight) / 2 + titleRect.size.height + padding - imageRect.origin.y), left: (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2), bottom: -((selfHeight - totalHeight) / 2 + titleRect.size.height + padding - imageRect.origin.y), right: -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2))
        default:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }
    }
}

調(diào)用:注意如果按鈕是動(dòng)態(tài)寬度的話,要先設(shè)置寬度

editBtn.setTitle(editTitle, for: .normal)
        editBtn.snp.updateConstraints { make in
            make.width.equalTo(editWidth)
        }
        
        editBtn.setupButtonImageAndTitlePossitionWith(padding: 4, style: .imageIsRight)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容