综合技术

Customizing Table View iOS Tutorial

微信扫一扫,分享到朋友圈

Customizing Table View iOS Tutorial
0

Multiple attributes of a Table View can be customised. In this tutorial we will change the background color of the Table View and the Table View Cells. We will also change the color of the separator and remove the separator of empty cells. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCustomizeTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard . Remove the View Controller from the Storyboard and drag a Navigation Controller to the empty canvas. This will embed the Table View Controller.

Since we have deleted the original View Controller, we have no initial start point anymore. Select the Navigation Controller, go to the Attribute Inspector and Select the ” Is Initial View Controlle r” checkbox.

We need a reference to the cells of the Table View later, so select the Table View Cell, go to the Attribute Inspector and give the Cell Identifier a title of “Cell”

The ViewController.swift file isn’t needed anymore, because we have deleted the View Controller in our Storyboard. Next, add another file to the project. Choose iOS->Source->Cocoa Touch Class. Name the class NumberViewController and make it a subclass of UITableViewController.

Inside the class of the NumberViewController.swift file add the following property.

var numbers = ["One","Two","Three","Four","Five"]

When the Table View class was created, Xcode has already created the delegate methods. Change the following methods

override func numberOfSections(in tableView: UITableView) -> Int {
    // return the number of sections
    return 1
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // return the number of rows
    return numbers.count
}

    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) 

    cell.textLabel?.text = numbers[indexPath.row]

    return cell
}

The cells are populated with the items of the numbers array. We need to connect the NumberViewController class with the Table View Controller. Go to the Storyboard and select the Table View Controller. Go to the Identity Inspector and enter the NumberViewController at the Class field

Build and Runthe project, the Table View is displayed with the numbers included.

Now it is time to customize the Table View. We can change the background to a gray color. Add the following line in viewDidLoad

tableView.backgroundColor = UIColor.gray

Build and Run, the background color has changed to gray.

The cells containing the numbers still has the default background color. We can give them a clear color so the background color of the Table View will “shine through” the cells. Add the following line right after the “cell.textLabel.text = …” line in tableView:cellForRowAtIndex method

cell.backgroundColor = UIColor.clear

Build and Runagain, the background color of the cells are equal to the background color of the Table VIew

The separators of the empty cells are still visible. Let’s remove them. Add the following line at the end of viewDidLoad

tableView.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: 0))

Build and Run,the separators are not visible any more.

Finally we can change the background color of the separators. Add the following line at the end of viewDidLoad

tableView.separatorColor = UIColor.yellow

Build and Run, the separator color has changed to yellow

You can download the source code of the IOSCustomizeTableViewTutorial at the ioscreator repository on Github .

阅读原文...


iOScreator

CES 2019:联想ThinkVision P44W超宽曲屏显示器上手

上一篇

HTC 推出新一代 VR 设备 Vive Cosmos

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Customizing Table View iOS Tutorial

长按储存图像,分享给朋友