UITableView自定义标题(如FoodSpotting应用程序)

在这里输入图像说明

有人可以解释这个应用程序(FoodSpotting)如何创build自定义节标题? 它有一个半透明的黑色背景,用户的图像和一些不错的文本(毫无疑问,从服务器加载)。 我的两大问题是:

1.该应用程序如何在节标题上获得漂亮的黑色半透明效果? 2.他们如何获得标题上的小三angular箭头?

我几乎可以根据使用节标题的自定义视图找出其他的一切。

部分头是一个UIView就像任何其他。 你可以使用Interface Builder来创build它,如同你喜欢的一样美丽,复杂或者精心制作,等等。你的table委托的tableView:viewForheaderInSection负责返回它,就像其他单元行一样。

至于这个小三angular形:是的,这让我们有点(我们想要在我们的应用程序中类似的东西),直到我们发现,你可以通过“说谎”关于它的高度重叠视图与行:即tableView:heightForHeaderInSection:返回一个价值略低于实际情况。 可能不是“正确的”方式,但对我们来说工作得非常好。 喜欢这个:

在这里输入图像说明

所以标题实际上是一个完美的矩形,大部分在底部透视,一个小小的三angular形“窥视”:

在这里输入图像说明

告诉iOS头是80px高,像这样:

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

它将开始绘制80px的“食物”行。 由于标题在顶部,并且因为大多数标题底部除了箭头外都是透明的,所以您应该得到这个效果。

我以不同的方式达到了预期的结果。 而不是使用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团队的荣誉。