Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make rounded corners on app screen?

Tags:

screen

iphone

As some of you may have noticed, most (if not all) of system apps show the screen with rounded corners. I mean, the four corners of the device screen look rounded.

However, most of third party apps don't (the corners are 90º), but I've seen some that do, as Facebook messenger. Many others have this effect but only on the splash screen (which may be only a modification to the default.png image file)

Is there a property to achieve this effect?

like image 550
htafoya Avatar asked Mar 02 '12 04:03

htafoya


3 Answers

If you want the rounded corners over the ENTIRE app, and not have to explicitly recreate them with every different View Controller you want, call it in AppDelegate: (didFinishLaunching method)

[self.window.layer setCornerRadius:20.0];
[self.window.layer setMasksToBounds:YES];
self.window.layer.opaque = NO;

Don't forget to:

#import <QuartzCore/QuartzCore.h>

This way is better because it creates the animation on the WINDOW, and not the VIEW. So you can design the rest of the UI with 90˚ corners, and they'll automatically be rounded. It's much easier calling it once.

It also may be better for performance to rasterize the layer, especially if it lags:

[self.window.layer setShouldRasterize:YES];
[self.window.layer setRasterizationScale:[UIScreen mainScreen].scale];

The above will force the animation/graphic change to "act like an image" without making the UI too heavy. Performance will improve, and rasterize according to Retina or Non-Retina Screens. (This is the [UIScreen] call, as ".scale" returns 2.0 for retina, and 1.0 for non-retina. Very, very simple.

Hope this helped! Tick if so and I'll come back and see! :)

like image 114
topLayoutGuide Avatar answered Oct 01 '22 15:10

topLayoutGuide


Following will round the corners of a view. You can put it in viewDidLoad:

#import <QuartzCore/QuartzCore.h>

view.layer.cornerRadius = 7;
like image 37
jamihash Avatar answered Oct 01 '22 15:10

jamihash


// Import QuartzCore.h at the top of the file
#import <QuartzCore/QuartzCore.h>


self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
self.view.layer.cornerRadius = 20.0;
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

Check out the Introduction to CALayers Tutorial. You will get good start up.

like image 27
Devang Avatar answered Oct 01 '22 13:10

Devang