布局UIButton的Image和title

经常性的需要写一个可以点击事件的视图，视图包含文字和图片。最为灵活的做法是使用UIView上面addsubview一个UIimageView和UILabel，但是平时我们不需要太大的灵活性，并且这样做显得比较low，且要单独写一个自定义的视图类，侵入性强。
所以我想通过Externtion的方式扩展UIButton来做，这样既可以利用UIButton的事件处理，又不具有侵入性，同时使用方便。

1，首先定义图片的位置类型：我们使用枚举来定义

enum ImageAlignment: NSInteger {
    case left
    case top
    case bottom
    case right
}

2, 扩展UIButton的属性，因为externtion中不能有存储属性，所以只能申明计算属性, 使用运行时进行关联值访问。于是就按照oc中关联值的写法来写externtion
以下是错误的写法，当从中取imageAlignment值的时候为空，调试返现set设置值的时候报错

private var m_imageAliment = "m_imageAliment"
private var m_spaceBetweenTitleAndImage = "m_spaceBetweenTitleAndImage"

 private var imageAlignment: ImageAlignment {
        set {
            objc_setAssociatedObject(self, m_imageAliment, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_COPY)
        }
        get {
            if let rs = objc_getAssociatedObject(self, m_imageAliment) as?  ImageAlignment{
                return rs
            }
            return .left
        }
    }
    
    private var spaceBetweenTitleAndImage: CGFloat {
        set {
            objc_setAssociatedObject(self, m_spaceBetweenTitleAndImage, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_ASSIGN)
        }
        
        get {
            if let rs = objc_getAssociatedObject(self, m_spaceBetweenTitleAndImage) as? CGFloat {
                return rs
            }
            return 0.0
        }
    }

以上写法错误的，无法获取imageAlignment的值，但是spaceBetweenTitleAndImage取值是没有问题的，一时难住了。
接着进入文档查看objc_setAssociatedObject 发现key参数接收的类型是UnsafeRawPointer的，所以有了以下的修改，同时为了避免全局变量泛滥，所以将key的申明放入了externtion中，代码如下

 
   struct RuntimeKey {
        static let imageAlimentKey = UnsafeRawPointer.init(bitPattern: "imageAlimentKey".hashValue)
        static let spaceKey = UnsafeRawPointer.init(bitPattern: "spaceKey".hashValue)
    }
   
    
    
    private var imageAlignment: ImageAlignment {
        set {
            objc_setAssociatedObject(self, RuntimeKey.imageAlimentKey!, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_COPY)
        }
        
        get {
            if let rs = objc_getAssociatedObject(self, RuntimeKey.imageAlimentKey!) as?  ImageAlignment{
                return rs
            }
            return .left
        }
    }
    
    private var spaceBetweenTitleAndImage: CGFloat {
        set {
            objc_setAssociatedObject(self, RuntimeKey.spaceKey!, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_ASSIGN)
        }
        
        get {
            if let rs = objc_getAssociatedObject(self, RuntimeKey.spaceKey!) as? CGFloat {
                return rs
            }
            
            return 0.0
        }
    }

接下来就是编写imageView和label的布局方法


     func layoutImageAndTitle() {
        
        let space: CGFloat = self.spaceBetweenTitleAndImage
        
        let titleW: CGFloat = self.titleLabel?.bounds.width ?? 0
        let titleH: CGFloat = self.titleLabel?.bounds.height ?? 0
        
        let imageW: CGFloat = self.imageView?.bounds.width ?? 0
        let imageH: CGFloat = self.imageView?.bounds.height ?? 0
        
        let btnCenterX: CGFloat = self.bounds.width / 2
        let imageCenterX: CGFloat = btnCenterX - titleW / 2
        let titleCenterX = btnCenterX + imageW / 2
        
        switch self.imageAlignment {
        case .top:
            self.titleEdgeInsets = UIEdgeInsets(top: imageH / 2 + space / 2, left: -(titleCenterX - btnCenterX), bottom: -(imageH/2 + space/2), right: titleCenterX-btnCenterX)
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleH / 2 + space / 2), left: btnCenterX - imageCenterX, bottom: titleH / 2 + space / 2, right: -(btnCenterX - imageCenterX));
        case .left:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: space / 2, bottom: 0,  right: -space / 2);
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -space / 2, bottom: 0, right: space);
        case .bottom:
            self.titleEdgeInsets = UIEdgeInsets(top: -(imageH / 2 + space / 2), left: -(titleCenterX - btnCenterX), bottom: imageH / 2 + space / 2, right: titleCenterX - btnCenterX);
            self.imageEdgeInsets = UIEdgeInsets(top: titleH / 2 + space / 2, left: btnCenterX - imageCenterX,bottom: -(titleH / 2 + space / 2), right: -(btnCenterX - imageCenterX));
        case .right:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageW + space / 2), bottom: 0, right: imageW + space / 2);
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleW + space / 2, bottom: 0, right: -(titleW + space / 2));
        }
    }

由于layoutImageAndTitle是属于对子View布局的，我们可以把他写入layoutSubviews函数, layoutSubViews函数会在以下时机自动调用
①、直接调用setLayoutSubviews。
②、addSubview的时候触发layoutSubviews。
③、当view的frame发生改变的时候触发layoutSubviews。
④、第一次滑动UIScrollView的时候触发layoutSubviews。
⑤、旋转Screen会触发父UIView上的layoutSubviews事件。
⑥、改变一个UIView大小的时候也会触发父UIView上的layoutSubviews事件。

