如何在 iPhone 中自定义 tableView 分隔符

Question

默认情况下，uitableview 中有一个单行分隔符。

但我想把我自定义的行作为分隔符。

有可能吗？怎么样？

Answer 1

如果您想做的不仅仅是使用UITableView 的separatorColor 属性更改分隔符的颜色，那么您可以将separatorStyle 属性设置为UITableViewCellSeparatorStyleNone，然后：

• 创建自定义UITableViewCells，其中包含您的自定义分隔符
• 创建包含自定义分隔符的备用 [UITableViewCell][6]

例如，如果您的表格当前显示 5 行，您可以将其更新为显示 9 行，索引 1、3、5、7 处的行将是分隔单元格。

Answer 2

更好的解决方案是使用单元格的当前宽度和高度。像这样的：

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];

lineView.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview:lineView];

Answer 3

如果您需要为不同的行使用不同的分隔符颜色，或者您希望在点击时突出显示该行时分隔符保持可见，请尝试以下操作：

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

// We have to use the borderColor/Width as opposed to just setting the 
// backgroundColor else the view becomes transparent and disappears during 
// the cell's selected/highlighted animation
UIView *separatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 43, 1024, 1)];
separatorView.layer.borderColor = [UIColor redColor].CGColor;
separatorView.layer.borderWidth = 1.0;
[cell.contentView addSubview:separatorView];

这假定您的单元格的背景颜色是透明的。

---

上述解决方案来自一些广泛的实验。以下是关于我的发现的一些注释，我相信它们会对人们有所帮助：

处于正常的“未选中”状态

• contentView（您的 XIB 中的内容，除非您另外编写代码）正常绘制
• selectedBackgroundView 是隐藏的
• backgroundView 是可见的（所以如果你的 contentView 是透明的，你会看到 backgroundView 或者（如果你没有定义 backgroundView，你会看到 UITableView 本身的背景颜色）

选择了一个单元格，以下内容立即发生，没有任何动画：

• contentView 中的所有视图/子视图都将其背景颜色清除（或设置为透明）、标签等文本颜色更改为所选颜色
• selectedBackgroundView 变为可见（此视图始终是单元格的完整大小（忽略自定义框架，如果需要，请使用子视图）。还要注意子视图的背景颜色由于某种原因不显示，也许它们像 contentView 一样重新设置透明）。如果您没有定义 selectedBackgroundView，那么 Cocoa 将创建/插入蓝色（或灰色）渐变背景并为您显示）
• backgroundView 不变

当取消选择单元格时，将开始动画移除突出显示：

• selectedBackgroundView alpha 属性从 1.0（完全不透明）动画到 0.0（完全透明）。
• backgroundView 再次保持不变（因此动画看起来像是 selectedBackgroundView 和 backgroundView 之间的交叉淡入淡出）
• 只有在动画完成后，contentView 才会在“未选中”状态下重新绘制，并且其子视图背景颜色会再次可见（这可能会导致您的动画看起来很糟糕，因此建议您不要使用 UIView。 contentView 中的背景颜色）

Answer 4

这些答案导致突出显示的矩形被您添加到单元格的分隔符覆盖（至少在 iOS 6 上经过我的测试）。您需要将separatorColor 设置为[UIColor clearColor] 以使单元格仍然相隔1px，然后您可以在间隙中绘制分隔符：

- (void)viewDidLoad {
    self.tableView.separatorColor = [UIColor clearColor];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // snip
    CALayer *separator = [CALayer layer];
    separator.backgroundColor = [UIColor redColor].CGColor;
    separator.frame = CGRectMake(0, 43, self.view.frame.size.width, 1);
    [cell.layer addSublayer:separator];
    return cell;
}

Answer 5

您添加以下代码cellForRowAtIndexPath tableView 的委托来为everyCell创建一个高度为 1 像素、宽度为 200 像素的自定义图像视图

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)];
lineView.backgroundColor = [UIColor blackColor];
[cell.contentView addSubview:lineView];

