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)
        }
    }
}

效果图

IndicatorButton演示.gif