6

How can I implement rounded corners applied to the whole view as seen on screenshot (note that both navigation bar and keyboard corners are rounded)?

I've tried setting cornerRadius = 10 and masksToBounds = YES for both window.layer and window.rootViewController.view.layer, but only the bottom view corners are getting rounded, the navigation bar still stays square.

Update. Setting cornerRadius to a window.layer actually adds rounded corners to the top too, but those corners are not visible under the status bar unless cornerRadius is greater then 20.

Example

iHunter
  • 6,205
  • 3
  • 38
  • 56

4 Answers4

17

Ok, I've asked Andrew Stone, a developer of Twittelator Neue, on Twitter, and here's his recipe, published with Andrew's permission:

We're going to write a book on coding tricks in Neue! We overlay a window w an image containing 4 corners over everything

We also have a custom nav bar with a stretchable image w/ tops rounded

So here's how I did it in my own project:

UIImage *overlayImg = [UIImage imageNamed:@"overlay.png"];
CALayer *overlay = [CALayer layer];
overlay.frame = CGRectMake(0, 0, overlayImg.size.width, overlayImg.size.height);
overlay.contents = (id)overlayImg.CGImage;
overlay.zPosition = 1;
[self.window.layer addSublayer:overlay];

overlay.png is a transparent fullscreen image with black corners.

Community
  • 1
  • 1
iHunter
  • 6,205
  • 3
  • 38
  • 56
  • When doing this remember to add `#import ` to your class and to add the QuartzCore framework to your project. – robhasacamera Sep 06 '12 at 20:34
  • I found this on the app: roundedCornerBL.png roundedCornerBL@2x.png roundedCornerBR.png roundedCornerBR@2x.png roundedCornerTL.png roundedCornerTL@2x.png roundedCornerTR.png roundedCornerTR@2x.png – 3lvis Sep 30 '12 at 08:45
  • Can someone share the overlay image(s) ? – fvisticot Nov 14 '12 at 23:17
1

iHunter's answer works great for me except when I try to use the TWTweetComposeViewController, that shows the keyboard but not the tweet view. Then I should to make the overlay as a property in the AppDelegate.h and before tweetView, remove the overlay. At tweet done, turn add overlay again.

AppDelegate *delegate = [[UIApplication sharedApplication] delegate];
[delegate.overlay removeFromSuperlayer];
TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];
tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result) {
    AppDelegate *delegate = [[UIApplication sharedApplication] delegate];
    [delegate.window.layer addSublayer:delegate.overlay];
};
[self presentModalViewController:tweetSheet animated:YES];
Druid
  • 6,423
  • 4
  • 41
  • 56
Rscorreia
  • 201
  • 2
  • 3
1

They're probably using a background image on the navigation bar that includes the rounded corners.

Ash Furrow
  • 12,391
  • 3
  • 57
  • 92
  • Yeah, I thought about it. But if navbar background contains black corners, displaying it in a modal view will show them moving around a screen from bottom during animation :) – iHunter Jan 05 '12 at 10:09
  • That's true - have you tried a png with a transparent background? – Ash Furrow Jan 05 '12 at 16:15
  • I haven't tried a transparent navbar by myself (I decided to go without rounded corners), but Andrew Stone (Twittelator Neue) told me he did it that way too (besides the overlay with corners on top of all, see my answer for details). Thank you for your help! – iHunter Jan 07 '12 at 10:56
0

I doubt that the window has rounded corners because I don't believe the status bar has a height greater than 20 units. I suspect that the window is simply set with a black background (or whatever color is needed to match the status bar, and then another view is place on top. That view on top has the rounded corners. similarly, any other subviews will have rounded corners to help with this illusion.

Jim
  • 5,940
  • 9
  • 44
  • 91