带图像和对勾的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 } }