Make a UIActivityIndicator with background, position centre of the main View in Swift

Question

So What I am aiming for, is a UIActivityIndicator to position in the centre of the screen, with a background around the spinner, and then with a full background at half transparency. This image shows what I am trying to create:

I have no issues with the spinner etc, but getting the layers all positioned correctly. They all seem to sit below the centre. Please see the image below of what is actually happening:

The code is below:

var spinningActivityIndicator: UIActivityIndicatorView = UIActivityIndicatorView()

    let container: UIView = UIView()
    container.frame = self.view.frame
    container.center = self.view.center
    container.backgroundColor = UIColor(hue: 0/360, saturation: 0/100, brightness: 0/100, alpha: 0.4)

    let loadingView: UIView = UIView()
    loadingView.frame = CGRectMake(0, 0, 80, 80)
    loadingView.center = self.view.center
    loadingView.backgroundColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)
    loadingView.clipsToBounds = true
    loadingView.layer.cornerRadius = 40

    spinningActivityIndicator.frame = CGRectMake(0, 0, 40, 40)
    spinningActivityIndicator.hidesWhenStopped = true
    spinningActivityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
    spinningActivityIndicator.center = CGPointMake(loadingView.frame.size.width / 2, loadingView.frame.size.height / 2)
    loadingView.addSubview(spinningActivityIndicator)
    container.addSubview(loadingView)
    view.addSubview(container)
    spinningActivityIndicator.startAnimating()
    UIApplication.sharedApplication().beginIgnoringInteractionEvents()

Can anyone help me fix this issue? Thanks!

Answer 1

Instead of adding it your view you can add it directly to application window. If you use window, your container can cover entire screen. Can you try this out?

var spinningActivityIndicator: UIActivityIndicatorView = UIActivityIndicatorView()
let window = UIApplication.sharedApplication().keyWindow
let container: UIView = UIView()
container.frame = UIScreen.mainScreen().bounds
container.backgroundColor = UIColor(hue: 0/360, saturation: 0/100, brightness: 0/100, alpha: 0.4)

let loadingView: UIView = UIView()
loadingView.frame = CGRectMake(0, 0, 80, 80)
loadingView.center = container.center
loadingView.backgroundColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 40

spinningActivityIndicator.frame = CGRectMake(0, 0, 40, 40)
spinningActivityIndicator.hidesWhenStopped = true
spinningActivityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
spinningActivityIndicator.center = CGPointMake(loadingView.frame.size.width / 2, loadingView.frame.size.height / 2)
loadingView.addSubview(spinningActivityIndicator)
container.addSubview(loadingView)
window.addSubview(container)
spinningActivityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()

And for stopping indicator and removing view use

spinningActivityIndicator.stopAnimating()
UIApplication.sharedApplication().endIgnoringInteractionEvents()
container.removeFromSuperview()