UIButton 中图片和文字的排列方式(Swift)

对UIbutton做一个扩展:

enum ButtonEdgeInsetsStyle {
    // 图片相对于label的位置
    case Top
    case Left
    case Right
    case Bottom
}

extension UIButton {
    
    func layoutButton(style: ButtonEdgeInsetsStyle, imageTitleSpace: CGFloat) {
        //得到imageView和titleLabel的宽高
        let imageWidth = self.imageView?.frame.size.width
        let imageHeight = self.imageView?.frame.size.height
        
        var labelWidth: CGFloat! = 0.0
        var labelHeight: CGFloat! = 0.0
        
        labelWidth = self.titleLabel?.intrinsicContentSize.width
        labelHeight = self.titleLabel?.intrinsicContentSize.height
        
        //初始化imageEdgeInsets和labelEdgeInsets
        var imageEdgeInsets = UIEdgeInsets.zero
        var labelEdgeInsets = UIEdgeInsets.zero
        
        //根据style和space得到imageEdgeInsets和labelEdgeInsets的值
        switch style {
        /**
            * titleEdgeInsets是titleLabel相对于其上下左右的inset,跟tableView的contentInset是类似的;
            * 如果只有title,那titleLabel的 上下左右 都是 相对于Button 的;
            * 如果只有image,那imageView的 上下左右 都是 相对于Button 的;
            * 如果同时有image和label,那image的 上下左 是 相对于Button 的,右 是 相对于label 的;
            * label的 上下右 是 相对于Button的, 左 是 相对于label 的。
             */
        case .Top:
            //上 左 下 右
            imageEdgeInsets = UIEdgeInsets(top: -labelHeight-imageTitleSpace/2, left: 0, bottom: 0, right: -labelWidth)
            labelEdgeInsets = UIEdgeInsets(top: 0, left: -imageWidth!, bottom: -imageHeight!-imageTitleSpace/2, right: 0)
            break;
            
        case .Left:
            imageEdgeInsets = UIEdgeInsets(top: 0, left: -imageTitleSpace/2, bottom: 0, right: imageTitleSpace)
            labelEdgeInsets = UIEdgeInsets(top: 0, left: imageTitleSpace/2, bottom: 0, right: -imageTitleSpace/2)
            break;
            
        case .Bottom:
            imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: -labelHeight!-imageTitleSpace/2, right: -labelWidth)
            labelEdgeInsets = UIEdgeInsets(top: -imageHeight!-imageTitleSpace/2, left: -imageWidth!, bottom: 0, right: 0)
            break;
            
        case .Right:
            imageEdgeInsets = UIEdgeInsets(top: 0, left: labelWidth+imageTitleSpace/2, bottom: 0, right: -labelWidth-imageTitleSpace/2)
            labelEdgeInsets = UIEdgeInsets(top: 0, left: -imageWidth!-imageTitleSpace/2, bottom: 0, right: imageWidth!+imageTitleSpace/2)
            break;
        }
        
        self.titleEdgeInsets = labelEdgeInsets
        self.imageEdgeInsets = imageEdgeInsets
        
    }
}

使用方法:

let button = UIButton.init(type: .custom)
        button.setImage(loadImage(name: images[tag]), for: .normal)
        button.setImage(loadImage(name: selectedImages[tag]), for: .selected)
        button.setTitle(titles[tag], for: .normal)
        button.addTarget(self, action: #selector(buttonClick), for: .touchUpInside)
        button.setTitleColor(UIColor.hexColor("#676767"), for: .normal)
        // 这个方法一定要放在设置完图片和文字的后面,否则不起作用
        button.layoutButton(style: .Top, imageTitleSpace: 5)
上一篇:iOS runtime 相关实例


下一篇:UIButton设置UIControlContentHorizontalAlignment调整文字对齐方式