Question

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

请快速提供您的代码。

Answer 1

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

让我们开始吧。我从头开始透过屏幕截图解释了整个过程。如果您只是遵循这一点，您将理解概念和过程。

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

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

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

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

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

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

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

我们还需要为他们提供唯一标识符。选择第一个单元格并指定标识符 -

对第二个细胞做同样的事情 -

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

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

现在，我们很高兴。

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

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.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 Delegate和Datasource。所以，让我们将它们包含在协议列表中，如 -

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

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

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

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

然后告诉你的tableView你将通过numberOfSectionsInTableView方法有两个部分，如 -

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

然后指定每个部分将保留多少个单元格。假设第1部分包含4行，第2部分包含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
    }

您可以使用这些委托方法进行更多自定义。查看Apple的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
}

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

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

2 个答案: