ios cell点击对勾_带图像和对勾的iOS自定义TableView

ios cell点击对勾

In this tutorial, we’ll be developing an iOS Application that contains a custom TableView with cells having a custom layout inclusive of images, label and a checkmark. Let’s create a new SingleView Application project and get on with it.

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

iOS自定义TableView项目结构 (iOS Custom TableView Project Structure)

The project consists of a ViewController.swift class file which would hold the class for CustomTableViewCells too. Also, the images that we would be displaying shall be present in the Assets folder.

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

为iOS TableView构建情节提要 (Building Storyboards for iOS TableView)

1. Adding a TableView and setting its constraints.
2. Adding a TableViewCell and an ImageView in the cell and setting its constraints.
3. Adding a label between the ImageView and the AccessoryType – checkmark and setting its constraints.
   在ImageView和AccessoryType之间添加标签-选中标记并设置其约束。
4. The ViewController.swift would contain another class CustomCell that implements the UITableViewCell protocol as shown below.

   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.
       }
   
   
   }

   ViewController.swift将包含另一个实现UITableViewCell协议的CustomCell类，如下所示。
5. Let’s link these classes with the storyboard.
   
   
   让我们将这些类与情节提要链接起来。
   

iOS自定义TableView示例代码 (iOS Custom TableView Example Code)

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

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

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","India","Malaysia", "Pakistan", "Russia", "South Africa", "United States of America"]
    
    var imageData = ["Australia", "Brazil", "Canada","China","Germany","India","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
            }
        }
        
    }
}

In the above code, we set the label and image from the labelData and imageData arrays respectively.
To check/uncheck a cell, we check the accessoryType attribute on the cell. If it’s equal to checkmark we toggle it to none and vice versa.

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

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

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

In case we want to allow single choice selection only we can use the below code:

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

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","India","Malaysia", "Pakistan", "Russia", "South Africa", "United States of America"]
    
    var imageData = ["Australia", "Brazil", "Canada","China","Germany","India","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
    }


}

In the above code, we override the functions didSelectRowAt as well as didDeselectRowAt to allow single choice selection. We can’t use tableView.deselectRow(at: indexPath, animated: true) to animate the selection anymore since that method is already being overridden. Hence we set the selectionStyle in the customCell as none:

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

required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        selectionStyle = .none
    }

The output of the above implementation is given below:

以上实现的输出如下：

This brings an end to this tutorial. You can download the final iOS CustomTableViewWithImagesAndCheckMarks Project from the link below.

本教程到此结束。 您可以从下面的链接下载最终的iOS CustomTableViewWithImagesAndCheckMarks项目 。

Download Swift TableView Example Project 下载Swift TableView示例项目

Reference: iOS Table View

参考： iOS表格视图

翻译自: https://www.journaldev.com/14180/ios-custom-tableview-images-checkmarks

ios cell点击对勾