The Basics Of Auto Layout
When developing for iOS you've probably noticed that your elements sometimes don't line up like they should. This could very well be because you're not using auto layout...yet. Auto layout basically allows you to create dynamic interfaces that respond appropriately to the changes in screen size, localization and landscapes.
When using auto layout, you'll want to enable Size Classes so that your app will work on all available screen sizes.
With Auto Layout you arrange your app’s UI using relations between UI elements. These
relations are called constraints.
When looking in the right corner of your Xcode you'll see the following:
When creating a constraint you'll either see blue lines:
This means that the view layout is set up correctly. However whenever you see orange lines like so:
This means there's something wrong with your constraints. And even though the project might still build and run after showing orange constraints, its wise to fix it anyways.
When looking for whether an element already has constraints, you can just click on the element and see which constraint are already being applied in the Size inspector.
Working with constraints definitely requires some practise as it can be hard for beginners to pick up.
Example centering a view
When centering a view you have to specify the position by giving the constraints for the X/Y position and Width/Height size of the object.
As you can see, the button is not centered in the simulator as shown in the main.storyboard.
So by showing height/width and adding alignment constraints to center vertically and horizontally in the container, the button is now in fact centered!
0 reacties