注意：我不知道这对性能有多大影响。

Answer 6

我不知道这是否可以通过某些设置“自动”完成。但建议将行分隔符设置为无，并在单元格的边框中实际绘制您想要的行分隔符..

Answer 7

如果您在 Swift 中使用自定义单元格：另一种方法是使用可以在该单元格顶部绘制一条线的函数来扩展 UITableViewCell。

import UIKit

extension UITableViewCell {
    func addSeparatorLineToTop(){
        let lineFrame = CGRectMake(0, 0, bounds.size.width, 1)
        let line = UIView(frame: lineFrame)
        line.backgroundColor = UIColor.myGray_300()
        addSubview(line)
    }
}

然后您可以将此行添加到任何自定义单元格中，例如在 awakeFromNib 中

override func awakeFromNib() {
    super.awakeFromNib()
    addSeparatorLineToTop()
}

这个解决方案很好，因为它不会弄乱您的故事板并将您的额外代码限制为 1 行。

Answer 8

在 Retina 显示器上，由于抗锯齿，即使绘制 0.5 个单位的线也会产生两个像素的线。要将其渲染为两个显示器上的单个像素，请将其上移四分之一单位：

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, self.contentView.frame.size.height - (1.0 - 0.25), self.contentView.frame.size.wi
lineView.backgroundColor = [UIColor colorWithRed:(230.0/255.0f) green:(233/255.0f) blue:(237.0/255.0f) alpha:1.0f];
[self.contentView addSubview:lineView];

Answer 9

在 iOS 7 (GM) 上测试：

@implementation MyTableViewController

- (void)viewDidLayoutSubviews {
    for (UIView *view in self.view.subviews) {
        if ([view isKindOfClass:NSClassFromString(@"_UITableViewCellSeparatorView")])
            view.backgroundColor = [UIColor redColor];
    }
}

@end

注意：在某些配置中，UITableView 将 分隔符移动到单元格，这将导致此代码无法工作，除非您也进入所有 UITableViewCells。

Answer 10

Swift 版本：

private let kSeparatorTag = 123
private let kSeparatorHeight: CGFloat = 1.5

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath)
{
    if cell.viewWithTag(kSeparatorTag) == nil //add separator only once
    {
        let separatorView = UIView(frame: CGRectMake(0, cell.frame.height - kSeparatorHeight, cell.frame.width, kSeparatorHeight))
        separatorView.tag = kSeparatorId
        separatorView.backgroundColor = UIColor.redColor()
        separatorView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        cell.addSubview(separatorView)
    }
}

Answer 11

下面 gist 中的单元格是 UITableViewCell 的子类，其中每个单元格可以有自己的分隔符和多种样式（目前仅支持 .None 和 .Default ）。 它是用 Swift 编写的，并假定使用 Autolayout。

https://gist.github.com/evgeniyd/fa36b6f586a5850bca3f

如何使用类：

1. 将 UITableView 对象的分隔符样式设置为UITableViewCellSeparatorStyle.None

   tableView.separatorStyle = .None
   

2. 创建MPSTableViewCell的子类

3. awakeFromNib() 内部某处设置单元格的分隔符样式

注意：下面的代码假设单元格是从 xib/storyboard 加载的

    class FASWorkoutCell: FASTableViewCell {

    required init(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
     }

     override func awakeFromNib() {
         super.awakeFromNib()

         separatorType = .Default
     }

     // ...

     }

Answer 12

如果你使用自定义的 UITableViewCell，你可以简单的在 UItableViewCell.xib 的底部添加 UIView 并将背景颜色设置为你想要的颜色。

例如，在 xib 上，我在底部添加了一个 UIView，并将高度设置为 1。使用自动布局，我将左侧约束设置为 12，底部约束设置为 0，右侧约束设置为 0，高度设置为 1。