CODEWITHSUNDEEP
iphoneiosuiactivityindicatorviewviewdidload
C.Johns
C.Johns

Reputation: 10245

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

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.

Upvotes: 10

Views: 26090

Answers (9)

SpaceX
SpaceX

Reputation: 2890

Swift 3

To set backgroundColor

activityIndicatorView.backgroundColor = UIColor.gray // Set Activity indicator backgroundColor

To create and configure activity indicator

var activityIndicatorView   : UIActivityIndicatorView! // Declare variable to hold activity indicator

In viewDidLoad, Call the below method to create and configure the activity indicator, also don't forget to add to the view (where you would like to show the activity indicator) by calling view.addSubview(activityIndicatorView) in viewDidLoad. Also set constraints to it.

func createAndconfigureActivityIndicatorView() {

        activityIndicatorView  = UIActivityIndicatorView(activityIndicatorStyle: .white) 

        activityIndicatorView.backgroundColor = UIColor.gray // Set Activity indicator backgroundColor 

        activityIndicatorView.startAnimating() // To start animation

        activityIndicatorView.hidesWhenStopped = true // Setting this true means, when you stop the activity indicator, its automatically hidden (see below)
}

// Stops and Hides Activity Indicator
activityIndicatorView.stopAnimating()

Upvotes: -1

Chris Leung
Chris Leung

Reputation: 153

As of Xcode 8.3, there's a way to do this in storyboard:

  1. Add the Activity View into your scene, preferably to the bottom of the list of objects in your view, so that it'll appear "on top" of everything
  2. Make it cover the entire view by adding constraints
  3. Click on the Attributes Inspector
  4. Enable "Hides When Stopped"
  5. Set "Alpha" > 0 (0.3 is good)
  6. Set "Background" to a dark color (black works well)

Here's a screenshot.

Upvotes: 0

IRFAN SHEIKH
IRFAN SHEIKH

Reputation: 43

@SVMRAJESH Answer in Swift 2.0

 let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
    loadingIndicator.layer.cornerRadius = 05

    loadingIndicator.opaque = false
    loadingIndicator.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
    loadingIndicator.center = self.view.center;
    loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
    loadingIndicator.color = UIColor(red:0.6,green:0.8,blue:1.0,alpha:1.0)
    loadingIndicator.startAnimating()
    self.view.addSubview(loadingIndicator)

Upvotes: 0

Rajesh Loganathan
Rajesh Loganathan

Reputation: 11217

Try this simple method

Its working well for me....

- (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];
}

Upvotes: 5

thepauljones
thepauljones

Reputation: 146

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.

Upvotes: 3

msrdjan
msrdjan

Reputation: 835

Even simpler, you can set layer background colour to semi-transparent black (or any other colour):

self.activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
self.activityIndicatorView.layer.backgroundColor = [[UIColor colorWithWhite:0.0f alpha:0.5f] CGColor];
self.activityIndicatorView.hidesWhenStopped = YES;
self.activityIndicatorView.frame = self.view.bounds;
[self.view addSubview:self.activityIndicatorView];

Of course, don't forget to:

#import <QuartzCore/QuartzCore.h>

This way also the spinner will remain opaque.

Upvotes: 0

mahboudz
mahboudz

Reputation: 39376

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];

Upvotes: 22

Christian Schlensker
Christian Schlensker

Reputation: 22478

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

Upvotes: 14

Micah Hainline
Micah Hainline

Reputation: 14427

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.

Upvotes: 1

Related Questions