Geekly Articles each Day
📜 ⬆️ ⬇️

Beautiful background textures in iOS

Friends.
Today we will talk about creating beautiful backgrounds in iOs applications from the point of view of the programmer, calculating their resolutions, specifics of different Apple devices and bypassing the pitfalls. Much of this will seem obvious to most iOs developers, but I’ll be glad if for some it becomes an instruction for immediate work.

So, we must answer the following questions:
  1. What permissions to choose for pictures.
  2. How to name pictures.
  3. How to use it.


What permissions to choose for pictures


It doesn't matter if we are writing for iPad, iPhone, iPod or universal application, both orientations of the device will be supported or only one, in any case, we would like the idea of ​​the designer with the background to be correctly implemented exactly as in the prototype picture. To do this, we, first of all, need to avoid scaling the image, and it also has a positive effect on performance, which is also not bad. Therefore, we need to calculate the exact dimensions of the working area of ​​the window (the size of the background image).

Initial data
Device iOs Permissions:

')
Element heights:



Now we simply subtract from the height of the screen the number of points that the controls eat and we get the size of the pictures for the background, we take into account both orientations, if necessary.

For example, if we have status bar and navigation bar, but no tab bar, we get:

Portrait orientation:


Landscape orientation:


How to name pictures


According to the Apple documentation, the medium itself will select the image of the desired resolution (for or without Retina) for the desired device, if the resources contain files with appropriate suffixes. For Retina screens this is "@ 2x", for iPhone - "~ iphone", for iPad - "~ ipad". Attention! Suffixes are case sensitive.

In addition, we need to take into account both orientations in the names (I suggest doing this without a suffix for portrait and using the suffix “l” for landscape) and an increased size of the picture for iPhone 5 (many do it with the suffix “-568h”). These suffixes are not processed by the system automatically and we will have to do it manually.

Thus, we get a list of file names to add to the resources:


Landscape orientation:


How to use it


So, the pictures of the necessary permissions are created, now let's make them work as it should.
First, we will make the loadBgImage function, which will select the desired texture. I remind you that we need to manually substitute only 2 suffixes to the name.

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


And 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 a similar code for the initial loading of the image in viewDidLoad and that's it!

Please note that we change the background when changing orientation using Core Animation, so everything should be not only fast, but also beautiful. In addition, to make it work even faster, I advise you to rasterize objects on this background by setting their view.layer.shouldRasterize property to YES and specifying the required scaling factor [UIScreen mainScreen] .scale in the view.layer.rasterizationScale property.

Everything, we coped with the task that we set ourselves at the very beginning.

Thanks for attention.

Source: https://habr.com/ru/post/188698/

More articles:


All Articles