ASPECT RATIOS & AUTOLAYOUT
BhuShan PaWaR
Innovative Solution Architect specializing in Flutter, React Native, and iOS, driving the creation of exceptional cross-platform applications
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.
Engineering Lead
9 年????