无法添加一致的高度和填充。动态表格视图单元格之间

Posted 2023-02-23

【中文标题】无法添加一致的高度和填充。动态表格视图单元格之间

【英文标题】：Unable to add consistent height and padding. between dynamic tableview cells

【发布时间】：2017-03-18 18:57:32

【问题描述】：

我正在尝试实现一个表格视图，该表格视图的左侧有一个产品图像的单元格，图像右侧的各种产品详细信息（如价格、标题等）列表，但是，我遇到了麻烦在单元格之间设置适当的间距/填充。我希望每个单元格之间都有一些空白。这是一张图片，显示了我到目前为止的情况以及问题所在。

TableView

我使用 stackview 作为包含产品详细信息的标签的容器，并且正在实现动态行高功能： self.tableView.rowHeight = UITableViewAutomaticDimension

一切似乎都很好，除了堆栈视图高度小于图像视图高度。我无法在那种情况下显示间距。在过去的 2 天里，我已经尝试了一切，这让我发疯。伙计们，请放轻松，因为我是 android 人 :)

我想要的只是我希望 tableview 单元格的分隔符在 imageview 的顶部和底部或 stackview 之间有一点空间（以更高/更高为准）。

我附上了故事板的 SS 以显示布局和约束。如果需要更多信息，请告诉我。

Storyboard

【问题讨论】：

为什么不去掉 UITableControl？使用嵌套的 UIStackViews？ “子堆栈”是水平的，包含您的单个产品视图（图像和详细信息），“主堆栈”是垂直的，包含产品列表？

【参考方案1】：

为您的单元格添加一致的间距更好的方法是将您的每个项目视为一个部分，因为您可以通过在部分之间创建标题视图来轻松设置部分之间的间距。 所以从逻辑上讲，如果您有 10 个对象，那么您将拥有 10 个部分，而 每个部分只有一行。

1.每个部分只有一行

 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return 1
    

2.section的数量等于item的count数组

func numberOfSectionsInTableView(tableView: UITableView) -> Int 
        return array.count 
    

3.设置间距/标题视图的高度

 func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat 
        return 10 
    

4.创建您的标题视图并对其进行自定义

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?       
       if let view = view as? UITableViewHeaderFooterView
      view.backgroundView?.backgroundColor = UIColor.clearColor()
       

【参考方案2】：

假设您为每个单元格设置适当的高度没有问题（如果有，您可能想检查这个Q&A），我建议让每个单元格放在一个部分而不是将它们添加到同一个单元格中。

技术：

默认情况下，如果你没有实现number​Of​Sections(in:​)，它会返回1。你应该：

实现它并让它返回数组数据源的数量-例如-（而不是在table​View(_:​number​Of​Rows​In​Section:​)中执行）。

让table​View(_:​number​Of​Rows​In​Section:​) 返回1。每个部分只有一个单元格。

之后，诀窍是为具有所需高度的部分（具有清晰的背景颜色）添加标题视图，高度将是部分之间的边距（在您的情况下为单元格）。你应该通过实现：

table​View(:​view​For​Header​In​Section:​) 和 table​View(:​height​For​Header​In​Section:​)。

代码将类似于：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate 
    // ...

    // MARK:- UITableViewDataSource
    func numberOfSections(in tableView: UITableView) -> Int 
        return dataSource.count
    

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return 1
    

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell-ID")

        // note that you should read from 'indexPath.section' instead of 'indexPath.row'
        let currentObejct = dataSource[indexPath.section]
    

    // MARK:- UITableViewDelegate
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
        // here, you can customize the header
        // or your case want to let it clear...
        let margin = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 20.0))
        margin.backgroundColor = UIColor.clear

        return margin
    

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat 
        return 20.0
    

    // ...

希望这会有所帮助。

【参考方案3】：

您可以尝试为水果图像设置顶部和底部约束，但它们必须是 >=，这样才不会弄乱您的自动布局

你的约束可能看起来像这样

【讨论】：

感谢大家的回答和回复，但我决定选择这个，因为它最容易实现，而且效果很好。再次感谢大家。

差不多。但这会导致stackview在比图像短时被拉伸。

【参考方案4】：

3 天后，我终于找到了一个我满意的解决方案，虽然它很笨拙，但在这一点上（处理这个问题的 3 天），我真的不在乎。我正在发布我的解决方案，以防将来对任何人有所帮助。

我最终将一个视图固定到 tableviewcell，最小高度为 130，以包含 imageview 和 stackview。因为我知道 tableviewcells 的最小高度是 120，所以 130 在顶部和底部给出了 5 的填充。我附上了我的故事板的屏幕截图：

Storyboard TableView