于是重载layoutSubviews
以下写法存在问题：运行后ImageView和UILabel子视图的宽和高为0，所以怀疑super.layoutSubViews没有起作用

    override func layoutSubviews() {
        super.layoutSubviews()
        self. layoutImageAndTitle()
 }

后来查了一下：swift extension 中不能重写已经存在的方法，只可以添加方法

所以于是将 self. layoutImageAndTitle()添加到各个属性的set方法内，运行成功。可是考虑到有的时候我们需要一次设置多个属性(在这里最多2个)，这样写的话每设置一个，就要布局一次，那就太浪费了。于是就改良代码如下, 将2个属性设置为private，同时添加一个元组属性用来设置布局，元祖中2个值均为可选，这样就可以单独设置其中一个属性，而另一个属性值则保留为上次设置的值。

typealias AlignmentSpace = (alignment:ImageAlignment? , space: CGFloat?)

extension UIButton {
    
    var aligmentAndSpace:  AlignmentSpace{
        set {
            if let aligment = newValue.alignment {
                self.imageAlignment = aligment
            }
            if let space  = newValue.space {
                 self.spaceBetweenTitleAndImage = space
            }
            
            self.layoutImageAndTitle()
        }
        
        get {
            return (alignment: self.imageAlignment, space: self.spaceBetweenTitleAndImage)
        }
    }
    
    
    struct RuntimeKey {
        static let imageAlimentKey = UnsafeRawPointer.init(bitPattern: "imageAlimentKey".hashValue)
        static let spaceKey = UnsafeRawPointer.init(bitPattern: "spaceKey".hashValue)
    }
   
    
    
    private var imageAlignment: ImageAlignment {
        set {
            objc_setAssociatedObject(self, RuntimeKey.imageAlimentKey!, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_COPY)
        }
        
        get {
            if let rs = objc_getAssociatedObject(self, RuntimeKey.imageAlimentKey!) as?  ImageAlignment{
                return rs
            }
            return .left
        }
    }
    
    private var spaceBetweenTitleAndImage: CGFloat {
        set {
            objc_setAssociatedObject(self, RuntimeKey.spaceKey!, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_ASSIGN)
        }
        
        get {
            if let rs = objc_getAssociatedObject(self, RuntimeKey.spaceKey!) as? CGFloat {
                return rs
            }
            
            return 0.0
        }
    }
    
     func layoutImageAndTitle() {
        
        let space: CGFloat = self.spaceBetweenTitleAndImage
        
        let titleW: CGFloat = self.titleLabel?.bounds.width ?? 0
        let titleH: CGFloat = self.titleLabel?.bounds.height ?? 0
        
        let imageW: CGFloat = self.imageView?.bounds.width ?? 0
        let imageH: CGFloat = self.imageView?.bounds.height ?? 0
        
        let btnCenterX: CGFloat = self.bounds.width / 2
        let imageCenterX: CGFloat = btnCenterX - titleW / 2
        let titleCenterX = btnCenterX + imageW / 2
        
        switch self.imageAlignment {
        case .top:
            self.titleEdgeInsets = UIEdgeInsets(top: imageH / 2 + space / 2, left: -(titleCenterX - btnCenterX), bottom: -(imageH/2 + space/2), right: titleCenterX-btnCenterX)
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleH / 2 + space / 2), left: btnCenterX - imageCenterX, bottom: titleH / 2 + space / 2, right: -(btnCenterX - imageCenterX));
        case .left:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: space / 2, bottom: 0,  right: -space / 2);
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -space / 2, bottom: 0, right: space);
        case .bottom:
            self.titleEdgeInsets = UIEdgeInsets(top: -(imageH / 2 + space / 2), left: -(titleCenterX - btnCenterX), bottom: imageH / 2 + space / 2, right: titleCenterX - btnCenterX);
            self.imageEdgeInsets = UIEdgeInsets(top: titleH / 2 + space / 2, left: btnCenterX - imageCenterX,bottom: -(titleH / 2 + space / 2), right: -(btnCenterX - imageCenterX));
        case .right:
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(imageW + space / 2), bottom: 0, right: imageW + space / 2);
            self.imageEdgeInsets = UIEdgeInsets(top: 0, left: titleW + space / 2, bottom: 0, right: -(titleW + space / 2));
        }
    }
}

以下是使用方式

let btn = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 200))
        btn.setImage(UIImage.init(named: "abc"), for: .normal)
        btn.setTitle("abcdef", for: .normal)
        btn.backgroundColor = UIColor.red
        self.view.addSubview(btn)
        btn.aligmentAndSpace = (alignment:.top , space: 15)
        btn.center = self.view.center
        
        btn.addTarget(self, action: #selector(click(sender:)), for: .touchUpInside)
  

    @objc func click(sender: UIButton) {
        sender.aligmentAndSpace = (alignment:.bottom , space: 1)
    }

转载于:https://www.jianshu.com/p/1f949f64bc24

布局UIButton的Image和title

猜你喜欢