Are you making universal iPhone application and feeling difficulty in creating UI and managing all the device screen sizes. Don't worry, we have auto layout feature to over come that situation.
In order to use auto layouts in your project follow the below procedure, let's create a demo project.
Once you create demo project click on Main.storyboard to open it in Interface Builder. Before you do anything else, first enable Auto Layout and Size Classes for this storyboard. You do that in the File inspector, the first of the six tabs. For more details you can see in the below screens.
You can move your cursor over the other boxes in the grid to see which set of squares corresponds to which size class configuration. By default you start on Any width and Any height. This is the default, generic size class configuration. Apple recommends doing all of your initial interface layout in this class for a universal app, since all size classes will pull from this one initially. Make sure “wAny hAny” is the selected size class in your storyboard.
Now we have to give the size of view, So use the Pin menu and disable the Constraints to margins.
Check box the with,height and click on Add 2 Constraints.
Finally we made the view for universal app display. Now you can check wether the given constraints are fixed to all the iPhone screen sizes or not by watch it from preview or by running the app in simulator. Choose what ever the device you want to check.
In order to use auto layouts in your project follow the below procedure, let's create a demo project.
Once you create demo project click on Main.storyboard to open it in Interface Builder. Before you do anything else, first enable Auto Layout and Size Classes for this storyboard. You do that in the File inspector, the first of the six tabs. For more details you can see in the below screens.
Introduction to Size Classes:
Size classes were introduced in iOS 8, and they make it really intuitive to only have one storyboard for universal apps. Nearly everything you see on screen can have size classes, including the screen (UIScreen), views, and your view controllers. There are two types of size classes: vertical and horizontal. Each vertical and horizontal size class can have one of three values: Regular, Compact, or Any.
The size classes correspond to the device and orientation your app is running in. For example, a portrait iPhone has a Regular height and a Compact width. The Any value is used as the generic size class value; think of it as the superclass of all the other layouts. If there is nothing defined for the size class relating to the current device and orientation, the storyboard will pull our layout from Any.
It’s easy to view and switch between size class configurations in Xcode 7. At the bottom of the storyboard, towards the middle you will see a label that says “wAny hAny“. Click on it to see the size class configuration grid:
You can move your cursor over the other boxes in the grid to see which set of squares corresponds to which size class configuration. By default you start on Any width and Any height. This is the default, generic size class configuration. Apple recommends doing all of your initial interface layout in this class for a universal app, since all size classes will pull from this one initially. Make sure “wAny hAny” is the selected size class in your storyboard.
You will notice the size of the scenes in your storyboard have changed to squares to reflect our generic size class configuration.
For more detail about size classes, check out our Beginning Adaptive Layout Tutorial. This tutorial will stick to the basics of Auto Layout.
Auto Layout Constraints
Before going to details you must aware of giving frame to the Views. A View frame has three arguments origin(x,y) and size(width,height).
So for example.,
tempView.frame = CGRectMake(x,y,w,h);
Let's have detailed look in giving constraints, drag a UIView on to the your UIViewController's view and apply some color as I have a green view. From green view drag and drop on to the ViewController's main view, it shows some options among those options select two options which are Vertical Spacing to Top Layout Guid and Center Vertically in Container and click on Add Constraints. Which let's the green view's frame origin(x,y). For details you can see the two screen shots.
Now we have to give the size of view, So use the Pin menu and disable the Constraints to margins.
Check box the with,height and click on Add 2 Constraints.
Finally we made the view for universal app display. Now you can check wether the given constraints are fixed to all the iPhone screen sizes or not by watch it from preview or by running the app in simulator. Choose what ever the device you want to check.
0 Comments