具有多个单元格类型的iOS UITableView

最新推荐文章于 2021-04-23 19:30:00 发布

cunchi4221

最新推荐文章于 2021-04-23 19:30:00 发布

阅读量293

点赞数

文章标签： java python ios android opencv

原文链接：https://www.journaldev.com/15077/ios-uitableview-multiple-cell-types

版权

In this tutorial, we’ll be developing an iOS Application using Swift that has a single iOS UITableView with two different types of UITableViewCells.

在本教程中，我们将使用Swift开发一个iOS应用程序，该应用程序具有一个iOS UITableView和两个不同类型的UITableViewCells 。

Multiple Cells inside a TableView are commonly seen in the Facebook newsfeed application which hosts cells largely grouped into three types – Status Posts, Image Posts and Video Posts.

TableView内部的多个单元格通常在Facebook新闻订阅源应用程序中看到，该应用程序托管的单元格大致分为三种类型-状态帖子，图像帖子和视频帖子。

iOS UITableView具有不同类型的单元格 (iOS UITableView with different type of cells)

We’ll be creating an application that displays two types of cells. First, that displays country flag and name. Second, that displays population for the country. We’ll be populating the data in the UITableView from a generic array.

我们将创建一个显示两种类型的单元格的应用程序。首先，显示国家标志和名称。其次，显示该国人口。我们将从通用数组填充UITableView中的数据。

Let’s start our XCode and select a Single View Application template. We’ll setup our UI in Main.storyboard using Autolayout as shown below.

让我们启动XCode并选择Single View Application模板。我们将使用Autolayout在Main.storyboard设置UI，如下所示。

Adding a TableView and setting up its constraints. Displaying two prototype cells.添加一个TableView并设置其约束。 显示两个原型单元。
Adding a UIImageView and Label in the first prototype cell followed by setting their constraints.在第一个原型单元中添加UIImageView和Label，然后设置它们的约束。
Setting up the second prototype cell followed by defining the identifiers and class name for each UITableViewCell.设置第二个原型单元，然后为每个UITableViewCell定义标识符和类名称。
Adding the references of the views in the ViewController and Custom Cells.在ViewController和“自定义单元格”中添加视图的引用。

The code for the ViewController.swift file is given below.

下面给出了ViewController.swift文件的代码。

import UIKit

class CustomCountryCell: UITableViewCell{


    @IBOutlet var countryName: UILabel!
    @IBOutlet var countryIcon: UIImageView!
}


class CustomPopulationCell: UITableViewCell{

    @IBOutlet var countryPopulation: UILabel!

}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet var tableView: UITableView!
    var tableData = ["Australia", 24.13, "Canada", 36.29 ,"China", 1379, "India", 1324, "United States of America", 323.1] as [Any]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        tableView.dataSource = self
        tableView.delegate = self
        tableView.tableFooterView = UIView()
        
        tableView.rowHeight = 60
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        
        if let string = self.tableData[indexPath.row] as? String
        {
            let cell:CustomCountryCell = self.tableView.dequeueReusableCell(withIdentifier: "customCountryCell") as! CustomCountryCell
            
            cell.countryName?.text = string
            cell.countryIcon?.image = UIImage(named:string)
            return cell
        }
            
        else if let population = self.tableData[indexPath.row] as? Any, population is Double || population is Int {
            
            let cell:CustomPopulationCell = self.tableView.dequeueReusableCell(withIdentifier: "customPopulationCell") as! CustomPopulationCell
            
            cell.countryPopulation?.text = "Population is \(population) million"
            
            return cell
            
        }
        
        return UITableViewCell()
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableData.count
        
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
    }
    
    
}

Following are the notable things present in the ViewController class.

以下是ViewController类中存在的值得注意的事情。

We’ve implemented the two protocols present in the UITableView class i.e. UITableViewDelegate and UITableViewDataSource
我们已经实现了UITableView类中存在的两个协议，即UITableViewDelegate和UITableViewDataSource
.

。
tableData is a generic array that holds String, Double and Integer types. The string element is used to set the Image(the image assets have the same name set in the Assets folder) and country name.
tableData是一个通用数组，其中包含String，Double和Integer类型。字符串元素用于设置图像（图像资产具有在“资产”文件夹中设置的相同名称）和国家/地区名称。
tableView.tableFooterView = UIView() removes the empty cells after the last populated row in the UITableView.
tableView.tableFooterView = UIView()删除UITableView中最后一个填充行之后的空单元格。
tableView.rowHeight = 60 sets the row height for each UITableViewCell.
tableView.rowHeight = 60设置每个UITableViewCell的行高。
Cell of the type CustomCountryCell is added in the UITableView if the current element in the tableData is a String.
如果tableData的当前元素是String，则在UITableView中添加CustomCountryCell类型的单元格。
To check whether the current element in the tableData is of the type Double or Integer the following condition is used :
```
if let population = self.tableData[indexPath.row] as? Any, population is Double || population is Int {
}
```
In the above code snippet, the , acts as a where clause. The condition reads as : “if self.tableData[indexPath.row] is a valid element, typecast it to Any and check whether it is of the type Double OR type Int”.
Note: The above condition can be written in following way too.
要检查tableData的当前元素是Double类型还是Integer类型，请使用以下条件：
```
if let population = self.tableData[indexPath.row] as? Any, population is Double || population is Int {
}
```
在以上代码片段中,充当where子句。条件显示为：“如果self.tableData[indexPath.row]是有效元素，则将其类型转换为Any并检查其类型是否为Double OR type Int”。

注意：以上条件也可以用以下方式编写。
return UITableViewCell() is used to add a default empty cell if none of the conditions match.
如果没有条件匹配，则return UITableViewCell()用于添加默认的空单元格。
didSelectRowAt function is used to add the click animation on each TableView row.
didSelectRowAt函数用于在每个TableView行上添加单击动画。

The output of the above application in action is given below.

下面给出了上面应用程序的输出。

This brings an end to this tutorial. A similar implementation for Android using RecyclerView is given here. You can download the iOS TableViewMultipleCellTypes Project from the link below.

本教程到此结束。这里给出了使用RecyclerView的Android类似实现。您可以从下面的链接下载iOS TableViewMultipleCellTypes项目 。

Download iOS TableView Multiple Cells Project 下载iOS TableView多个单元格项目

Reference: Apple Documentation

参考： Apple文档