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

