Working with User Interface Elements
To start working with user interface elements, double-click on a user interface file ( .xib or .storyboard) in the project tree. The files open in the UI Designer.
Adding and removing user interface elements
To create new elements on your scene or storyboard, you can either drag and drop them from Palette or copy and paste existing elements. To remove an element, select it and press Delete.
To add user interface elements to a scene or a storyboard
Editing user interface elements
To edit a specific element, select it on the canvas or in the Component Tree and use the Properties area. Properties with non-default values are highlighted with blue. To roll back to default values, you can use the Restore default value button. To copy the selected value to the clipboard, press ⌘C.
There are alternative ways of selecting UI elements:
- To select several items, ⌘--click on them on the canvas or in the Component Tree.
- To select related items, right-click on an item on the canvas or in the Component Tree and choose the Select item in the menu. In the sub-menu that opens, you can select parent, siblings and other related items.
When working with storyboards, you can arrange scenes on the canvas to your convenience using drag and drop.
Working with connections
Storyboard files allow you to have multiple scenes and manage connections between them.
Connections between components are shown on the designer canvas as arrows with the corresponding icons. They are also shown in the Component Tree. For some connections types (e.g. segues) there are editable properties. You can view and modify them in the Properties area when the connection is selected. The arrow that points to the initial view of the storyboard can be moved.
To create a connection (segue) between scenes
- On the canvas or in the component tree, find the element, which should trigger the transition.
Do one of the following:
While holding the
key, click on it and drag to the target component (on the canvas or in the component tree).
As soon as you release the mouse button, the Create New Connection dialog appears. In this dialog, select the type of the connection and click OK.
- In the Properties/Connections area below the component tree, select Connections, find the desired item, click on it and drag to the desired component (on the canvas or in the component tree).
- While holding the ⌥ key, click on it and drag to the target component (on the canvas or in the component tree).