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

时间:2020-02-23 14:45:58  来源:igfitidea点击:

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

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

iOS UITableView具有不同类型的单元格

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

让我们启动XCode并选择Single View Application模板。
我们将使用"自动布局"在" Main.storyboard"中设置用户界面,如下所示。

  • 添加一个TableView并设置其约束。
    显示两个原型单元。

  • 在第一个原型单元中添加一个UIImageView和Label,然后设置它们的约束。

  • 设置第二个原型单元,然后为每个UITableViewCell定义标识符和类名称。

  • 在ViewController和"自定义单元格"中添加视图的引用。

下面给出了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, "San Franceco", 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)
  }
  
  
}

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

  • 我们已经实现了UITableView类中存在的两种协议,即UITableViewDelegate和UITableViewDataSource

  • tableData是一个通用数组,其中包含String,Double和Integer类型。
    字符串元素用于设置图像(图像资产具有在"资产"文件夹中设置的相同名称)和国家/地区名称。

  • tableView.tableFooterView = UIView()删除UITableView中最后一个填充行之后的空单元格。

  • tableView.rowHeight = 60设置每个UITableViewCell的行高。

  • 如果tableData中的当前元素是String,则在UITableView中添加CustomCountryCell类型的单元格。

  • 要检查tableData中的当前元素是Double还是Integer类型,使用以下条件:
    在上面的代码片段中,充当where子句。
    条件显示为:"如果self.tableData [indexPath.row]是有效元素,则将其强制转换为Any并检查其类型是否为Double OR type Int"。
    注意:以上条件可以写成以下形式也是。

  • 如果没有条件匹配,则使用return UITableViewCell()添加默认的空单元格。

  • didSelectRowAt函数用于在每个TableView行上添加点击动画。