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 UIKitclass 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 UIKitclass 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 = selftableView.delegate = selftableView.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! CustomCellcell.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 UIKitclass CustomCell : UITableViewCell{@IBOutlet var myImage: UIImageView!@IBOutlet var myText: UILabel!//For single choice selectionrequired 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 = selftableView.delegate = selftableView.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! CustomCellcell.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 selectionfunc 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项目 。

Reference: iOS Table View

参考： iOS表格视图

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

ios cell点击对勾