autolayout_2x

Auto Layout at first seems to be very boring and unresponsive, did you felt the same ? The first time I started with I was unable to achieve the layout with all those new constraints. Well once you master it you will feel its the game changing feature of iOS development.

You all might have heard about Retina images @2x images and @3x images and their roles in designing layout for iPhone 5, iPhone 5s, iPhone 6 & iPhone 6+. If you are not aware about the same I would highly recommend to learn that first before reading next para.

In auto resizing we dont have to do anything extra or we did not have to worry about the height & width for 5, 6 & 6+ it would automatically take the images of @2x & @3x and it will auto adjust the height & width but alas thats not the case with auto layout.

If you want the image sizes to be proper & perfect you will need to work with Aspect Ratios, Ahhh what that now ? Its easy consider you have logo image of size 150 * 150 for @1x, 300 * 300 for @2x & 450 * 450 for @3x. You want these respective height & width to be proportional  in all devices. To achieve that we can not give constraints of Fixed height 150 and fixed width 150.

For that we need to provide aspect ratio as 150:320 in width & 150:480 in height as showed below.

Now if we have layout of 1242*2208 it will be converted to match 6 + resolution like : ( 150 *1242 / 320 )  for width and  (150 * 2208 / 480) for height.

Seems to be headache but will help you a lot when working with all screen resolutions.

Aspect Ratios & Autolayout

Aadil Keshwani

People call me geek i call myself Coder. I like to explore & learn new things, R&D and Innovation motivates me. By profession i am iPhone Developer but i have sound knowledge of PhoneGap, HTML, CSS3, WordPress, Photoshop, PHP, CodeIgniter, OpenCart. Feel free to contact me for any queries or help in above technologies, i would be more than happy to help you out.

Category: Uncategorized
923 views