How is a rounded rect view with transparency done on iphone?

Question

A lot of apps pop up a transparent view with rounded corners and an activityIndicator when running a time consuming operation.

How is this rounding done and is it possible to do it just using Interface Builder (as there are lots of places I'd like to use something like this)? Or, should I use an imageview with a rounded rect or stretchable image? Do I need to draw the background myself?

So far, I have managed to get a basic view with similar transparency by setting the alphaValue in Interface Builder however it doesn't have rounded corners, and also the transparency seems to apply to all subviews (I don't want the text and activityindicator to be transparent, however even though I set the alphaValue on those in IB it seems to get ignored).

Answer 1

I'm surprised that Apple doesn't provide this out of the box. You have to create your own UIView subclass with drawRect: method:

 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetRGBFillColor(context, 0,0,0,0.75);

 CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
 CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
 CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
       radius, M_PI / 4, M_PI / 2, 1);
 CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
         rect.origin.y + rect.size.height);
 CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
       rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
 CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
 CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
       radius, 0.0f, -M_PI / 2, 1);
 CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
 CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
       -M_PI / 2, M_PI, 1);

 CGContextFillPath(context);

Note: rect in this code should be taken from [self bounds] (or whatever location you want it in), it won't make sense with rect passed to drawRect: method.

Answer 2

In your view do this in the drawRect method

float radius = 5.0f;

CGRect rect = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();   
rect = CGRectInset(rect, 1.0f, 1.0f);

CGContextBeginPath(context);
CGContextSetGrayFillColor(context, 0.5, 0.7);
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect));
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI / 2, M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI / 2, 0);

CGContextClosePath(context);
CGContextFillPath(context);

This will make your rounded rectangle for your view. You can find a complete example in the HeadsUpUI sample provided with the SDK. HTH

Answer 3

Hi frankodwyer,

actually i have used this transparency some time in the past, there is one function available where it will take the string name and that is displayed on the transparent view with the activity indicator, if possible can anyone find it and let me know, as i am very much in need of it now , please anyone ......

Thank you,

Lakshmikanth.

Answer 4

As of iPhone SDK 3.0, you can simply use the layer's cornerRadius property. E.g.:

view.layer.cornerRadius = 10.0;

Along the same lines, you can change the view's border color and width:

view.layer.borderColor = [[UIColor grayColor] CGColor];
view.layer.borderWidth = 1;

Answer 5

MBProgressHUD....
http://www.cocoadev.com/index.pl?MBProgressHUD