iOS | Introduction to Interface Builder (IB)
  1. Interface Builder
    1. Interface Builder Editor
    2. Document Outline
  2. Outlet
  3. Action
  1. Interface Builder
    To show theInterface Builder Editor:
    ► In theProject navigator ► Click onMain.storyboard

    1. Interface Builder Editor


    2. Document Outline


      To show/hide theDocument Outlineyou can:
      ► In the Xcodemenu bar ► Click onEditor ► Click onShow Document Outline
      You can also:
      ► In theInterface Builder Editor ► Click the icon ► toShow/Hide Document Outline
  2. Outlet
    An outlet is a variable which is annotated with the annotation "@IBOutlet".
    Example: @IBOutlet weak var label1: UILabel!

    You can create a connection from a UI control to an outlet by pressing the "control" key and dragging it from the View Controller to the UI control.
    When you release the mouse, the available outlets are shown.

    Another way to create a connection from a UI control to an outlet is to:
    ► Start by selecting the UI control in the Interface Builder Editor (or the Document Outline).
    ► Display the connections inspector.
    ► Drag the cursor from the "New Referencing Outlet" to the View Controller.
    ► When you release the mouse, the available outlets are shown.

    Another way to create the connection and the outlet at the same time is to press the "control" key and drag it from the UI control to a place inside the code of the View Controller.
    When you release the mouse, a window will pop-up to let you create the connection and the outlet.
    Choose "Outlet" for the connection.

    To delete the connection:
    ► Start by selecting the UI control in the Interface Builder Editor (or the Document Outline).
    ► Display the connections inspector.
    ► In the "Referencing Outlets", click the "x" to delete the connection.
  3. Action
    An action is a method which is annotated with the annotation "@IBAction".
    Example: @IBAction func doAction(sender: AnyObject) {}

    You can create a connection from a UI control to an action by pressing the "control" key and dragging it from the UI control to the View Controller.
    When you release the mouse, the available actions are shown.
    The problem with this method is that you can't choose the event that will trigger the action.

    Another way to create a connection from a UI control to an action is to:
    ► Start by selecting the UI control in the Interface Builder Editor (or the Document Outline).
    ► Display the connections inspector.
    ► Drag from the event you want to the View Controller.
    ► When you release the mouse the available actions are shown.

    Another way to create the connection and the action at the same time is to press the "control" key and drag it from the UI control to a place inside the code of the View Controller.
    When you release the mouse, a window will pop-up to let you create the connection and the action.
    Choose "Action" for the connection.

    To delete the connection:
    ► Start by selecting the UI control in the Interface Builder Editor (or the Document Outline).
    ► Display the connections inspector.
    ► In the "Sent Events" click the "x" to delete the connection.

© 2025  mtitek