Question

I am trying to create a view in iOS to let the user know their data is loading… it should have about a 200×200 Rounded-corner box in the middle with a spinner and the words “Data Loading…” and a transparent background.

This all is working except my 200×200 rounded-corner box is also transparent.

Here is the code I am using:

UIView *loadingDataView = [[UIView alloc] initWithFrame:CGRectMake(0, 44, 320, 367)];
loadingDataView.alpha = 0.4;
loadingDataView.backgroundColor = [UIColor clearColor];
UIView *viewWithSpinner = [[UIView alloc] initWithFrame:CGRectMake(110, 106, 100, 100)];
[viewWithSpinner.layer setCornerRadius:15.0f];
viewWithSpinner.backgroundColor = [UIColor blackColor];
UILabel *msg = [[UILabel alloc] initWithFrame:CGRectMake(5, 75, 90, 20)];
UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(5, 5, 90, 70)];
spinner.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;
[spinner startAnimating];
msg.text = @"Data Loading";
msg.font = [UIFont systemFontOfSize:14];
msg.textAlignment = UITextAlignmentCenter;
msg.textColor = [UIColor whiteColor];
msg.backgroundColor = [UIColor clearColor];
viewWithSpinner.opaque = NO;
viewWithSpinner.backgroundColor = [UIColor blackColor];
[viewWithSpinner addSubview:spinner];
[viewWithSpinner addSubview:msg];
[loadingDataView addSubview:viewWithSpinner];
[self.view addSubview:loadingDataView];

Thanks.

Answer 1

The solution for your problem is that you should remove the alpha attribute of 0.4, that’s what’s turning your round view transparent, if your view is set to clearColor (this is not really a color, it just makes the view transparent) it makes no sense to add an alpha of 0.4. If what you want is a semi-transparent view surrounding your black rounded view, you should do the following:

[loadingDataView setBackgroundColor:[UIColor colorWithRed:1 green:1 blue:1 andAlpha:0.4]];

That will give you something whiteish kinda grayish, that should work.

However, I would recommend you to use the GIDAAlertView Class I developed, you can get the source and an example app on my GitHub:

It takes about 3 lines to get it working:

GIDAAlertView *spinnerAlert=[[GIDAAlertView alloc] initAlertWithSpinnerAndMessage:@"GIDAAlertView Spinner"];

//Show it ...  
[spinnerAlert presentAlertWithSpinner];

//Later in your code, hide it 
[spinnerAlert hideAlertWithSpinner];

This is how it looks like.