Woohoo! We have successfully set up our project! Run the project using iPhone X.Įverything looks good in portrait mode but try rotating on either side to landscape mode with command right/left arrow. This will add the image to the Image View. Click the down arrow on the first option (image) and select Excited. Going back to Main.storyboard, click on the image view, go to the Utility Panel and click the Attributes Inspector icon. Control drag the image from the file directory and place on the 3x option. To add the image, click the button at the bottom of the screen not the one at the bottom of the project outline though. Your view controller should be similar to the figure below. Use the layout lines for guidance like in the image. Now position the button at the bottom right most side of the screen and change its text to Click Me! and the label in the middle of the top most part of the screen with its text as Welcome to Auto Layout Swift 4.0. Try positioning the image view at the center of the screen, you should see blue lines cutting across the screen both horizontally and vertically. If we move either of them within the view controller, you will notice some blue lines appear. Drag the following onto the view controller: Let’s now add a few elements from the library. To add elements, head on to the Library Controls and choose the Object library option. That’s because we have not added any elements to it yet. Select Single view app and name it AutoLayout. It is a constraint-based layout system that allows developers to create an adaptive interface, that responds appropriately to changes in screen size and device orientation.Ĭreate a new Xcode project. Auto layout will help keep the button central in different orientations and devices. For instance, look at the UILabel below, it looks centrally placed in portrait view right? But when switched to landscape, it gets displaced. How to use auto layout in the interface builderĪuto Layout assists in dynamically calculating the size and position of all the views, in your view hierarchy based on the constraints placed.It has therefore become imperative to master this concept and we shall be going through the knowledge required to flex.īy the end of this tutorial, we will have learned: It’s a relatively new concept and may be confusing to use for the very first time, but all it does is simply make your app look good across all devices. To make this transition easier, Apple introduced Auto Layout. Fast forward to today, it has become quite frustrating to design an app that supports different screen sizes. Originally Apple had only one screen size, which was developer friendly since they did not have to be terribly flexible fitting into different screen sizes. Have you ever had trouble designing an application to look good in both landscape and portrait orientation? Do not despair! Auto Layout is here to the rescue.
0 Comments
Leave a Reply. |