iPhone: How do you clip/mask a UIView?

Question

iPhone: How do you clip/mask a UIView?

I need to mask a UIView (add rounded corners etc) but can't seem to work out how.
On the desktop i'd look at adding a mask to the CALayer but it seems the iPhone SDK excludes the functionality.

Any ideas on how I can achieve the result?

p.s. I have no control over the content being rendered in the view (user submitted images)

Cheers

24" iMac, 17" MBP, 15" MBP, iPhone 2.0.2, Mac OS X (10.5.4)

Posted on Aug 20, 2008 7:59 PM

Reply

Answer 1

Best reply

RickMaddy

Level 4

1,327 points

Aug 20, 2008 8:44 PM in response to Aaron Wallis1

Create a custom view class. In this view's drawRect method draw a clear background then add the rounded corners in black or whatever color works for your app. You may also need to set the view's background color to clearColor.

Then add this view as a subview to the view showing your content. Or make this a sibling view to the content view. Just make sure you add this new view last so it's on top. The clear "hole" in the middle will let the content view show through.

I'm doing this in one of my apps - works great. In fact, I have one view that's made up of four subviews each showing a different layer of content.

Reply

Answer 2

Aug 20, 2008 8:48 PM in response to Aaron Wallis1

Great suggestion, but the design of the application doesn't allow me to fill the corners in a solid colour, they need to be fully transparent (they move around and there's stuff behind them that changes)

Worse case scenario, I just change the design, but i'd rather not 😀

Reply

Answer 3

RickMaddy

Level 4

1,327 points

Aug 20, 2008 9:15 PM in response to Aaron Wallis1

I'm confused. You wanted to know how to clip a view with rounded corners. Now you say the corners can't be a solid color.

I guess I don't understand what you are trying to do.

You can't have rounded corners and be fully transparent at the same time. That's conflicting requirements. Unless you want partially transparent corners. That's easy. Do what I said earlier. Just use an alpha of .5 or whatever on the color you use to draw the corners.

Reply

Answer 4

Aug 20, 2008 10:37 PM in response to RickMaddy

Here's a link to the effect I'm trying to achieve:
http://skitch.com/d2kagw/uh1i/photo

Whereby the image has rounded corners which expose a textured background.

Reply

Answer 5

RickMaddy

Level 4

1,327 points

Aug 20, 2008 10:56 PM in response to Aaron Wallis1

OK, I get it now. One way I can think of is to build your view as you do now with square corners but don't add to the parent view yet. Then you can create a graphics context and setup a clipping region in the new context with round corners. Then you can draw your view into this context. Then extract an image from the context. Now you use this image to display to the user instead of the original view you created behind the scenes.

Here's code I used to convert an arbitrary view into an image. All you need to do is add the clipping code to create the rounded corners.


- (UIImage *)convertView:(UIView *)view {
 UIGraphicsBeginImageContext(view.size);
 
 CGContextRef ctx = UIGraphicsGetCurrentContext();
 // Clear whole thing
 CGContextClearRect(ctx, view.bounds);
 // Add your code to create rounded rectangle clipping region
 // Draw view into context
 [view.layer renderInContext:ctx];
 
 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
 
 UIGraphicsEndImageContext();
 return newImage;
}

Reply

Answer 6

Aug 20, 2008 11:20 PM in response to RickMaddy

sweet!

I'll give it a go later today and let you know how I get on

Reply