Applying rounded corners for the whole application

Question

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.

Answer 1

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.

Answer 2

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];

Answer 3

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.

Answer 4

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