We want our label to be centrally constrained therefore while it’s still selected, hold down the control button and drag a line to the left side of the screen then release it, a pop up menu will appear with this constraint options: Let’s constrain each of them using the control-drag method.Ĭenter the label horizontally by dragging it across the screen till the blue line appears. Let’s add some constraints! Currently, we are displaying three UI elements. Using auto layout in the interface builder To add more screens like below, click the button. The menu below will appear, select the preview option to view the current screen. Select the two overlapping circles with the option Automatic. A preview of the view controller’s code will be seen. To achieve multiple live previewing of different screens, go to the window pane controls.Ĭlick the Assistant Editor, the two overlapping circles. You can also alter the device’s orientation to see how it affects our app’s UI. To see how the app looks on other devices, click View as: iPhone 8 button to reveal the configuration bar and then choose your preferred iPhone/iPad devices to test. Live Previewing in the Interface Builderīy default, the Interface Builder is set to preview the UI on iPhone 8 (4.7-inch). Tip: We could save ourselves some trouble by live previewing our application without needing to run it. Not so good now, is it? This is why we need Auto Layout. 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. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |