When wanting to implement the design of a view controller, or a cell the place to go is the Editor Design Screen. The Editor Design screen is composed of three parts.
- The 'screen' part.
- The 'elements' table part.
- The 'inspectors' part.
Let's break apart each part, and roughly explain its usage.
1. The 'screen' part is a preview of what the model will look like when running on the app.
- You can drag any elements you would lie to add to your view controller or cell directly to the screen.
- Rearranging the view's position is able by dragging, pinching and extending its corners. Any changes applied to any of the views are visible through the screen.
2. The elements tree part is a representation of the views arrangement in the view controller. The element tree depicts the subviews of the view controller and the relations between them.
- You can drag a view to change its 'parent' view (which view contains it) and check its position by just tapping it.
- You can delete a view by simply dragging it to the delete button.
3. The 'inspectors' part contains the most information regarding the modifications of the added views.
- The first tab contains the constraints of the selected view. For more information regarding the view constraints checkout the Introducing: Pin Constraints and Introducing: Constraints articles.
- The second tab arranges the position of the view in a much easier way.
- The third tab regards the control events that the view may have. For example, this is where you could assign an action to a button when it is pressed.
- The fourth tab contains all the attribute inspectors of the selected view. These attribute inspectors arrange the majority of the view's design and appearance. For more information go to Introducing: Attribute Inspector Properties article.
Editor Design Interface Explanation.
- The 'Update frames from constraints' button. This button rearranges the position of the view in the screen. You are advised to press this button each time you add or alter constraints in a view, to see the result of the changes you have made.
- The 'Add view' button. Pressing this button displays the view elements that you can add to your view controller. You can drag the view you want, either to the screen or the elements table, selecting which view specifically will 'own' it.
- The 'Undo' and 'Redo' buttons. Did you make a change you regretted? Press the 'Undo' button. Do you wish to bring back the change? Simply press the 'Redo' button.
- The 'Test App' button. When done with the changes you wanted, press the 'Test app' button to see what your app looks like.