iOS - UI Elements


What UI elements are?

UI elements are visual elements that we can see in our applications. Some of these elements respond to user interactions such as buttons, text fields and others are informative such as images, labels.

How to add UI elements?

We can add UI elements both in code and with the help of interface builder. Depending on the need we can use either one of them.

Our Focus

We'll be focussing more on adding UI elements through code in our applications. Using interface builder is simple and straight forward, we just need to drag and drop UI elements.

Our Approach

We will create a simple iOS application and use it for explaining some of the UI elements.


1. Create a Viewbased application as we did in our First iOS application

2. We will be only updating the ViewController.h and ViewController.m files.

3. Then we add a method to our ViewController.m file specific to creating the UI element.

4. We will call this method in our viewDidLoad method.

5. The important lines of code have been explained in the code with single line comment above those lines.

List of UI elements

UI specific elements and their related functionalies are explained below

S.N.UI specific elements or funtionality
1Text Fields
It is an UI element that enables the app to get user input.
2Input types - TextFields
We can set the type of input that user can give by using the keyboard property of UITextField
It is used for handling user actions.
It is used for displaying static content.
It is used if we want to manipulate something based on our current view.
6Status Bar
It displays the key information of device.
7Navigation Bar
It contains the navigation buttons of a navigation controller which is a stack of view controllers which can be pushed and popped.
8Tab bar
It generally used to switch between various subtasks, views or models within the same view.
9Image View
It is used to display a simple image or sequence of images.
10Scroll View
It is used to display content that is more than the area of screen.
11Table View
It is used for displaying scrollable list of data in multiple rows and sections.
12Split View
It is used for displaying a two panes with master pane controlling information on detail pane.
13Text View
It is used for diplaying scrollable list of text information that is optionally editable.
14View Transition
It explains the various view transitions between views.
It is used for displaying for selecting a specific data from a list.
It is used as disable and enable for actions.
It is used to allow users to make adjustments to a value or process throughout a range of allowed values.
It is used to give important information to user.
It is an image representation used for an action or depict something related to the application.