在普通的UITableView中,如何将表头和第一个单元格分开?

33

我有一个只有一个区域且采用普通样式的表格。我已经实现了 viewForHeaderInSection: 以在区域头部添加自定义视图。

但是我无法看到我的表格区域头部视图和第一个单元格之间的分隔线。[请参见附加的图片]

alt text

我做错了什么?

6个回答

41

正如Jeremy在他的答案中提到的那样,iOS不会在页眉或页脚上方/下方添加分隔符;您可以使用UIView自己创建一条线。

以下是将一个标准外观的分隔符视图添加到页眉视图的代码:

CGRect sepFrame = CGRectMake(0, headerView.frame.size.height-1, 320, 1);
seperatorView = [[[UIView alloc] initWithFrame:sepFrame] autorelease];
seperatorView.backgroundColor = [UIColor colorWithWhite:224.0/255.0 alpha:1.0];
[headerView addSubview:seperatorView];

如果你想让它看起来像一个普通的表格视图单元格,那么你可能需要在头部视图的顶部添加一个。


1
谢谢,有用的代码片段。对于任何感兴趣的人,我已经将它放在我的View类中,用于自定义标题,在awakeFromNib()方法中。 - Tim
@Jeff 我也是这样做的。 - Siba Prasad Hota

35

自定义的页眉和页脚不包含分隔符。您需要在自定义视图中自己实现分隔符(或切换到分组样式,即使使用自定义页眉/页脚也会显示该组的轮廓线)。


2
如何切换到分组样式? - Imran
我可以移除/减小分隔符高度吗? - nr5
@Imran,UITableView 的其中一个初始化方法允许你做到这一点。 - Bartosz Kunat
已经分组,但分隔符仍然显示。 :( - AsifHabib

11

如果你想在表头和表格第一行之间添加间距,则可以使用

在方法tableView:heightForHeaderInSection:(NSInteger)section

if(section ==0)
    return 3; // (space u want to give between header and first row);

return 10; //(ur section header height)

tableView:viewForHeaderInSection:(NSInteger)section 方法中

  UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];
  headerView.backgroundColor = [UIColor clearColor];   // use your own design

  return headerView;

5
在你想要添加分隔符的部分中,通过在tableView:numberOfRowsInSection:中返回现有行数加+1的方式添加一个额外的“隐藏”行。然后添加以下方法:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if ( indexPath.section == sectionOfHiddenRow && indexPath.row == indexOfHiddenRow )
        return 0.f;
    else
        return [super tableView:tableView heightForRowAtIndexPath:indexPath];
}

如果您想在一个章节的顶部(在标题后面)放置分隔符,indexOfHiddenRow 将为 0。如果您希望将其放在一个章节的底部(在页脚之前),它将为 [self tableView:tableView numberOfRowsInSection:sectionOfHiddenRow] - 1

现在在 tableView:cellForRowAtIndexPath: 方法中,对于隐藏行只需返回 [UITableViewCell new] 即可(它不会被显示,因此不需要设置框架或任何内容)。您可能需要在您的 UITableViewDataSourceUITableViewDelegate 方法中进行一些 -1 的索引调整,但它可以工作(在 iOS 7 中测试过),并且可以保证一致的样式(无需绘制自己的“假”分隔符 - 这是一个真正由系统绘制的 UITableView 分隔符)。


1
好的,那个保持一致风格的部分让我信服了。+1 - Bianca Daniciuc
看起来像是一个黑客行为,但是却是个非常聪明的想法! - Shyam Bhat
这取决于你的视觉设计和情况,但对我来说这不起作用,因为带分隔符的第一行将在部分标题下滚动到屏幕外。通常,在标题后面放置分隔符会保持固定,不会随着行移动。 - Ken Ko

2
我已经用一些分隔方法(Swift语言)扩展了UITableViewCell。通过它们,我可以在标题中添加分隔符或从普通单元格中删除它们。希望这对某些人有所帮助。
public extension UITableViewCell
{
    func addSeparator(y: CGFloat, margin: CGFloat, color: UIColor)
    {
        let sepFrame = CGRectMake(margin, y, self.frame.width - margin, 0.7);
        let seperatorView = UIView(frame: sepFrame);
        seperatorView.backgroundColor = color;
        self.addSubview(seperatorView);
    }

    public func addTopSeparator(tableView: UITableView)
    {
        let margin = tableView.separatorInset.left;

        self.addSeparator(0, margin: margin, color: tableView.separatorColor!);
    }

    public func addBottomSeparator(tableView: UITableView, cellHeight: CGFloat)
    {
        let margin = tableView.separatorInset.left;

        self.addSeparator(cellHeight-2, margin: margin, color: tableView.separatorColor!);
    }

    public func removeSeparator(width: CGFloat)
    {
        self.separatorInset = UIEdgeInsetsMake(0.0, width, 0.0, 0.0);
    }

}

1
在头部视图的代理方法中添加一个分隔符,使其与第一行分开:- 在区域代理方法中的头部视图中添加一个子视图self.separator //@property (nonatomic, strong) UIImageView *separator;
- (CGFloat)tableView:(UITableView *)tableView
heightForHeaderInSection:(NSInteger)section {

return 41; 
}


- (UIView *)tableView:(UITableView *)tableView
viewForHeaderInSection:(NSInteger)section {

self.headerView = [[UIView alloc] init];
self.headerView.backgroundColor = [UIUtils colorForRGBColor:TIMESHEET_HEADERVIEW_COLOR];

self.separator = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"seperator.png"]];
self.separator.frame = CGRectMake(0,40,self.view.frame.size.width,1);
[self.headerView addSubview:self.separator];
return self.headerView;

}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接