Swift-自定义控件之InDicatorButton(带动画的按钮)

实现思路

• 初步尝试：动画修改按钮的title位置不是那么容易（或者说我没找到合适的方法）
• 最终方案：在按钮上添加子控件，动画隐藏或显示子控件和title

代码实现

新建类

// 继承自UIButton
public class InDicatorButton: UIButton {
}

构造方法

// MARK: - 构造方法
required public init?(coder decoder: NSCoder) {
    super.init(coder: decoder)
    // 初始化
    setup()
}

init() {
    super.init(frame: CGRectZero)
    // 初始化
    setup()
}

公共属性

// MARK: - 公开属性
/// 标识是否是向下切换title
var upToDown: Bool = false
/// borderColor
var borderColor: UIColor = UIColor.clearColor() {
    didSet {
        layer.borderColor = borderColor.CGColor
    }
}
/// borderWidth
var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
}
/// cornerRadius
var cornerRadius: CGFloat = 0 {
    didSet {
        layer.cornerRadius = cornerRadius
    }
}
public override var enabled: Bool {
    didSet {
        if oldValue != enabled {
            if oldValue {
                // 动画切换title，显示菊花
                lastDisabledtitle = titleForState(.Disabled)
                ib_loadingWithtitle(lastDisabledtitlE)
                settitle("",forState: .Disabled)
            } else {
                // 重置按钮，隐藏菊花
                ib_resetToNormalState()
                settitle(lastDisabledtitle,forState: .Disabled)
            }
        }
    }
}

私有属性

// MARK: - 私有属性
lazy var BACkView = UIView()
lazy var lblmessage = UILabel()
lazy var inDicatorView = UIActivityInDicatorView()
private var lasttitle: String?
private var lastDisabledtitle: String?
private let margin: CGFloat = 8
private var transformY: CGFloat {
    get {
        return self.h * (upToDown ? (-1) : 1)
    }
}

私有方法

// MARK: - 私有方法
// 初始化
private func setup() {
    layer.masksToBounds = true
    // 初始化BACkView及其子视图
    lblmessage.textColor = titleLabel?.textColor
    lblmessage.font = titleLabel?.font
    BACkView.addSubview(lblmessagE)

    inDicatorView.activityInDicatorViewStyle = .White
    inDicatorView.hidesWhenStopped = true
    inDicatorView.sizeToFit()
    BACkView.addSubview(inDicatorView)

    // 要先设置高度  再设置center
    BACkView.h = self.h
    BACkView.center = CGPointMake(self.w * 0.5,self.h * 0.5)
    BACkView.BACkgroundColor = UIColor.clearColor()
    BACkView.alpha = 0

    addSubview(BACkView)

    lasttitle = currenttitle
}

// 开始转菊花
private func ib_loadingWithtitle(title: String?) {
    let color = self.titleColorForState(.Disabled)
    let shadowColor = self.titleShadowColorForState(.Disabled)
    lblmessage.text = title
    lblmessage.textColor = color
    lblmessage.shadowColor = shadowColor
    lblmessage.sizeToFit()
    // 计算lblmessage 和 inDicatorView 的位置
    inDicatorView.centerY = BACkView.centerY
    lblmessage.centerY = inDicatorView.centerY
    lblmessage.left = inDicatorView.right + margin
    BACkView.right = lblmessage.right
    BACkView.w = inDicatorView.w + margin + lblmessage.w
    BACkView.left = (self.w - BACkView.w ) * 0.5

    inDicatorView.startAnimaTing()
    if title == lasttitle {
        // 如果title和旧title相同  不需要显示动画滚动
    } else {
        BACkView.transform=CGAffineTransformMakeTranslation(0,transformY)
    }
    UIView.animateWithDuration(0.5) {
        self.titleLabel!.alpha = 0
        self.BACkView.alpha = 1
        self.BACkView.transform = CGAffineTransformIdentity
    }
}

// 重置按钮
private func ib_resetToNormalState() {
    UIView.animateWithDuration(0.5,animations: {
        self.titleLabel!.alpha = 1
        self.BACkView.alpha = 0
        if self.currenttitle == self.lastDisabledtitle {
            // 如果title和旧title相同  不需要显示动画滚动
        } else {
            self.BACkView.transform = CGAffineTransformMakeTranslation(0,self.transformY)
        }
    }) { (finished) in
        self.BACkView.transform = CGAffineTransformIdentity
        self.inDicatorView.stopAnimaTing()
    }
}

示例调用

override func viewDidLoad() {
    super.viewDidLoad()
    // 设置圆角半径
    btnTest.cornerRadius = 3
    // 切换title动画方式
    btnTest.upToDown = false
    self.btnTest.settitle("登录",forState: .Normal)
    self.btnTest.settitle("登录中...",forState: .Disabled)
    // FIXME: 注意内存泄露！！！
    btnTest.rac_signalForControlEvents(.TouchUpInside).subscribeNext { [weak self](sender) in
        // 开启动画，转菊花
        self?.btnTest.enabled = false
        // 5秒后结束动画，隐藏菊花
        let delayInSeconds = 5.0
        let popTime = dispatch_time(DISPATCH_TIME_Now,Int64(delayInSeconds * Double(NSEC_PER_SEC)))
        dispatch_after(popTime,dispatch_get_main_queue()) {
            // 隐藏菊花
            self?.btnTest.enabled = true
            self?.btnTest.settitle("登录成功，页面该跳转了",forState: .Normal)
        }
    }
}

效果图