What is a UI Element?
UI elements are any visible components in our application, some of which respond to user actions, such as buttons and text fields, while others contain richer content, such as images and labels.
How to Add UI Elements?
UI elements can be added in code with the assistance of the Interface Builder. We can use either of them if needed.
Our Focus
By using code, we will concentrate on adding UI elements to the application. A simple and straightforward method is to drag and drop UI elements using the Interface Builder.
Methods
Below, we explain some UI elements by creating a simple iOS application.
Steps
- Like in the first iOS program, create a View-based application.
- Update only the ViewController.h and ViewController.m files.
- Then, we will add methods to the ViewController.m file to create UI elements.
- Call this method in the viewDidLoad method.
- Important lines of code have been commented in the code by marking above the single line.
List of User Interface Elements
The following explains specific UI elements and their related functions.
| No. | Specific UI Element or Function |
|---|---|
| 1 | Text Fields <br> User interface element used to obtain user input in the application. |
| 2 | Input Types - TextFields <br> Users can assign keyboard input attributes using UITextField. |
| 3 | Buttons <br> Used to handle user actions. |
| 4 | Label <br> Used to display static content. |
| 5 | Toolbar <br> Manipulates what is displayed in the current view. |
| 6 | Status Bar <br> Displays key information about the device. |
| 7 | Navigation Bar <br> Contains a view controller that can be inferred and navigation buttons that pop the navigation controller. |
| 8 | Tab Bar <br> Generally used for switching between sub-tasks, views, or models within the same view. |
| 9 | Image View <br> Used to display a simple sequence of images. |
| 10 | Scroll View <br> Used to display content beyond the screen area. |
| 11 | Table View <br> Used to display scrollable lists of data in multiple rows or sections. |
| 12 | iOS Split View <br> Used to display two panes on the detail pane with control information on the main pane. |
| 13 | Text View <br> Used to display scrollable text information that can be selected and edited. |
| 14 | View Transition <br> Switching between various view views. |
| 15 | Pickers <br> Used to display a specific data selection from a list. |
| 16 | Switches <br> Used to disable and enable actions. |
| 17 | iOS Sliders <br> Used to allow users to select a value within an allowed range. |
| 18 | iOS Alert Dialogs <br> Used to provide users with important information. |
| 19 | iOS Icons <br> They are images representing actions or depicting things related to the application. |