What are UI elements?
UI elements are any visual elements visible in our application. Some of them respond to user actions, such as buttons and text fields, and others have rich content, such as images and labels.
How to add UI elements?
UI elements can be added in code with the involvement of Interface Builder. If needed, we can use either of them.
What we focus on
Through code, we will focus on adding UI elements to the application. A simpler and more direct method is to use Interface Builder to drag and drop UI elements.
Method
Below, we explain some UI elements by creating a simple iOS application.
Steps
1. As in the first iOS program, create a View-based application.
2. Only update the ViewController.h and ViewController.m files.
3. Then we add methods to the ViewController.m file to create UI elements.
4. Call this method in the viewDidLoad method.
5. Important code lines have been commented in the code by annotating above the single line.
List of User Interface Elements
The following explains specific UI elements and their related functions.
| No. | Specific UI element or functionality |
|---|---|
| 1 | Text Fields UI element used in applications to get user input. |
| 2 | Input Type - TextFields Users can assign keyboard input properties by using UITextField. |
| 3 | Buttons Used to handle user actions. |
| 4 | Label Used to display static content. |
| 5 | Toolbar Manipulates what is displayed in the current view. |
| 6 | Status Bar Displays key information of the device. |
| 7 | Navigation Bar Contains a navigation button that can infer the view controller and pop the navigation controller. |
| 8 | Tab bar Generally used for switching between subtasks, views, or models in the same view. |
| 9 | Image View Used to display a simple sequence of images. |
| 10 | Scroll View Used to display content beyond the screen area. |
| 11 | Table View Used to display scrollable list data in multiple rows or sections. |
| 12 | iOS Split View Used to display two panes on the detail pane, along with the control information of the master pane. |
| 13 | Text View Used to display text information in a scrollable list; it can be selected and edited. |
| 14 | View Transition Switching between various view displays. |
| 15 | Pickers Used to allow selecting a specific data item from a list. |
| 16 | Switches Used to disable and enable operations. |
| 17 | iOS Sliders Used to allow the user to select a value within a permitted range of values. |
| 18 | iOS Alerts Used to provide important information to the user. |
| 19 | iOS Icons They are images that represent actions or depict things related to the application. |