How to Make an UIButton Shrink Into an UIActivityIndicator When Pressed? - ios

Question

I'm trying to create an UIButton that will shrink down to an Activity Indicator when tapped on. The UIButton I'm referring to is named Request Ride. I have most of the code already set, but for some reason the button won't shrink and the indicator won't show up? I'll attach pictures of the app and my code.
// My app
// My end result I'm needing
// Main Storyboard
// HomeVC
#IBAction func actionBtnWasPressed(_ sender: Any) {
actionBtn.animateButton(shouldLoad: true, withMessage: nil)
}
// RoundedShadowButton
class RoundedShadowButton: UIButton {
// Variables
var originalSize: CGRect?
func setupView() {
originalSize = self.frame
self.layer.cornerRadius = 5.0
self.layer.shadowRadius = 10.0
self.layer.shadowColor = UIColor.darkGray.cgColor
self.layer.shadowOpacity = 0.3
self.layer.shadowOffset = CGSize.zero
}
override func awakeFromNib() {
setupView()
}
func animateButton(shouldLoad: Bool, withMessage message: String?) {
let spinner = UIActivityIndicatorView()
spinner.style = .large
spinner.color = UIColor.darkGray
spinner.alpha = 0.0
spinner.hidesWhenStopped = true
spinner.tag = 21
if shouldLoad {
self.addSubview(spinner)
self.setTitle("", for: .normal)
UIView.animate(withDuration: 0.2, animations: {
self.layer.cornerRadius = self.frame.height / 2
self.frame = CGRect(x: self.frame.midX - (self.frame.height / 2), y: self.frame.origin.y, width: self.frame.height, height: self.frame.height)
}) { (finished) in
if finished == true {
spinner.startAnimating()
spinner.center = CGPoint(x: self.bounds.width / 2 + 1, y: self.bounds.width / 2 + 1)
UIView.animate(withDuration: 0.2) {
spinner.alpha = 1.0
}
}
}
self.isUserInteractionEnabled = false
} else {
self.isUserInteractionEnabled = true
for subview in self.subviews {
if subview.tag == 21 {
subview.removeFromSuperview()
}
}
UIView.animate(withDuration: 0.2) {
self.layer.cornerRadius = 5.0
self.frame = self.originalSize!
self.setTitle(message, for: .normal)
}
}
}
}

Answer 1

One obvious thing is that this line is totally wrong:
spinner.center = CGPoint(x: self.frame.width / 2 + 1, y: self.frame.width / 2 + 1)
You are placing the spinner incorrectly. If the activity view is a subview of the button, then it needs to be centered at the middle of the button’s bounds, not its frame.
I was able to get an effect somewhat like what you are describing:
So this ought to be possible if you get your values right.