如何增加 UITableView 分隔符高度？

Posted 2023-02-27

技术标签:

【中文标题】如何增加 UITableView 分隔符高度？【英文标题】：How to increase the UITableView separator height? 【发布时间】：2010-08-19 11:34:46 【问题描述】：

我希望每个cell 之间有更多空间（10 像素）。我该怎么做？

我已经添加了这段代码

tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

【问题讨论】：

如果在构建 tableview 的数据源时只有一个部分，您可以将 N 行更新为 N 个部分（每个部分只有一行）并使用部分标题作为分隔符. 请通过下面的链接你会得到最好的解决方案...！ ***.com/questions/44711612/… 【参考方案1】：

对我来说最好的方法，只需将其添加到 cellForRowAtIndexPath 或 willDisplayCell 中

CGRect sizeRect = [UIScreen mainScreen].applicationFrame;    
NSInteger separatorHeight = 3;
UIView * additionalSeparator = [[UIView alloc] initWithFrame:CGRectMake(0,cell.frame.size.height-separatorHeight,sizeRect.size.width,separatorHeight)];
additionalSeparator.backgroundColor = [UIColor grayColor];
[cell addSubview:additionalSeparator];

对于 Swift 3.0：

let screenSize = UIScreen.main.bounds
let separatorHeight = CGFloat(3.0)
let additionalSeparator = UIView.init(frame: CGRect(x: 0, y: self.frame.size.height-separatorHeight, width: screenSize.width, height: separatorHeight))
additionalSeparator.backgroundColor = UIColor.gray
self.addSubview(additionalSeparator)

您应该将此添加到单元格的方法 awakeFromNib() 以避免重新创建。

【讨论】：

您需要在再次添加之前检查您是否添加了additionalSeparator，因为 cellForRow... 和 willDisplayCell 可以为单个单元格多次调用，因为单元格重用。随着用户滚动表格的次数越来越多，这将导致您的性能下降。 @ikuramedia，查看项目。我在 awakeFromNib 方法中的 tableViewCell 子类中添加了额外的分隔符。当我滚动 tableView 时不会调用它。无论如何，应该小心，谢谢。嗨@ikuramedia。感谢您的反馈意见。但我关于他最后评论的问题是，如果他还在单元格的 awakeFromNib 中添加子视图分隔符，是否会在 tableview 的 cellForRowAtIndexPath 方法之后调用，并为每个单元格调用.....因此它将子视图添加到重用的单元格也有性能问题？我认为 awakeFromNib 仅对从情节提要原型创建的单元格调用，并且只应在每个可重用单元格的初始创建时调用，因此这听起来是避免该问题的好方法。只要它不是也在 cellForRow 或 willDisplayCell 中创建的！这似乎不适用于高度可变的单元格（例如，其中包含多行标签），因为在布局完成之前添加了分隔符。【参考方案2】：

我见过许多笨拙的解决方案，例如使用隐藏单元对UITableView 进行子类化，以及其他不太理想的解决方案，包括。在这个线程中。

初始化UITableView 时，将UITableView 的rowHeight 属性设置为等于= 单元格高度+ 所需分隔符/空间高度的高度。

不要使用标准的UITableViewCell 类，而是将UITableViewCell 类作为子类并覆盖其layoutSubviews 方法。在那里，在调用super（不要忘记）之后，将单元格本身的高度设置为所需的高度。

2015 年 10 月 18 日奖金更新：

你可以在这方面有点聪明。上面的解决方案基本上将“分隔符”放在单元格的底部。真正发生的是，行高由 TableViewController 管理，但单元格的大小被调整为低一点。这导致分隔符/空白空间位于底部。但是您也可以将所有子视图垂直居中，以便在顶部和底部留下相同的空间。例如 1pt 和 1pt。

您还可以在您的单元子类上创建 isFirst、isLast 便利属性。您可以在 cellForRowAtIndexPath 中将这些设置为 yes。这样，您可以在 layoutSubviews 方法中处理顶部和底部分隔符的边缘情况，因为它可以访问这些属性。这样你就可以处理顶部或底部的边缘情况——因为有时设计部门想要 N+1 个分隔符，而单元格的数量只有 N。所以你必须以特殊方式处理顶部的或引导的.但最好在单元格中执行此操作，而不是 tableViewHeader 或 TableViewFooter。

【讨论】：

嗨@EarlGrey。据我了解，自定义单元格的 layoutSubviews 是在 tableview 调用 heightForRowAtIndexPath 和 cellForRowAtIndexPath 之后调用的。那么在 layoutSubviews 中设置每个单元格的高度是否会重置它，无论它是新单元格还是重复使用的单元格？如果是这样，如果您要重置重用单元格的高度，这会导致动态表格视图的性能问题吗？为了我自己的知识，想深入了解细节。感谢您的反馈。【参考方案3】：

