不同表格视图部分中的不同布局

Question

嗨，我想在 UITableView 的不同部分有不同的布局，我想使用动态原型单元格而不是使用静态单元格来做到这一点。我不知道如何创建它，请帮助。任何链接什么的。我想实现这样的，请看图片 请下载图片

如果有的话，请快速提供您的代码。

Answer 1

根据您的详细信息，您似乎想要一个分组的 tableView，其中您的不同部分将具有不同类型的单元格。这很容易。

那么让我们开始吧。我通过屏幕截图从头开始解释了整个过程。如果你只是按照这个，你就会理解这个概念和过程。

（我假设您知道如何添加必要的约束）

首先，转到 Storyboard 并在 Controller 中拖动一个 tableView。

然后创建 2 个自定义 UITableViewCell 类-

现在在故事板中的 TableView 中拖放 2 个 TableView 单元格。

因此，您的 TableView 中有 2 个 tableView 单元格，您已经为其创建了两个自定义单元格。

现在，我们需要分配单元格类，以便它可以了解它应该对应哪个类。选择故事板中的第一个单元格，单击类检查器并分配其类-

对第二个单元格做同样的事情 -

我们还需要给他们唯一的标识符。选择第一个单元格并分配一个标识符，如 -

对第二个单元格做同样的事情 -

我们几乎完成了 UI 的设置。最后一部分是告诉 UITableView 它将是一个“组”类型。

再次选择 TableView 并将其类型分配给“组”，例如-

现在，我们可以走了。

让我们在之前创建的自定义 TableViewCell 中声明一些 IBOutlets。

TypeOneTableViewCell.swift 类-

import UIKit

class TypeOneTableViewCell: UITableViewCell {

    @IBOutlet weak var cellImageView: UIImageView!
    @IBOutlet weak var cellTitleLabel: UILabel!
    @IBOutlet weak var cellSubtitleLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

    }
}

和 TypeTwoTableViewCell.swift 类-

import UIKit

class TypeTwoTableViewCell: UITableViewCell {

    @IBOutlet weak var cellTitleLabel: UILabel!
    @IBOutlet weak var cellSubtitleLabel: UILabel!
    @IBOutlet weak var cellButton: UIButton!


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

转到情节提要并在第一个原型单元格中添加一个图像和两个标签，并将它们与插座连接。

现在在第二个单元格中，添加一个按钮和两个标签，并像以前一样连接出口-

设置就够了。让我们开始做一些真正的事情。转到您的控制器类并首先为您的 tableView 创建一个 IBOutlet，例如-

  @IBOutlet weak var groupedTableView :UITableView!

不要忘记在故事板中附加 TableView 的插座。

现在，我们需要 TableView 委托和数据源。因此，让我们将它们包含在协议列表中，例如-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

现在，您可能会收到错误消息，因为您尚未实现 UITableViewDatasource 协议中所需的委托方法，但没关系，很快就会解决。

先说第一件事。指定谁将实现委托和数据源方法。转到您的viewDidLoad方法并添加此 -

    override func viewDidLoad() {
        super.viewDidLoad()
        self.groupedTableView.dataSource! = self
        self.groupedTableView.delegate! = self
    }

然后告诉您的 tableView 您将通过该numberOfSectionsInTableView方法获得 2 个部分，例如-

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

然后指定每个部分将包含多少个单元格。假设第一部分包含 4 行，第二部分包含 3 行。为此，请使用该numberOfRowsInSection方法。

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{                                                                                  
        if section == 0{
            return 4
        }
        else{
            return 3
        }
    }

最后一部分，定义单元格和它的数据-

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        if indexPath.section == 0{
            let cell : TypeOneTableViewCell = tableView.dequeueReusableCellWithIdentifier("typeOneCell", forIndexPath: indexPath) as! TypeOneTableViewCell

            cell.imageView!.image = UIImage(named: "noImage.png")
            cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            return cell
        }
        else{
            let cell : TypeTwoTableViewCell = tableView.dequeueReusableCellWithIdentifier("TypeTwoCell", forIndexPath: indexPath) as! TypeTwoTableViewCell

            cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            return cell

        }
    }

你去吧！TableView 有许多委托方法，例如heightForRowAtIndexPath指定自定义单元格的高度。就我而言，我将其指定为 80.0 之类的-

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 80.0
    }

您可以使用这些委托方法进行更多自定义。检查苹果的 UITableView 指南。

PS：为了美化，我在这里添加了一张图片。如果你以同样的方式实现，我做到了，你应该看到这样的输出——

希望这可以帮助。