Swift-自定義控件之IndicatorButton(帶動畫的按鈕)

應用場景

登錄或者注冊時，點擊按鈕發(fā)送請求，此時禁用按鈕，并且按鈕上加載菊花，提示用戶需要等待，請求回調(diào)之后隱藏菊花……

實現(xiàn)思路

• 初步嘗試：動畫修改按鈕的title位置不是那么容易（或者說我沒找到合適的方法）
• 最終方案：在按鈕上添加子控件，動畫隱藏或顯示子控件和title

代碼實現(xiàn)

新建類

// 繼承自UIButton
public class IndicatorButton: UIButton {
}

構(gòu)造方法

// MARK: - 構(gòu)造方法
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
}

// 開始轉(zhuǎn)菊花
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()
    }
}

示例調(diào)用

override func viewDidLoad() {
    super.viewDidLoad()
    // 設置圓角半徑
    btnTest.cornerRadius = 3
    // 切換title動畫方式
    btnTest.upToDown = false
    self.btnTest.setTitle("登錄", forState: .Normal)
    self.btnTest.setTitle("登錄中...", forState: .Disabled)
    // FIXME: 注意內(nèi)存泄露?。?！
    btnTest.rac_signalForControlEvents(.TouchUpInside).subscribeNext { [weak self](sender) in
        // 開啟動畫，轉(zhuǎn)菊花
        self?.btnTest.enabled = false
        // 5秒后結(jié)束動畫，隱藏菊花
        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("登錄成功，頁面該跳轉(zhuǎn)了", forState: .Normal)
        }
    }
}

效果圖

IndicatorButton演示.gif