我认为使用标准 API 是不可能的。我猜你需要继承 UITableViewCell 并在单元格底部添加一个模拟分隔符的视图。

您可能想检查这个问题，它似乎相关并且有一些示例代码： iPhone + UITableView + place an image for separator

【讨论】：

【参考方案4】：

在 斯威夫特

对我来说最简单和最短的方法是在cellForRowAtIndexPath 或willDisplayCell 中添加下面的sn-p：

override func tableView(tableView: UITableView,
                        willDisplayCell cell: UITableViewCell,
                        forRowAtIndexPath indexPath: NSIndexPath)

        let additionalSeparatorThickness = CGFloat(3)
        let additionalSeparator = UIView(frame: CGRectMake(0,
                                                           cell.frame.size.height - additionalSeparatorThickness,
                                                           cell.frame.size.width,
                                                           additionalSeparatorThickness))
        additionalSeparator.backgroundColor = UIColor.redColor()
        cell.addSubview(additionalSeparator)

【讨论】：

不要像上面那样添加单元格！您为每个“重用”关闭单元格添加一个子视图。在添加之前标记子视图并获取 viewWithTag:TAG: 如果为零，则继续标记和添加。对于标签，请参见此处，例如：developer.apple.com/library/ios/documentation/UserExperience/… 在委托方法上将子视图添加到 UITableViewCell 绝不是一个好主意。如果您需要添加子视图，请将其子类化并添加到您的子类中。 CGRectMake 和 UIColor.redColor() 在 Swift 3 中不再被支持。此外，即使我们将 syntex 更改为 swift3.0 ，它也会在单元格内而不是在其后添加红线。有没有办法在单元格之后添加分隔符？【参考方案5】：

您可以完全在情节提要中完成此操作。方法如下：

转到情节提要并选择表格视图显示尺寸检查器，然后将行高设置为 140。然后显示 Attributes Inspector，然后将分隔符设置为 Single Line and Style Plain 并选择一种颜色然后在情节提要（或文档大纲）中选择单元格再次在 Size Inspector 中的 Table View Cell 下，将自定义行高设置为 120。

就是这样。您的分隔符将是 20 个单位高。

【讨论】：

不适用于动态单元格，使用 Swift + iOS 8.3 + Xcode 版本 6.3.2。【参考方案6】：

这已经很老了。不过我会发布我的方法。

只需稍微增加单元格高度并为单元格分配一个遮罩层，如下所示：

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

    // Configure the cell...
    let maskLayer = CAShapeLayer()
    let bounds = cell.bounds
    maskLayer.path = UIBezierPath(roundedRect: CGRect(x: 2, y: 2, width: bounds.width-4, height: bounds.height-4), cornerRadius: 5).cgPath
    cell.layer.mask = maskLayer

    return cell

所以在本例中，我的分隔符高度为 4。

玩得开心！

【讨论】：

编辑：这会导致行操作消失【参考方案7】：

有点老线程，但因为我只在这个线程中找到了 hacky 解决方案，这里是最适合我的解决方案（每个单元格中没有额外的 UIView）

斯威夫特 3：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 

    //configure your cell...

    cell.layer.shadowColor = UIColor.red.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 1)
    cell.layer.shadowOpacity = 1
    cell.layer.shadowRadius = 0
    cell.layer.masksToBounds = false

    return cell

编辑：不幸的是，如果您在表格中向上滚动，这将不起作用。无论如何，我将答案留在这里，因为如果您的表格内容有限，这可能是一个解决方案。

请参阅Shadow on a UITableViewCell disappears when scrolling 了解更多信息。

【讨论】：

今天我注意到，当我在 tableView 中向上滚动时，此解决方案不起作用:(【参考方案8】：

对于高度为 50 且行间间距为 5 像素的表格单元格。宽度为 320。

定义要清除的单元格背景：

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
    cell.backgroundColor = [UIColor clearColor];

设置单元格的高度，这是行的大小加上分隔符：

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    return 55;

并在 cellForRowAtIndexPath 中定义一个框，用行的大小（减号分隔符）来绘制背景色：

UILabel *headerBackgroundLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,50)];
backgroundBox.backgroundColor = [UIColor grayColor];
[cell addSubview:backgroundBox];

【讨论】：

【参考方案9】：

我用一种更简单、更灵活的方式来做这件事。有些人可能称之为黑客。我称之为务实。

我隐藏了标准的 UITableViewSeparator。然后我向我的单元格添加一个子视图，使用自动布局将其固定到顶部。将高度固定到我想要的高度。将其固定到边缘，两边都有边距。改变它的背景颜色。我有一个我想要的高度的普通分隔符。

