不同表视图节中的不同布局

Question

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

请给出你的代码，如果有的话，在快速。

Answer 1

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

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

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

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

​

​

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

​

​

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

​

​

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

现在，我们需要分配单元格的类，这样它就可以理解它应该对应于哪个类。选择情节提要中的第一个单元格，单击类检查器并分配其类-

​

​

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

​

​

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

​

​

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

​

​

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

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

​

​

现在，我们可以开始了。

让我们在前面创建的自定义TableViewCells中声明一些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()
    }
}

转到Storyboard，在第一个原型单元中添加一个图像和两个标签，并将它们与outlets连接起来。

​

​

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

设置好了就够了。让我们开始做一些真正的事情吧。转到您的控制器类，首先为您的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方法您将有两个部分，例如-

 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指南。

附言:为了美化，我在这里添加了一张图片。如果您以同样的方式实现，您应该会看到如下输出-

​

​

希望这能有所帮助。

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
}

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