带图像和对勾的iOS自定义TableView

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

在本教程中,我们将开发一个iOS应用程序,其中包含一个自定义TableView,其单元格具有包含图像,标签和对勾的自定义布局。
让我们创建一个新的SingleView Application项目并继续进行。

iOS自定义TableView项目结构

该项目包含一个ViewController.swift类文件,该文件也包含CustomTableViewCells类。
另外,我们将要显示的图像应显示在Assets文件夹中。

为iOS TableView构建情节提要

  • 添加TableView并设置其约束。
    在单元格中添加TableViewCell和ImageView并设置其约束。
    在ImageView和AccessoryType之间添加标签-选中标记并设置其约束。
    ViewController.swift将包含另一个CustomCell类,实现UITableViewCell协议,如下所示。

  • 让我们将这些程序与情节提要链接起来。

iOS自定义TableView示例代码

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

import UIKit

class CustomCell : UITableViewCell{
 
}

class ViewController: UIViewController {

  override func viewDidLoad() {
      super.viewDidLoad()
      //Do any additional setup after loading the view, typically from a nib.
  }

  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      //Dispose of any resources that can be recreated.
  }

}

在上面的代码中,我们分别从labelData和imageData数组设置了标签和图像。
要检查/取消选中一个单元格,我们在该单元格上检查" accessoryType"属性。
如果它等于选中标记,则将其切换为无,反之亦然。

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

如果我们只允许单选选择,我们可以使用以下代码:

import UIKit

class CustomCell : UITableViewCell{
  

  @IBOutlet var myImage: UIImageView!
  @IBOutlet var myText: UILabel!
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

  @IBOutlet var tableView: UITableView!
  
  var labelData = ["Australia", "Brazil", "Canada","China","Germany","San Franceco","Malaysia", "Pakistan", "Russia", "South Africa", "United States of America"]
  
  var imageData = ["Australia", "Brazil", "Canada","China","Germany","San Franceco","Malaysia", "Pakistan", "Russia", "SouthAfrica", "UnitedStatesofAmerica"]
  
  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()
  }

  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      //Dispose of any resources that can be recreated.
  }
  
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      
      let cell:CustomCell = self.tableView.dequeueReusableCell(withIdentifier: "customCell") as! CustomCell
      
      cell.myText?.text = self.labelData[indexPath.row]
      cell.myImage?.image = UIImage(named:self.imageData[indexPath.row])
      return cell
  }
  
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
      return labelData.count
      
  }
  
  func numberOfSections(in tableView: UITableView) -> Int {
      return 1
  }
  
  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      tableView.deselectRow(at: indexPath, animated: true)
      
      if let cell = tableView.cellForRow(at: indexPath as IndexPath) {
          if cell.accessoryType == .checkmark{
              cell.accessoryType = .none
          }
          else{
              cell.accessoryType = .checkmark
          }
      }
      
  }
}

在上面的代码中,我们覆盖了函数" didSelectRowAt"和" didDeselectRowAt",以允许单选选择。
由于该方法已被覆盖,因此我们无法再使用tableView.deselectRow(at:indexPath,animation:true)来为选择设置动画。
因此,我们将customCell中的selectionStyle设置为none:

import UIKit

class CustomCell : UITableViewCell{
  

  @IBOutlet var myImage: UIImageView!
  @IBOutlet var myText: UILabel!
  
  //For single choice selection
  required init(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)!
      selectionStyle = .none
  }
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

  @IBOutlet var tableView: UITableView!
  
  var labelData = ["Australia", "Brazil", "Canada","China","Germany","San Franceco","Malaysia", "Pakistan", "Russia", "South Africa", "United States of America"]
  
  var imageData = ["Australia", "Brazil", "Canada","China","Germany","San Franceco","Malaysia", "Pakistan", "Russia", "SouthAfrica", "UnitedStatesofAmerica"]
  
  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()
  }

  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      //Dispose of any resources that can be recreated.
  }
  
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      
      let cell:CustomCell = self.tableView.dequeueReusableCell(withIdentifier: "customCell") as! CustomCell
      
      cell.myText?.text = self.labelData[indexPath.row]
      cell.myImage?.image = UIImage(named:self.imageData[indexPath.row])
      return cell
  }
  
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
      return labelData.count
      
  }
  
  func numberOfSections(in tableView: UITableView) -> Int {
      return 1
  }
  
//   func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
//       tableView.deselectRow(at: indexPath, animated: true)
//       
//       if let cell = tableView.cellForRow(at: indexPath as IndexPath) {
//           if cell.accessoryType == .checkmark{
//               cell.accessoryType = .none
//           }
//           else{
//               cell.accessoryType = .checkmark
//           }
//       }
//       
//   }

  //For single choice selection
  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      tableView.cellForRow(at: indexPath as IndexPath)?.accessoryType = .checkmark
  }
  
  func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
      tableView.cellForRow(at: indexPath as IndexPath)?.accessoryType = .none
  }

}