直播系統原始碼,按鈕圖片和文字位置的各種設定

zhibo系統開發發表於2021-12-14

直播系統原始碼,按鈕圖片和文字位置的各種設定實現的相關程式碼

1.在UIButton的擴充套件中新增方法

/*
列舉 設定 圖片的位置
*/
enum ButtonImagePosition : Int  {
    case imageTop = 0
    case imageLeft
    case imageBottom
    case imageRight
}
extension UIButton {
    
    /**
    type :image 的位置
    Space :圖片文字之間的間距
    */
func setImagePosition(type:ButtonImagePosition,Space space:CGFloat)  {
       
        let imageWith :CGFloat = (imageView?.frame.size.width)!;
        let imageHeight :CGFloat = (imageView?.frame.size.height)!;
      
        var labelWidth :CGFloat = 0.0;
        var labelHeight :CGFloat = 0.0;
        labelWidth = CGFloat(titleLabel!.intrinsicContentSize.width);
        labelHeight = CGFloat(titleLabel!.intrinsicContentSize.height);
        var  imageEdgeInsets :UIEdgeInsets = UIEdgeInsets();
        var  labelEdgeInsets :UIEdgeInsets = UIEdgeInsets();
       
        switch type {
        case .imageTop:
            imageEdgeInsets = UIEdgeInsets.init(top: -labelHeight - space/2.0, left: 0, bottom: 0, right:  -labelWidth)
            labelEdgeInsets =  UIEdgeInsets.init(top:0, left: -imageWith, bottom: -imageHeight-space/2.0, right: 0)
            break;
        case .imageLeft:
            imageEdgeInsets = UIEdgeInsets.init(top:0, left:-space/2.0, bottom: 0, right:space/2.0)
            labelEdgeInsets =  UIEdgeInsets.init(top:0, left:space/2.0, bottom: 0, right: -space/2.0)
            break;
        case .imageBottom:
            imageEdgeInsets = UIEdgeInsets.init(top:0, left:0, bottom: -labelHeight-space/2.0, right: -labelWidth)
            labelEdgeInsets =  UIEdgeInsets.init(top:-imageHeight-space/2.0, left:-imageWith, bottom: 0, right: 0)
            break;
        case .imageRight:
            imageEdgeInsets = UIEdgeInsets.init(top:0, left:labelWidth+space/2.0, bottom: 0, right: -labelWidth-space/2.0)
            labelEdgeInsets =  UIEdgeInsets.init(top:0, left:-imageWith-space/2.0, bottom: 0, right:imageWith+space/2.0)
            break;
        }
        self.titleEdgeInsets = labelEdgeInsets
        self.imageEdgeInsets = imageEdgeInsets
    }
  
}

2.使用

    lazy var btn1:UIButton =  {
        let btn = UIButton.init(frame: CGRect.init(x: 50, y: 100, width: 120, height: 40))
        btn.backgroundColor = .gray
        btn.setImage(UIImage.init(named: "test"), for: .normal)
        btn.setTitle("測試標題", for: .normal)
        btn.setImagePosition(type: .imageLeft, Space: 5)
        return btn
    }()
    lazy var btn2:UIButton = {
        let btn = UIButton.init(frame: CGRect.init(x: 50, y: 160, width: 120, height: 40))
        btn.backgroundColor = .gray
        btn.setImage(UIImage.init(named: "test"), for: .normal)
        btn.setTitle("測試標題", for: .normal)
        btn.setImagePosition(type: .imageRight, Space: 5)
        return btn
    }()
    
    lazy var btn3:UIButton = {
        let btn = UIButton.init(frame: CGRect.init(x: 50, y:220, width: 120, height: 80))
        btn.backgroundColor = .gray
        btn.setImage(UIImage.init(named: "test"), for: .normal)
        btn.setTitle("測試標題", for: .normal)
        btn.setImagePosition(type: .imageTop, Space: 10)
        return btn
    }()
    
    lazy var btn4:UIButton = {
        let btn = UIButton.init(frame: CGRect.init(x: 50, y: 320, width: 120, height: 80))
        btn.backgroundColor = .gray
        btn.setImage(UIImage.init(named: "test"), for: .normal)
        btn.setTitle("測試標題", for: .normal)
        btn.setImagePosition(type: .imageBottom, Space: 10)
        return btn
    }()
    
    //執行出來的效果就是上面的截圖
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.addSubview(btn1)
        view.addSubview(btn2)
        view.addSubview(btn3)
        view.addSubview(btn4)
   }

但是,你會發現有兩個警告’titleEdgeInsets’ will be deprecated in iOS 15.0 ‘imageEdgeInsets’ will be deprecated in iOS 15.0,這是蘋果公司在iOS15之後對UIButton做了改動,主要是解決這個圖片位置的調整的問題,開啟api你會發現這個 UIButtonConfiguration

3.附上 UIButtonConfiguration 使用方法

 if #available(iOS 15.0, *) {
            var conf1 = UIButton.Configuration.plain()
            conf1.title = "分享"
            conf1.baseForegroundColor = .black
            conf1.image = UIImage(named: "jk_anniu_shuju_fenxiang_f")
            conf1.imagePlacement = .leading
            conf1.imagePadding = 10
            let bt1 = UIButton.init(configuration: conf1, primaryAction: nil)
 
            
            var conf2 = UIButton.Configuration.bordered()
            conf2.title = "分享"
            conf2.baseForegroundColor = .orange
            conf2.image = UIImage(named: "jk_anniu_shuju_fenxiang_f")
            conf2.imagePlacement = .trailing
            conf2.imagePadding = 40
            let bt2 = UIButton.init(configuration: conf2, primaryAction: nil)
 
            
            var conf3 = UIButton.Configuration.borderedTinted()
            conf3.title = "分享"
            conf3.baseForegroundColor = .red
            conf3.image = UIImage(named: "jk_anniu_shuju_fenxiang_f")
            conf3.imagePlacement = .top
            conf3.imagePadding = 10
            let bt3 = UIButton.init(configuration: conf3, primaryAction: nil)
 
            
            var conf4 = UIButton.Configuration.gray()
            conf4.title = "分享"
            conf4.baseForegroundColor = .brown
            conf4.image = UIImage(named: "jk_anniu_shuju_fenxiang_f")
            conf4.imagePlacement = .bottom
            conf4.imagePadding = 10
            let bt4 = UIButton.init(configuration: conf4, primaryAction: nil)
 
            bt1.frame = CGRect(x: 220, y: 100, width: 100, height: 80)
            bt2.frame = CGRect(x: 220, y: 200, width: 150, height: 80)
            bt3.frame = CGRect(x: 220, y: 300, width: 100, height: 80)
            bt4.frame = CGRect(x: 220, y: 400, width: 100, height: 80)
            
            view.addSubview(bt1)
            view.addSubview(bt2)
            view.addSubview(bt3)
            view.addSubview(bt4)
        }


以上就是直播系統原始碼,按鈕圖片和文字位置的各種設定實現的相關程式碼, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2847689/,如需轉載,請註明出處,否則將追究法律責任。

相關文章