美文网首页
iOS - Swift自定义UIButton的图片方向

iOS - Swift自定义UIButton的图片方向

作者: 俺不是大佬儿 | 来源:发表于2022-04-18 18:10 被阅读0次

【Swift】自定义UIButton的图片方向

给UIButton扩展imagePosition方法用于设置图片相对于文字的方向

//
//  UIButton+ImgPositionExt.swift
//  Comic
//
//  Created by LRS on 2022/4/13.
//

import UIKit

    extension UIButton {
    //MARK: 定义button相对label的位置
    enum ButtonImgPosition {
        ///图片在上,文字在下,垂直居中对齐
        case top
        ///图片在下,文字在上,垂直居中对齐
        case bottom
        ///图片在左,文字在右,水平居中对齐
        case left
        ///图片在右,文字在左,水平居中对齐
        case right
    }
    
    /// - imagePosition 设置Button图片的位置
    /// - Parameters:
    ///  - style: 图片位置
    ///  - spacing: 按钮图片与文字之间的间隔
    func imagePosition(style:ButtonImgPosition,spacing:CGFloat){
        self.layoutIfNeeded()
        
        self.imageView?.contentMode = .scaleAspectFit
        self.imageView?.sizeToFit()
        //得到button的imageView和titleLabel的宽高
        let imgvWidth = self.imageView?.frame.size.width
        let imgvHeight = self.imageView?.frame.size.height
        
        var labelWidth:CGFloat! = 0.0
        var labelHeight:CGFloat! = 0.0
    
        self.titleLabel?.sizeToFit()
        labelWidth = self.titleLabel?.intrinsicContentSize.width
        labelHeight = self.titleLabel?.intrinsicContentSize.height
        //labelWidth = self.titleLabel?.size.width
        //labelHeight = self.titleLabel?.size.height
        
        if (style == .right || style == .left) {
            if labelWidth > (self.width - spacing - imgvWidth!) {
                labelWidth = (self.width - spacing - imgvWidth!)
                self.titleLabel!.width = labelWidth
            }
        }else if (style == .top || style == .bottom){
            if labelWidth > self.width {
                labelWidth = self.width
                self.titleLabel!.width = labelWidth
            }
        }
        
        
        //初始化imageEdgeInsets和labelEdgeInsets
        var imageEdgeInsets = UIEdgeInsets.zero
        var labelEdgeInsets = UIEdgeInsets.zero
        //根据style和space得到imageEdgeInsets和labelEdgeInsets的值
        switch style {
        case .top:
            //顺序 上 左 下 右
            imageEdgeInsets = UIEdgeInsets(top: -labelHeight-spacing/2.0,
                                           left: 0.0,
                                           bottom: 0.0,
                                           right: -labelWidth)
            
            labelEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: -imgvWidth!,
                                           bottom: -imgvHeight!-spacing/2.0,
                                           right: 0.0)
        case .bottom:
            imageEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: 0.0,
                                           bottom: -labelHeight!-spacing/2.0,
                                           right: -labelWidth)
            
            labelEdgeInsets = UIEdgeInsets(top: -imgvHeight!-spacing/2.0,
                                           left: -imgvWidth!,
                                           bottom: 0.0,
                                           right: 0.0)
        case .left:
            imageEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: -spacing/2.0,
                                           bottom: 0.0,
                                           right: spacing)
            labelEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: spacing/2.0,
                                           bottom: 0.0,
                                           right: -spacing/2)
        case .right:
            
            imageEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: labelWidth+spacing/2,
                                           bottom: 0.0,
                                           right: -labelWidth-spacing/2)
            labelEdgeInsets = UIEdgeInsets(top: 0.0,
                                           left: -imgvWidth!-spacing/2,
                                           bottom: 0.0,
                                           right: imgvWidth!+spacing/2)
            
        }
        self.titleEdgeInsets = labelEdgeInsets
        self.imageEdgeInsets = imageEdgeInsets
    }
}

用法

    //MARK: 定义button相对label的位置
    enum ButtonImgPosition {
        ///图片在上,文字在下,垂直居中对齐
        case top
        ///图片在下,文字在上,垂直居中对齐
        case bottom
        ///图片在左,文字在右,水平居中对齐
        case left
        ///图片在右,文字在左,水平居中对齐
        case right
    }

说明:设置完button的size之后调用有效

       let btn = UIButton(type: .custom).then { btn in
            btn.frame = CGRect(x: 50.0, y: 100.0, width: 80.0, height: 80.0)
            btn.backgroundColor = .red
            //设置完button的size之后调用有效
            btn.imagePosition(style: .bottom, spacing: 5.0)
            btn.setImage(UIImage.imgColor(.green, CGSize(width: 40, height: 40)), for: .normal)
            btn.setTitle("你好", for: .normal)
        }
        view.addSubview(btn)
      
        btn.layoutIfNeeded()
        btn.imagePosition(style: .bottom, spacing: 5.0)

效果

UIButton-图片在文字下方

\color{gray}{欢迎大佬儿来指正纠错,共同学习😏!!}

相关文章

网友评论

      本文标题:iOS - Swift自定义UIButton的图片方向

      本文链接:https://www.haomeiwen.com/subject/vvgdertx.html