Applying rounded corners for the entire application

Question

How can I implement rounded corners that apply to the whole view, as shown in the screenshot (note that both the navigation bar and the keyboard corners are rounded)?

I tried setting cornerRadius = 10 and masksToBounds = YES for window.layer and window.rootViewController.view.layer , but only the view angles are rounded from the bottom, the navigation bar still remains square.

Update Setting cornerRadius to window.layer actually adds rounded corners up, but these corners are not visible in the status bar if cornerRadius greater than 20.

Answer 1

Well, I asked Andrew Stone, the developer of Twittelator Neue, on Twitter, and here is his recipe, posted with permission from Andrew:

We are going to write a book on code tricks in Neue! We overlay the w window with an image containing 4 corners above everything

We also have a customizable stretch image navigation bar w / tops rounded

So, as I did 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 - transparent full-screen image with black corners.

Answer 2

Perhaps they use a background image in the navigation bar, which includes rounded corners.

Answer 3

IHunter answer is great for me, unless I try to use the TWTweetComposeViewController , which shows the keyboard but not the look of a tweet. Then I have to do the overlay as a property in AppDelegate.h and before tweetView , remove the overlay. When tweeting, enable 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]; 

Answer 4

I doubt that the window has rounded corners, because I do not believe that the status bar has a height of more than 20 units. I suspect the window is simply set to a black background (or some color is needed to match the status bar, and then another top view. This top view has rounded corners. Similarly, any other sub-points will be rounded corners to help with this illusion.