如何增加UITableView分隔符高度?

问题描述 投票:46回答:15

我希望每个cell之间有更多的空间(10px)。我怎样才能做到这一点?

我添加了这段代码

tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
iphone uitableview
15个回答
10
投票

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

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


0
投票

Swift 4

无法使默认分隔符更高。相反,您需要添加一个子视图,该子视图将作为每个单元格的分隔符(并可选择使单元格更高)。例如,您可以在cellForRowAtIndexPathUITableViewCell子类中执行此操作。

如果您允许选择单元格,则还需要为选定状态添加子视图,否则在选择单元格时分隔符将消失。这就是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)
    }
}

0
投票

这是一个可能适用于某些人的选项

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

0
投票

解决此问题的最简单,最安全的方法是关闭表分隔符并使用UITableViewCell作为可变高度的分隔符。当然,你必须做一些索引数学来确定项目的位置,但实际上它是奇数/偶数。

它不会破坏,你可以获得可回收细胞的好处(没有无关的视图来清理)。


-1
投票

对于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)

}

-3
投票

我遇到了一种让我有效改变细胞之间差距的方法。

在“界面”构建器中,我将行高设置为46。

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

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

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

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


-34
投票

你应该实施

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

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


24
投票

对我来说最好的方法,只需在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()以避免重新创建。


22
投票

我已经看到许多笨重的解决方案,如将隐藏的单元格与UITableView子类化,以及其他不太理想的包括。在这个帖子里。

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

不要使用标准的UITableViewCell类,而是继承UITableViewCell类并覆盖其layoutSubviews方法。在调用super之后(不要忘记),将单元格本身的高度设置为所需的高度。

奖金更新18 / OCT / 2015:

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

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


7
投票

在斯威夫特

对我来说,最简单和最简单的方法是在cellForRowAtIndexPathwillDisplayCell中添加以下代码段:

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

6
投票

您可以在故事板中完全执行此操作。方法如下:

  • 转到故事板并选择tableview
  • 显示大小检查器,并从那里设置行高度为140。
  • 然后显示属性检查器,并从那里将分隔符设置为单行和样式平原并选择一种颜色
  • 然后在故事板(或文档大纲)中选择单元格
  • 再次在“大小检查器”中的“表视图单元格”下,将自定义行高设置为120。

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


4
投票

这是相当古老的。不过我会发布我的方法。

只需稍微增加单元格高度并为单元格指定一个遮罩层,如下所示:

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。

玩得开心!


3
投票

有点老线程,但由于我在这个帖子中只找到了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


2
投票

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

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

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

设置单元格的高度,这是行PLUS分隔符的大小:

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

并在cellForRowAtIndexPath中定义一个框,用行的大小(MINUS分隔符)绘制背景颜色:

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

1
投票

我这样做的方式更简单,更灵活。有些人可能称之为黑客攻击。我称之为务实。

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

您可能会质疑这在单元格层次结构中具有另一个UIView的效率。它真的会产生明显的差异吗?可能不是 - 无论如何,你只是从表层次结构中取出标准分隔符。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.