不同 Table 视图部分中的不同布局

Question

您好，我想在 UITableView 的不同部分使用不同的布局，我想使用动态原型单元而不是静态单元来实现。我不知道如何创建它，请帮助。任何链接或东西。我想这样实现，请看图片 pls download the pic

swift.

如果有的话请给出你的代码

Answer 1

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

那么让我们开始吧。我通过屏幕截图从头开始解释了整个过程。只要跟着这个，你就会明白这个概念和过程。

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

首先，转到 Storyboard 并在控制器中拖动一个 tableView。

然后创建2个Custom UITableViewCell classes-

现在将 2 个 TableView 单元格拖放到情节提要中的 TableView 中。

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

现在，我们需要给单元格class赋值，这样它才能明白自己应该对应哪个class。 Select 故事板中的第一个单元格，单击 class 检查器并指定其 class-

对第二个单元格执行相同操作 -

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

对第二个单元格执行相同的操作 -

我们几乎完成 UI 的设置。最后一块是告诉 UITableView 它将成为 "Group" 类型。

再次 select TableView 并将其类型分配给 "Group" like-

现在，我们可以开始了。

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

TypeOneTableViewCell.swift class-

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.swiftclass-

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

转到 Storyboard 并在第一个原型单元格中添加一个图像和两个标签，并将它们附加到插座上。

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

设置完毕。让我们开始做一些实际的事情。转到您的控制器 class 并首先为您的 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 like-

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

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

指南

P.S。 : 为了美化，我在这里加了一张图。如果你以同样的方式实现，我做到了，你应该看到像-

这样的输出

希望对您有所帮助。

Answer 2

要使单元格动态，请执行以下操作：

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    if (indexPath.row==0 && indexPath.section==0){
        //static cell
        return 120 //static height
    }

    return UITableViewAutomaticDimension //for dynamic cell height
}

func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return UITableViewAutomaticDimension
}

此外，您需要确保单元格中的元素与自动布局绑定，以便正确放置具有动态高度的元素。

不同 Table 视图部分中的不同布局

Different Layout in different Table view sections

uitableview

sections

ios9

swift2