With an example, we will learn how to work with the ui tables view of iOS apps in Swift language. Also with an example, using the xcode editor we learn how to use the iOS tabular view to display data in table format.

Table UI view in iOS

UI tables in iOS in simple language, In iOS apps, the table view is for displaying data in a single-column list consisting of several rows that can be divided into several sections; The table content is also scrolled up and down with a scroll bar. Using the iOS spreadsheet view, data can be easily displayed in a list-like format while providing a simple yet efficient interface for users to interact with the dataset. In general, the layout of the iOS spreadsheet will be as follows:

By adding a UITabeView class reference; We can use the tabular view in our iOS apps.

Now we will see with an example how we can use the UI tabular view in our iOS apps.

Create iOS spreadsheet app in Swift language

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, in a tabular view in iOS, we have the most basic pattern of the app, which is the “show only app”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: Table View

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier

This section is automatically generated based on the phrases we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button; A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now select the ViewController.swift file in your project that looks similar to the one below.

Add iOS UI controls to the display in Swift

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file. Now look for Table View in the Object Library in the Filter box, then drag and drop TableView into the ViewController in the Main.storyboard.

Now click on Table view to see the Prototype cells section . As you can see below; The value of the text box should be changed from zero to “1” and the Style style should be selected Grouped.

We now connect the Table View to the View Controller. To do this, click on the yellow button as shown below and drag the cursor from the yellow button and release it on the data source; You must also follow the same steps to connect the delegate as shown below.

To implement a tabular view, go to the ViewController.Swift file and first add two classes, UITABLVIEWDATASOURCE and UITABLEVIEWDELEGATE, and then create an array called devCourses that is used to display the data in the tabular view. Suppose a keyword is essentially a static keyword;

This means that its value can not be changed after the announcement.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

let devController = (

“IOS App Dev with Swift Essential Training”, “iOS 8 SDK NEW Features”,

“Data Visualization with D3.js”,

Swift Essentail Training

“Up and Running with AngularJS”,

“MySQL Essential Training”,

“Building Adaptive Android Apps with Fragments”,

“Advanced Unity 3D Game Programming”,

“Up and Running with Ubuntu Desktop Linux”,

“Up and Running with C”

)

Now our job is to show the data in tabular view; For this purpose, we have three methods that must be implemented in the table view. The first method is “numberOfSectionsInTableView”, which can be used to obtain the required number of sections in our applications. At the moment we only need one part, so in coding we set this value to 1:

func numberOfSectionsInTableView (tableView: UITableView) -> Int {

return1

}

Now the second method is “tableView” where we have to define the required number of row sections in the table view.

If we want to show only five rows in a table view, we have to mention it as “return 5”, otherwise if we want to show all the rows in the array, we have to name the array with the method Counting as mentioned below; Let’s express.

func tableView (tableView, numberOfRowsInSection: Int) -> Int {returndecCourses.count

}

Now the third method is tableView with cellForRowAtIndexPath, which is how we assign array data to labels in our Table View cells. Our method should be as shown below

func tableView (tableView.UITableView, cellForRowAtIndxPath indexPath: NSIndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCellWithIdentifier (“cell”, forIndexPath: indexPath) as UITableView cell

let course Title = devCourses [indexPath.row]

cell.textLable? .text = couseTitle

return cell

}

When we have finished writing all the functions we need in the ViewController.swift file; The encoding of our file will be as follows:

Import UIKit

class ViewController: UIViewController, UITableViewDataSource {

let devController = (

“IOS App Dev with Swift Essential Training”, “iOS 8 SDK NEW Features”,

“Data Visualization with D3.js”,

Swift Essentail Training

“Up and Running with AngularJS”,

“MySQL Essential Training”,

“Building Adaptive Android Apps with Fragments”,

“Advanced Unity 3D Game Programming”,

“Up and Running with Ubuntu Desktop Linux”,

“Up and Running with C”

)

func numberOfSectionsInTableView (tableView: UITableView) -> Int {

return1

}

func tableView (tableView, numberOfRowsInSection: Int) -> Int {returndecCourses.count

}

func tableView (tableView.UITableView, cellForRowAtIndxPath indexPath: NSIndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCellWithIdentifier (“cell”, forIndexPath: indexPath) as UITableView cell

let course Title = devCourses [indexPath.row]

cell.textLable? .text = couseTitle

return cell

}

Override func viewDidLoad0 {

Super.viewDidLoad0

}

Override func didRecieveMemoryWarnin0 {

Super.didRecieveMemoryWarning0 {

// Dispose of any resources that can be recreated.

}

}

Now run the program and check its output. To implement the application, select the required emulator (here we have selected iPhone Six S Plus) and then click the Play button, which is similar to the one in the lower left corner of the Xcode toolbar.

Output of iOS spreadsheet application in Swift language

Below you can see the result of running the iOS tabular view app. If you look closely; You will notice that we present the data as a single column list with several rows.

This shows how we can use the ui control tabular view in iOS apps to display data in the form of a list with a single column and multiple rows based on our needs.