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

Question

我想使用具有不同自定义tableViewCells的UITableview.我的3个细胞是这样的:

• Cell1:应该有图像和标签.
• Cell2:应该有两个标签.
• Cell3:应该有dayPicker.

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

我想生成一个tableView,就像iOS设备的联系人应用程序一样.

Answer 1

首先让我回答你的问题.

我是否必须为每个单元格编写一个自己的类？=>是的,我相信如此.至少,我会这样做.

我可以使用一个tableviewController吗？=>是的,你可以.但是,您也可以在View Controller中拥有表格视图.

如何在不同的单元格中填充数据？=>根据条件,您可以在不同的单元格中填充数据.例如,假设您希望前两行与第一类单元格类似.因此,您只需创建/重用第一类单元格并设置其数据.我想,当我向你展示屏幕截图时,会更清楚.

让我举一个ViewController中的TableView示例.一旦理解了主要概念,那么无论如何都可以尝试修改.

第1步:创建3个自定义TableViewCells.我把它命名为FirstCustomTableViewCell,SecondCustomTableViewCell,ThirdCustomTableViewCell.你应该使用更有意义的名字.

第2步:转到Main.storyboard并在View Controller中拖放TableView.现在,选择表视图并转到身份检查器.将"Prototype Cells"设置为3.在这里,您只是告诉TableView您可能有3种不同的单元格.

步骤3:现在,在TableView中选择第一个单元格,在身份检查器中,将"FirstCustomTableViewCell"放在Custom类字段中,然后在属性检查器中将标识符设置为"firstCustomCell".

对所有其他人执行相同操作 - 分别将其自定义类设置为"SecondCustomTableViewCell"和"ThirdCustomTableViewCell".同时将标识符设置为secondCustomCell和thirdCustomCell.

第4步:编辑自定义单元格类并根据需要添加插座.我根据你的问题编辑了它.

PS:您需要将出口置于类定义之下.

所以,在FirstCustomTableViewCell.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)
    }
}

和ThirdCustomTableViewCell.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:在ViewController中,为TableView创建一个Outlet并从storyboard设置连接.此外,您需要在类定义中添加UITableViewDelegate和UITableViewDataSource作为协议列表.所以,你的班级定义应该像 -

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()
    }
}

PS:如果您在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()
    }
}

Answer 2

使用最少的代码更新Swift 3.0 +

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

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

将tableView拖到视图控制器,向其添加原型单元格,然后将UI元素拖放到表视图单元格中,如果需要,可以正确添加约束.

2.创建自定义UITableViewCell类

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

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

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

对于storyboard中的每个单元原型,分配从步骤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.试一试:)