UITableview带有多个带有Swift的自定义单元格

Question

我想将 UI 表视图与不同的自定义表视图单元一起使用。我的3个单元格是这样的：

• Cell1：应该有一个图像和一个标签。
• Cell2：应该有两个标签。
• Cell3：应该有一天选择器。

我不想为单元格编写标签代码。我如何在Swift中管理这些？我必须为每个单元格编写自己的类吗？我可以使用一个tableviewController吗？如何在不同的单元格中填充数据？

我想生成一个表视图，就像iOS设备的联系人应用程序一样。

Answer 1

我建议使用这个简单易用的库，我为表和集合视图做了。您可以根据需要添加任意数量的单元格类型，并且无需样板代码即可实现更干净的视图控制器。

https://github.com/deniskakacka/DKDataSources

对于第一张图片上的UI，ViewController中的所有代码如下：

lazy var dataSource = DKTableDataSource<CellType>(
    models: [
        DisclosureCellModel(title: "Disclosure 1", action: .action1),
        TextFieldCellModel(title: "TextField 1", placeholder: "Placeholder 1"),
        SwitchCellModel(title: "Switch 1", isOn: true),
        BannerCellModel(imageName: "placeholder"),
        SwitchCellModel(title: "Switch 2", isOn: false),
        BannerCellModel(imageName: "placeholder"),
        DisclosureCellModel(title: "Disclosure 2", action: .action2),
        TextFieldCellModel(title: "TextField 2", placeholder: "Placeholder 2"),
        BannerCellModel(imageName: "placeholder")
    ]
)

// in `viewDidLoad`
dataSource.registerCells(for: tableView)
tableView.dataSource = dataSource

Answer 2

基本概念：使用动态单元格原型创建表视图。为每个单元格原型分配标识符并创建自定义表视图单元格类。在表视图的委托方法中启动并显示自定义单元格。

1.在故事板上创建单元格

将一个tableView拖动到视图控制器中，向其中添加原型单元格，然后将UI元素拖放到表视图单元格中，如果需要，适当地添加约束。

2. 创建自定义 UI 表查看单元格类

将以下代码添加到项目中。我把它放在视图控制器类的正上方。

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

3.将自定义类和标识符分配给单元原型

对于序列图像板中的每个单元格原型，分配从步骤 2 创建的自定义类，然后输入唯一标识符。

4.将UI元素连接到swift代码

控件拖动表格视图并连接到视图控制器类。控件拖动在步骤1中添加到单元格原型的UI元素，并连接到相应的表格视图单元格类。

5.向视图控制器添加代码并控制表视图

使您的视图控制器符合表视图委托

class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

在 viewDidLoad 中，设置表视图的委托和数据源。

override func viewDidLoad() {
    super.viewDidLoad()

    self.tableView.dataSource = self
    self.tableView.delegate = self

}

最后，根据最低要求，添加两个委托方法来控制表视图。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "firstTableCell") as! FirstTableCell
        // Set up cell.label
        return cell
    } else if indexPath.row == 1 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "secondTableCell") as! SecondTableCell
        // Set up cell.button
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "thirdTableCell") as! ThirdTableCell
        // Set up cell.textField
        return cell
    }
}

6.试试看：）

Answer 3

让我先回答你的问题。

我必须为每个单元格编写自己的类吗=

我可以使用一个tableviewController吗=

如何在不同的单元格中填充数据？=

让我举一个在ViewController中使用TableView的例子。一旦你理解了主要的概念，你就可以试着去修改它。

步骤 1：创建 3 个自定义表视图单元格。我将其命名为，第一自定义表查看器，第二自定义表查看器，第三自定义表查看器。您应该使用更有意义的名称。

步骤2:进入Main.storyboard，在视图控制器中拖放一个TableView。现在，选择表格视图并转到身份检查器。将“原型单元格”设置为3。这里，您刚刚告诉您的TableView，您可能有3种不同的单元格。

第3步：现在，在TableView和标识检查器中选择第一个单元格，将“FirstCustomTableViewCell”放在Custom类字段中，然后在属性检查器中将标识符设置为“firstCustomCell”。

对所有其他类执行相同的操作-将它们的自定义类分别设置为“SecondCustomTableViewCell”和“ThirdCustomTableViewCell“。还将标识符连续设置为secondCustomCell和thirdCustomCell。

第4步：编辑自定义单元格类并根据您的需要添加出口。我根据您的问题进行了编辑。

页（page的缩写）学生:你需要把插座放在类别定义下。

因此，在第一个自定义查看器中.swift，在

class FirstCustomTableViewCell: UITableViewCell {

你会把你的标签和图像视图插座。

 @IBOutlet weak var myImageView: UIImageView!
 @IBOutlet weak var myLabel: UILabel!

在secondcustomtableviewcell . swift中，添加两个标签，如-

import UIKit

class SecondCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var myLabel_1: UILabel!
    @IBOutlet weak var myLabel_2: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

和第三个自定义表查看器.swift应该看起来像 -

import UIKit

class ThirdCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var dayPicker: UIDatePicker!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

步骤 5：在视图控制器中，为 TableView 创建一个“出口”，并从情节提要设置连接。此外，还需要在类定义中添加“UI 表视图代表”和“UI 表视图数据源”作为协议列表。所以，你的类定义应该看起来像——

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

之后，将表视图的UITableViewDelegate和UITableViewDatasource连接到控制器。此时您的viewController。swift应该看起来像-

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

P. S：如果您要在ViewController中使用TableViewController而不是TableView，您可以跳过此步骤。

步骤6：根据Cell类拖放单元格中的图像视图和标签，然后从情节提要提供与其出口的连接。

步骤7:现在，在视图控制器中编写UITableViewDatasource所需的方法。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "firstCustomCell")
            //set the data here
            return cell
        }
        else if indexPath.row == 1 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "secondCustomCell")
            //set the data here
            return cell
        }
        else {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "thirdCustomCell")
            //set the data here
            return cell
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}