您可能会质疑在单元格层次结构中使用另一个 UIView 的效率如何。它真的会产生明显的不同吗？可能不是 - 无论如何，您只是将标准分隔符从表层次结构中取出。

【讨论】：

与其他单元格相同。我也使用表头作为上边距，所以这可能会有所不同。我也做了同样的事情。我在 XIB 的顶部和底部添加了一个 UIView，每个 4 像素，因此“分隔符”将是 8 像素。【参考方案10】：

斯威夫特 4

无法将默认分隔符设置得更高。相反，您需要添加一个子视图，该子视图将作为每个单元格的分隔符（并且可以选择使单元格更高）。例如，您可以在 cellForRowAtIndexPath 或 UITableViewCell 子类中执行此操作。

如果您允许选择单元格，您还需要添加选中状态的子视图，否则选择单元格时分隔符会消失。这就是为什么selectedBackgroundView也被配置了。

将此添加到您的 UITableViewController 子类中：

override func viewDidLoad() 
    super.viewDidLoad()
    tableView.separatorStyle = .none


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

    cell.backgroundView = UIView(backgroundColor: .white)
    cell.backgroundView?.addSeparator()

    cell.selectedBackgroundView = UIView(backgroundColor: .blue)
    cell.selectedBackgroundView?.addSeparator()

    // configure the cell

    return cell

将此扩展添加到底部的同一文件中：

private extension UIView 
    convenience init(backgroundColor: UIColor) 
        self.init()
        self.backgroundColor = backgroundColor
    

    func addSeparator() 
        let separatorHeight: CGFloat = 2
        let frame = CGRect(x: 0, y: bounds.height - separatorHeight, width: bounds.width, height: separatorHeight)
        let separator = UIView(frame: frame)
        separator.backgroundColor = .gray
        separator.autoresizingMask = [.flexibleTopMargin, .flexibleWidth]

        addSubview(separator)

【讨论】：

【参考方案11】：

这是一个可能对某些人有用的选项

cell.layer.borderColor = UIColor.white.cgColor
cell.layer.borderWidth = 4.0
cell.layer.masksToBounds = true

【讨论】：

【参考方案12】：

解决这个问题最简单和最安全的方法是关闭表格分隔符并使用 UITableViewCell 作为可变高度的分隔符。当然，您必须进行一些索引数学运算才能确定项目的位置，但实际上它是奇数/偶数。

它不会损坏，并且您可以从可回收电池中受益（无需清理多余的视图）。

【讨论】：

【参考方案13】：

这是我找到的最简单的解决方案：

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? 
    " "

然后只需将高度设置为您想要的任何值：

tableView.sectionHeaderHeight = 30.0

【讨论】：

【参考方案14】：

首先从情节提要中制作 tableview 分隔符 none。然后使用情节提要或 Xib 在高度（您需要）的单元格底部添加UILabel/UIView

【讨论】：

【参考方案15】：

对于 Swift 4

实施了 King-Wizard 对 Swift 4 的解决方案：

public func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) 
    let additionalSeparatorThickness = CGFloat(4)

    let additionalSeparator = UIView(frame: CGRect(x: 0,
                                                   y: cell.frame.size.height - additionalSeparatorThickness, width: cell.frame.size.width, height: additionalSeparatorThickness))
    additionalSeparator.backgroundColor = UIColor.groupTableViewBackground
    cell.addSubview(additionalSeparator)

【讨论】：

您实施了错误的解决方案。每次重复使用和显示单元格时，都会创建一个额外的子视图。【参考方案16】：

我发现了一种方法，可以有效地改变细胞之间的间隙。

在界面生成器中，我将行高设置为 46。

在我的 TableView 委托的 cellForRowAtIndexPath 方法中，我将单元格的框架设置为较小的值。

cell.frame=CGRectMake(44,0,tableView.bounds.size.width,44)

这给了我一个高度为 44 的单元格，它适合 tableView 的宽度，但为行提供的空间将是 IB 中定义的 46。

无论如何，我都是以编程方式填充单元格，所以这很适合我。

【讨论】：

【参考方案17】：

你应该实施

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

委托方法。并在那里返回 100.0。

【讨论】：

以上是关于如何增加 UITableView 分隔符高度？的主要内容，如果未能解决你的问题，请参考以下文章

如何增加UITableView分割线的高度呢？

当单元格获得自定义高度时如何自定义 UITableView 分隔符

如何增加 UItableviewcell 内的 UItableview 高度？

使用Objective C增加单元格数量时如何动态增加UITableView高度？

如何在 swift 中增加 ScrollView 中的 UITableView 高度

如何使用Objective C在UItableView中增加UIView高度？