Interface Builder

Overview

Interface Builder is a visual design editor that’s integrated into this tool. Use Interface Builder to create the user interfaces of your apps by assembling views, controls, menus, and other elements from the library of controls. Below image shows the interface area where you can design your screen. The orange bordered area is interface area where we can design our screen.

The white colored area in the above screen is said to be the Main_View of the current screen. You can drag any control from control panel on left and drop into the Main_View to design your screen.

Change the position of the control or controls.

  1. Select any control in the Main_View which you want to move in the Main_View area.
  2. You can even select multiple controls at a time to move in the area using Ctrl/CMD to select.
  3. You can make use of two options to move the selected control/controls. They are : 1) Drag using mouse 2) Using keyboard arrow keys.
  4. Drag the selected control/controls in the Main_View area to wherever you want to move.
  5. Make use of keys to move the control/controls up, down, right, left.

Note : While using arrow keys, don’t make use of any other key while moving the control / controls.

Object Hierarchy

Managing view hierarchies is a crucial part of building your application’s user interface. The positioning of your views influences both the visual appearance of your application and how your application responds to changes and events.

Below image shows an example of how the hierarchy organization of views creates the desired visual effect for an application. In the case of the Template application, the view hierarchy is composed of a mixture of views derived from different sources.

As shown in above figure, Main_View is the main parent view in the screen. You can add any control from the control panel under Main_View as a child control. In Main_View hierarchy, the child control can be moved up and down with reference to some other control.

For e.g. As shown in above figure, we can drag IMAGE_VIEW5 under TEXTFIELD3 or move up above IMAGE_VIEW4. You can even select multiple controls at a time and can move up and move down together in the hierarchy.

Description of above screen:

  1. Screen : This is the screen that is selected from Screen List.
  2. Objects Hierarchy : This is said to  be  Object Hierarchy Window. It is used to view the complete hierarchy of the current selected screen’s Main_View and to manage parent with child along with their sub child. Tapping on objects buttons in the top left panel will open up this window as shown in the below image.

  3. Main_View : The parent in the hierarchy.
  4. Sub-Control / Child-Control : The sub controls in the objects hierarchy.
  5. Sub-Control : The sub control under a sub control in the hierarchy. You can add unlimited number of child controls in hierarchy .
  6. Selected Control : The selected control is displayed in turquoise color. Tapping on any control will show its property in the Property window.
  7. Hide : Select any control from the objects hierarchy window and tap on this button. It will hide that particular control visually but it will be properly seen at the runtime of the app.

Right Click Options for Control

Select any control in the Main_View of current selected screen. Right click on mouse will open up the right options for any control.

How to make use of right click options for control ?

  1. Remove : Use this option to remove selected control from the current selected screen.
  2. Clone : Use this option to clone same control in the same screen. The cloned control will be added in top left corner of the screen. You can then set the position of the control as per your needs.
  3. Save as Control :  Use this option to create your own custom control using a single or multiple controls together. Select one or more controls in the Main_View and right click on the screen and tap on Save as Control will open up following screen.



    • Add name of the control.
    • Add description of the control.
    • Press on add to save the control in the MyControls Panel.

    You can make use of this control across multiple screens as well as multiple apps. Configure once and use it again and again.

  4. Same Size : Use this option to make the height and width of selected controls of equal pixels.
  5. Same Height : Use this option to make the height of selected controls of equal pixels.
  6. Same Width : Use this option to make the  width  of selected controls of equal pixels.
  7. Horizontal  Align : Use this option to align horizontally two or more controls (Same X-position).
  8. Vertical Align :  Use this option to align vertically two or more controls (Same Y-position).
  9. Embed in View : This option will be used to embed current selected control into a view. For e.g. Hierarchy of objects  changes  as shown below:

    → Main_View

       → IMAGE_VIEW5

       → IMAGE_VIEW6

    Changes to

    → Main_View

      →VIEW1

             → IMAGE_VIEW5

      → IMAGE_VIEW6

  10. Select Parent : This option will be used to select the parent control of the object.

ToolBox

  1. Settings : Tap on this to hide and show all the buttons.
  2. Font : To change the font style and color of the text. Tapping on this button will show below screen.



    • Choose font color of the text of the selected control.
    • Choose font name of the text of the selected control.
    • Choose font size of the text of the selected control.
    • Apply alignment to the text of the selected control
  3. Left Align : Use this option to align left.
  4. Center Align : Use this option for align center.
  5. Right Align : Use this option for align right.
  6. Background Color: Tapping on Background color will open the following screen.

  1. To align selected control on the top with full width i.e. 320.
  2. To align selected control in the center of the screen with full width i.e. 320.
  3. To align selected control in the bottom of the screen with full width i.e. 320.
  4. To align selected control in the left of the screen with full height i.e. 480 or 568 depending on device type.
  5. To align selected control in the center of the screen with full height i.e. 480 or 568 depending on  device type.
  6. To align selected control in the right of the screen with full height i.e. 480 or 568 depending on device type.
  7. To provide selected control full width i.e. 320.
  8. To provide selected control full height i.e. 480 or 568.
  9. To provide  elected control full width and height (full screen) i.e. 320x480 or 320x568.

All these four quick menu items will be enabled when 2 or more objects are overlapping each other

  1. Bring Forward : The selected object will come forward by 1 level.
  2. Send Back : The selected object will be sent back to the last level.
  3. Bring Front : The selected object will come in front.
  4. Send Backward : The selected object will be send backwards by 1 level.

  1. To save one or more controls as a custom control in MyControls as discussed above in Right Click Options for Control.
  2. To cut one or more selected controls together to paste in the same screen or in other screen  at different position .
  3. To copy the selected control or controls.
  4. To paste the selected control in the current screen or in the other screen.

  1. Embed in View : This option will be used to embed current selected control into a view. For e.g. Hierarchy of objects changes as shown below :

    → Main_View

       → IMAGE_VIEW5

       → IMAGE_VIEW6

    Changes to

    → Main_View

      →VIEW1

             → IMAGE_VIEW5

      → IMAGE_VIEW6


  2. Unembed from View :This option will be used to un-embed current selected control from a view. For e.g. Hierarchy of objects  hanges as shown below :

    → Main_View

      →VIEW1

             → IMAGE_VIEW5

      → IMAGE_VIEW6

    Changes to

    → Main_View

       → IMAGE_VIEW5

       → IMAGE_VIEW6

  3. Link : This option will provide you shortcut to attach any action to the selected control. Clicking on this will open the window as shown in figure :



    The detail description of each action event of the control will be discussed in detail later.

  4. Delete : This option will delete the current selected control.