Place a UIActivityIndicator inside a UIButton

Question

I know I'm missing something stupid, but anyway, here is my code:

UIActivityIndicatorView indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
indicator.hidesWhenStopped = YES;
indicator.frame = btnLogin.frame;
indicator.center = btnLogin.center;
[self.view addSubview:indicator];
[indicator bringSubviewToFront:indicator];

Here is the end result:

http://img542.imageshack.us/img542/8172/uiactivity.png

Thank you in advance!

Answer 1

I think the concept you are missing is that a view's frame (and its center) are both in relation to its superview. Based on your screenshot I would guess that your textfields and buttons are all in a view that is acting as a container. So your button's frame & center are in relation to that container view and not to the view controller's view as a whole. You assign the same frame & center to the activity indicator, but then you add the indicator as a subview of the main view and not the container view. So you now have two views (the button and the indicator) with the same frame, but that frame is in relation to two different superviews.

The easiest change would just be to add your indicator to the container view you are using. But I would suggest adding the indicator as a subview of the button, then just do a little math to tweak its position.

UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
CGFloat halfButtonHeight = btnLogin.bounds.size.height / 2;
CGFloat buttonWidth = btnLogin.bounds.size.width;
indicator.center = CGPointMake(buttonWidth - halfButtonHeight , halfButtonHeight);
[btnLogin addSubview:indicator];
[indicator startAnimating];

As a side note: Your setting of the center of a view just after the frame of the view is redundant. Also, the last view added as a subview is automatically the front subview.

Answer 2

Based on @Musa almatri answer, I create extension:

extension UIButton {
func loadingIndicator(show show: Bool) {
    let tag = 9876
    if show {
        let indicator = UIActivityIndicatorView()
        let buttonHeight = self.bounds.size.height
        let buttonWidth = self.bounds.size.width
        indicator.center = CGPointMake(buttonWidth/2, buttonHeight/2)
        indicator.tag = tag
        self.addSubview(indicator)
        indicator.startAnimating()
    } else {
        if let indicator = self.viewWithTag(tag) as? UIActivityIndicatorView {
            indicator.stopAnimating()
            indicator.removeFromSuperview()
        }
    }
}}

then you can use it like this:

yourButton.loadingIndicator(show: true) //hide -> show: false

Answer 3

Here is a Swift 3 version, without using tags.

import UIKit

extension UIButton {
    func loadingIndicator(show: Bool) {
        if show {
            let indicator = UIActivityIndicatorView()
            let buttonHeight = self.bounds.size.height
            let buttonWidth = self.bounds.size.width
            indicator.center = CGPoint(x: buttonWidth/2, y: buttonHeight/2)
            self.addSubview(indicator)
            indicator.startAnimating()
        } else {
            for view in self.subviews {
                if let indicator = view as? UIActivityIndicatorView {
                    indicator.stopAnimating()
                    indicator.removeFromSuperview()
                }
            }
        }
    }
}

Answer 4

Little upgrade: (adding button on superview)

extension UIButton {
    func loadingIndicator(_ show: Bool) {
        let indicatorTag = 808404
        if show {
            isEnabled = false
            alpha = 0
            let indicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)
            indicator.center = center
            indicator.tag = indicatorTag
            superview?.addSubview(indicator)
            indicator.startAnimating()
        } else {
            isEnabled = true
            alpha = 1.0
            if let indicator = superview?.viewWithTag(indicatorTag) as? UIActivityIndicatorView {
                indicator.stopAnimating()
                indicator.removeFromSuperview()
            }
        }
    }
}

Answer 5

Swift Solution:

var indicator = UIActivityIndicatorView()
var halfButtonHeight = SOME_BUTTON.bounds.size.height / 2;
var buttonWidth = SOME_BUTTON.bounds.size.width;
indicator.center = CGPointMake(buttonWidth - halfButtonHeight , halfButtonHeight);
SOME_BUTTON.addSubview(indicator)
indicator.startAnimating()

And to make it in the center of the button

indicator.center = CGPointMake(buttonWidth/2, halfButtonHeight);

Or Use great library

https://github.com/souzainf3/RNLoadingButton-Swift

Answer 6

I'm using contraints to center the indicator inside the UIButton. Adapting the extension of @DanielQ, that becomes:

extension UIButton {
    func loadingIndicator(show: Bool) {
        let tag = 9876
        if show {
            let indicator = UIActivityIndicatorView()
            indicator.tag = tag
            self.addSubview(indicator)
            indicator.translatesAutoresizingMaskIntoConstraints = false
            let horizontalConstraint = NSLayoutConstraint(item: indicator, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
            let verticalConstraint = NSLayoutConstraint(item: indicator, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
            self.addConstraints([horizontalConstraint, verticalConstraint])
            indicator.startAnimating()
        } else {
            if let indicator = self.viewWithTag(tag) as? UIActivityIndicatorView {
                indicator.stopAnimating()
                indicator.removeFromSuperview()
            }
        }
    }
}

Answer 7

I removed the title from the button then added it back once the animation has finished rather than the indicator overriding the title:

extension UIButton {

func loadingIndicator(show: Bool) {
    let tag = 9876

    var color: UIColor?

    if show {
        color = titleColor(for: .normal)
        let indicator = UIActivityIndicatorView()
        let buttonHeight = self.bounds.size.height
        let buttonWidth = self.bounds.size.width
        indicator.center = CGPoint(x: buttonWidth/2, y: buttonHeight/2)
        indicator.tag = tag
        indicator.color = UIColor.white
        setTitleColor(.clear, for: .normal)

        self.addSubview(indicator)
        indicator.startAnimating()
    } else {
        if let indicator = self.viewWithTag(tag) as? UIActivityIndicatorView {
            indicator.stopAnimating()
            indicator.removeFromSuperview()
            setTitleColor(color, for: .normal)
        }
    }
}
}