iphone - UITableView 自定义标题（如 FoodSpotting 应用）

Question

有人可以解释这个应用程序（FoodSpotting）如何创建他们的自定义部分标题吗？它有一个半透明的黑色背景、用户图像和一些漂亮的文本（毫无疑问是从服务器加载的）。我的两个大问题是：

1. 应用程序如何在部分标题上获得漂亮的黑色半透明？ 2. 他们如何将那个小三角箭头附在标题上？

基于使用节标题的自定义视图，我几乎可以弄清楚其他所有内容。

Answer 1

Section header 是一个 UIView，就像任何其他的一样。您可以根据需要使用 Interface Builder 将其创建得漂亮、复杂或精致，等等。您的表委托tableView:viewForheaderInSection负责返回它，就像其他单元格行一样。

至于小三角形：是的，这让我们有点失望（我们想要在我们的应用程序中使用类似的东西），直到我们发现您可以通过“说谎”它的高度来将视图与行重叠：即tableView:heightForHeaderInSection:返回的值略小于它实际上是。可能不是“正确”的方式，但对我们来说效果很好。像这样：

所以标题实际上是一个完美的矩形，底部大部分是透明的，有一个小三角形“偷看”出来：

告诉 iOS 标题是 80px 高，像这样：

- (CGFloat) tableView:(UITableView *) tableView 
  heightForHeaderInSection:(NSInteger) section {
    return 80;
  }

它将开始在 80px 处绘制“食物”行。因为标题在顶部，并且由于标题底部的大部分是透明的，除了箭头，你应该得到这个效果。

Answer 2

我以不同的方式达到了预期的结果。我没有使用tableView:viewForheaderInSection:（这对我不起作用），而是添加了一个图像视图，该视图将箭头图像作为标题视图的子视图，并将框架设置在标题下方：

// Inside HeaderView.m

UIImageView *arrowImageView = [[UIImageView alloc] initWithImage:self.arrowImage];
arrowImageView.frame = CGRectMake(arrowX, frame.size.height, self.arrowImage.size.width, self.arrowImage.size.height);
[self addSubview:arrowImageView];
[arrowImageView release];

如果您仔细观察，Foodspotting.app 中有两个文件（following-captionbubble-dark.png 和 following-captionbubble-dark@2x.png），它们看起来与上面问题中显示的箭头完全相同。所以我猜他们可能使用了类似的技术。感谢 Foodspotting 团队。