How to set grey color background for UIActivityIndicator when loading on UIView in iOS

Question

I currently have a UIActivityIndicator appearing on screen for a second or two. I would like to set grey out the background as this appears on screen but I am not sure how to do this...

Here's how I have initialized the indicator so far.

- (void)viewDidLoad
{
//...

    activity = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 32.0f, 32.0f)];
    [activity setCenter:CGPointMake(160.0f, 208.0f)];
    [activity setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleGray];

    [self.tableView addSubview:activity];

    [activity startAnimating];

    [activity performSelector:@selector(stopAnimating) withObject:nil afterDelay:1.0];


}

Any help would be greatly appreciated.

Solution 1

You should check out the SVProgressHUD

It has options for masking the background and is dead simple to work with.

The SVProgressHUDMaskType has options to

enum {
 SVProgressHUDMaskTypeNone = 1, // allow user interactions, don't dim background UI (default)
SVProgressHUDMaskTypeClear, // disable user interactions, don't dim background UI
SVProgressHUDMaskTypeBlack, // disable user interactions, dim background UI with 50% translucent black
SVProgressHUDMaskTypeGradient // disable user interactions, dim background UI with translucent radial gradient (a-la-alertView)
};`

Solution 2

No need for a separate view. Here's a simple mechanism:

    UIActivityIndicatorView *activity = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

    self.activityIndicatorView = activity;
    // make the area larger
    [activity setFrame:self.view.frame;
    // set a background color
    [activity.layer setBackgroundColor:[[UIColor colorWithWhite: 0.0 alpha:0.30] CGColor]];
    CGPoint center = self.view.center;
    activity.center = center;
    [activity release];

Solution 3

Try this simple method

- (void)viewDidLoad
{
    UIActivityIndicatorView *activityIndicator= [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
    activityIndicator.layer.cornerRadius = 05;
    activityIndicator.opaque = NO;
    activityIndicator.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
    activityIndicator.center = self.view.center;
    activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
    [activityIndicator setColor:[UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0]];
    [self.view addSubview: activityIndicator];
}

Solution 4

Actually I think you can do it more simply :)

[_activityIndicator setBounds:self.view.frame];
[_activityIndicator setCenter:self.view.center];
[_activityIndicator setAlpha:0.5f];
[_activityIndicator startAnimating];

You can set the background color in the storyboard or do it programmatically using

    UIColor *activityBackgroundColor = [UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0];
[_activityIndicator setColor:activityBackgroundColor];

Make sure to check "Hides When Stopped" in the attributes inspector in Xcode with the activity indicator selected.

Solution 5

You could put a view in to the window that has a background color of black with opacity of 0.5. Putting it into the window will block navigation controllers and tab bar controllers as well.

View more solutions

Comments

[C.Johns]

hrmm.. I'm scouting around for examples of a good way to do this.. but they are pretty thin and view between...

[Sid]

What Micah said, is what I do as well. I put the code in the AppDelegate. Whenever I need to block the UI, I get a reference to the AppDelegate and call the method to add the 'carpet view', as I like to call it :)

[C.Johns]

yes I have seen this a couple of times.. but wanted to learn how to set this up myself.. but I think maybe this will something I should be using in my project..

[Christian Schlensker]

Just check out the source code for that project. The simplest way would be to make an 'overlay' view thats the size of your window with a semi-transparent black background. Then add the activity indicator as a subview of that overlay view.

[C.Johns]

is it possible to set these up with timers?

[C.Johns]

okay cool thankyou for that.. I think I will have a go at this now.. because it dose have some nice functionality.

[Christian Schlensker]

[self performSelector:@selector(showSpinner) withObject:nil afterDelay:5]; [self performSelector:@selector(dismissTheSpinner) withObject:nil afterDelay:10];

[C.Johns]

okay pretty much got it working sweet.. actually quite nice.. however As I see the thing loading.. and when it stops my app crashes with this msg ** +[SVProgressHUD stopAnimating]: unrecognized selector sent to class 0x5cc10**

[GeneralMike]

Hm, this looks good, but I'm getting an error on the [activity.layer ...] line. It says "Receiver type 'CALayer' for instance method is a forward declaration." I set up "activityIndicatorView" as a property of my VC, is there anything else I need to do to make this work? EDIT: Also, I'm using ARC, so I don't have the last line either.

[mahboudz]

Have you included QuartzCore.h?

[Prasad]

Thank you so much, It saves lot of time for me