经常性的需要写一个可以点击事件的视图，视图包含文字和图片。最为灵活的做法是使用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)
}
