AppCode 2016.1 Help

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.

AppCode_StoryBoard.png

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

  1. In the palette on the right side of the UI Designer, select the desired element.
  2. Do one of the following:
    • Drag and drop it on the canvas or on other user interface elements.
    • Drag and drop it on the component tree to select the precise position and the nesting level.

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 rollback 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

  1. On the canvas or in the component tree, find the element, which should trigger the transition.
  2. 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.
      AppCode_CreateNewConnection
      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).

See Also

Last modified: 20 July 2016