Beautiful background textures in iOS
- From the sandbox
- Tutorial
Friends.
Today we will focus on creating beautiful backgrounds in iOs applications from the point of view of a programmer, calculating their permissions, the specifics of different Apple devices and bypassing pitfalls. A lot of this will seem obvious to most iOs developers, but I will be glad if for some it becomes an instruction for direct work.
So, we must answer the following questions:
It doesn’t matter if we write for an iPad, iPhone, iPod or universal application, both device orientations will be supported or only one, in any case, we would like the designer’s idea with the background to be correctly implemented exactly as in the prototype picture. To do this, first of all, we need to avoid scaling the image, in addition, it will also favorably affect performance, which is also good. Therefore, we need to calculate the exact dimensions of the window's working area (the size of the background image).
Source data
Permissions iOs devices:
Element heights:
Now we simply subtract from the screen height the number of points that the controls “eat up” and get the sizes of the pictures for the background, take into account both orientations, if necessary.
For example, if we have a status bar and a navigation bar, but no tab bar, we get:
Portrait orientation:
Landscape Orientation:
According to Apple’s documentation, the environment itself will select a picture of the required resolution (for Retina or without) for the desired device if the resources contain files with the corresponding suffixes. For Retina screens it is "@ 2x", for iPhone it is "~ iphone", for iPad it is "~ ipad". Attention! Suffixes are case sensitive.
In addition, we need to take into account both orientations in the names (I propose to do this without the suffix for portrait and using the suffix “l” for landscape) and the increased size of the picture for iPhone 5 (many do this with the suffix “-568h”). These suffixes are not processed automatically by the system and we have to do it manually.
Thus, we get a list of file names that need to be added to the resources:
Landscape Orientation:
So, the pictures of the required permissions are created, now let's make them work as they should.
To begin with, we will make the loadBgImage function, which will select the desired texture. I remind you that we need to substitute only 2 suffixes to the name manually.
Now add the following function to our view controller:
Add the same image boot code to viewDidLoad and that’s it!
Please note that we change the background when changing the orientation using Core Animation, so everything should be not only fast, but also beautiful. In addition, to make this work even faster, I advise you to rasterize objects located against this background by setting the view.layer.shouldRasterize property in YES and specifying the required scale factor [UIScreen mainScreen] .scale in the view.layer.rasterizationScale property.
That's all, we coped with the task that we set ourselves at the very beginning.
Thanks for attention.
Today we will focus on creating beautiful backgrounds in iOs applications from the point of view of a programmer, calculating their permissions, the specifics of different Apple devices and bypassing pitfalls. A lot of this will seem obvious to most iOs developers, but I will be glad if for some it becomes an instruction for direct work.
So, we must answer the following questions:
- What permissions to choose for pictures.
- How to name pictures.
- How to use it.
What permissions to choose for pictures
It doesn’t matter if we write for an iPad, iPhone, iPod or universal application, both device orientations will be supported or only one, in any case, we would like the designer’s idea with the background to be correctly implemented exactly as in the prototype picture. To do this, first of all, we need to avoid scaling the image, in addition, it will also favorably affect performance, which is also good. Therefore, we need to calculate the exact dimensions of the window's working area (the size of the background image).
Source data
Permissions iOs devices:
- iPhone 320x480
- iPhone (Retina) 640x960
- iPhone 5 (Retina) 640x1136
- iPad 768x1024
- iPad (Retina) 1536x2048
Element heights:
- Status Bar 20pt (20px without Retina and 40px with Retina)
- Navigation Bar 44pt (44px without Retina and 88px with Retina)
- Tab Bar 49pt (49px without Retina and 98px with Retina)
Now we simply subtract from the screen height the number of points that the controls “eat up” and get the sizes of the pictures for the background, take into account both orientations, if necessary.
For example, if we have a status bar and a navigation bar, but no tab bar, we get:
Portrait orientation:
- iPhone 320x416
- iPhone (Retina) 640x832
- iPhone 5 (Retina) 640x1008
- iPad 768x960
- iPad (Retina) 1536x1920
Landscape Orientation:
- iPhone 480x256
- iPhone (Retina) 960x512
- iPhone 5 (Retina) 1136x512
- iPad 1024x704
- iPad (Retina) 2048x1408
How to name pictures
According to Apple’s documentation, the environment itself will select a picture of the required resolution (for Retina or without) for the desired device if the resources contain files with the corresponding suffixes. For Retina screens it is "@ 2x", for iPhone it is "~ iphone", for iPad it is "~ ipad". Attention! Suffixes are case sensitive.
In addition, we need to take into account both orientations in the names (I propose to do this without the suffix for portrait and using the suffix “l” for landscape) and the increased size of the picture for iPhone 5 (many do this with the suffix “-568h”). These suffixes are not processed automatically by the system and we have to do it manually.
Thus, we get a list of file names that need to be added to the resources:
- iPhone background ~ iphone.png
- iPhone (Retina) background@2x~iphone.png
- iPhone 5 (Retina) background-568h@2x~iphone.png
- iPad background ~ ipad.png
- iPad (Retina) background@2x~ipad.png
Landscape Orientation:
- iPhone backgroundl ~ iphone.png
- iPhone (Retina) backgroundl@2x~iphone.png
- iPhone 5 (Retina) backgroundl-568h@2x~iphone.png
- iPad backgroundl ~ ipad.png
- iPad (Retina) backgroundl@2x~ipad.png
How to use it
So, the pictures of the required permissions are created, now let's make them work as they should.
To begin with, we will make the loadBgImage function, which will select the desired texture. I remind you that we need to substitute only 2 suffixes to the name manually.
- (UIImage *) loadBgImageWithLandscapeOrientation: (BOOL) isLandscape
{
static BOOL isIphone5 = [UIScreen mainScreen].bounds.size.height == 568;
NSString * imageName = @"background";
if (isLandscape)
{
imageName = [imageName stringByAppendingString: @"l"];
}
if (isIphone5)
{
imageName = [imageName stringByAppendingString: @"-568h"];
}
return [UIImage imageNamed: imageName];
}
Now add the following function to our view controller:
-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[super willAnimateRotationToInterfaceOrientation: toInterfaceOrientation duration: duration];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
self.tableView.backgroundView = [[UIImageView alloc] initWithImage: [self loadBgImageWithLandscapeOrientation: UIInterfaceOrientationIsLandscape(toInterfaceOrientation)]];
[UIView commitAnimations];
}
Add the same image boot code to viewDidLoad and that’s it!
Please note that we change the background when changing the orientation using Core Animation, so everything should be not only fast, but also beautiful. In addition, to make this work even faster, I advise you to rasterize objects located against this background by setting the view.layer.shouldRasterize property in YES and specifying the required scale factor [UIScreen mainScreen] .scale in the view.layer.rasterizationScale property.
That's all, we coped with the task that we set ourselves at the very beginning.
Thanks for attention.