UIEdgeInsets在单元格上创build一个奇怪的乐队,我不知道如何解决它

我正在尝试使用UIEdgeInsetsMake将我的单元格的背景设置为渐变。 我已经尝试过多种方法来实现它,但是无论我使用什么,总会有一个问题。

我只是有两个静态单元格,我试图在willDisplayCell:设置他们的backgroundView 。 我有单独的图片的顶部,底部和中间的单元格,但由于我有两个单元格,我只需要顶部和底部。 这些是这些图像:

最佳

在这里输入图像说明

底部

在这里输入图像说明

在底部的顶部有一个缺失的线条,所以它们之间没有2pt线。 我稍微调整了底部的高度以补偿(高出1pt)。 这些图像是44x44pt。

我把它们设置如下:

 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { UIImageView *topCellBackgroundImageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"grouped-cell-bg-top"] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]]; cell.backgroundView = topCellBackgroundImageView; } // If it's the last row else if (indexPath.row == ([tableView numberOfRowsInSection:0] - 1)) { UIImageView *bottomCellBackgroundImageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"grouped-cell-bg-bottom"] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]]; cell.backgroundView = bottomCellBackgroundImageView; } cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; } 

这不好。 正如你在下面的图片中看到的,在顶部单元格中,单元格上有一个1pt的白色“带”,看起来相当难看。 我不知道为什么在那里。

在这里输入图像说明

所以我改变了topCellBackgroundView(5.0, 5.0, 0.0, 5.0) topCellBackgroundView边缘插入,因为它只是在顶部舍入, bottom属性不需要考虑(它是平坦的)。 这完美的作品! 除了当你select单元格时,底部单元格不再将其整个单元格向上。

在这里输入图像说明

我应该做些什么? 看来不pipe我做什么都行不通。 我也尝试1.0而不是0.0,以及-1.0无济于事。

好消息:你不会发疯。 您的可伸缩图像代码可能是完美的。 问题是,UITableView分组样式除了heightForRowAtIndexPath:返回的值之外,还会为单元格的高度添加额外的点heightForRowAtIndexPath:

所以你的问题的解决scheme是在heightForRowAtIndexPath:返回一个调整后的单元格高度heightForRowAtIndexPath:根据该部分的总行数:

 - (CGFloat)heightForRow:(NSIndexPath *)indexPath { CGFloat standardHeight = 44.0f; NSInteger numberOfRowsInSection = [self numberOfRowsInSection:indexPath.section]; if (numberOfRowsInSection == 1) { standardHeight -= 2; } else if (indexPath.row == 0 || indexPath.row == numberOfRowsInSection-1) { standardHeight -= 1; } return standardHeight; } 

下面是一个示例图像,显示了UITableView如何执行此操作:

uitable  - 视图 - 分组式-borked

据我所知,只有分组样式表视图才会受到影响,即使这样,效果也会根据给定部分中的总行数而改变:

  1. 一行将两个点添加到单元格高度(默认高度是视网膜上的92像素)。
  2. 两行在第一行和最后一行的高度上添加一点(默认情况下视网膜上的高度为90像素)。
  3. 行将第一行和最后一行的高度添加一个点(默认情况下视网膜上每个高度为90像素)。 中间的行不受影响。

据我所知,这是如此令人沮丧,从未被logging在案。 🙂

更新

上面的计算是针对使用UITableViewCellSeparatorStyleSingleLineEtched的默认分隔符风格的分组样式表视图。 下面是在其他情况下做什么(即UITableViewCellSeparatorStyleSingleLineUITableViewCellSeparatorStyleNone ):

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { CGFloat rowHeight = 44.0f; if (indexPath.row == 0) { rowHeight -=1; } return rowHeight; } 

更新

事实certificate,我的背景是错误的,看到批准的答复。

另一方面,添加一个分隔符并不能“解决”这个问题,但它隐藏起来相当枯燥,所以我的答案在这个意义上可能仍然有效。

原帖

我的猜测是,因为你试图绘制自己的分隔符,tableView作为“选定”背景使用的背景已经缩放,考虑到默认的分隔符风格,我通过放置UITableViewCellSeparatorStyleNone复制问题,并用不同颜色绘制单元格:

两者之间的小红线

注意细胞之间的微小红线。 尝试设置分隔符的颜色( tableView.separatorColor )以匹配您的样式,并从资产中删除底线。

此外,由于我们谈论的是一个可伸缩的资产,因此您应该考虑可拉伸图像将“这一边应该固定”的插页和中心区域粘贴到四周,这样才能真正拉伸graphics,你应该做这样的事情:

 // For the top one UIEdgeInsetsMake(38.0, 5.0, 5.0, 5.0) // For the bottom one UIEdgeInsetsMake(5.0, 5.0, 38.0, 5.0) 

这里的关键是,这只剩下一个像素高的重复模式,这将是一个纯色,然后边界有适当的淡入淡出。

以下是后面的graphics说明(我为公司devise人员重新使用了一个文件,并应用了您的尺寸):

可伸缩的图像

(注意细胞之间的微红线)

在您的debugging器输出中 ,第二个SettingsCell的高度是45点,而不是预期的44。 请注意,这是输出中的第二个,但它实际上是以相反的顺序显示的,这实际上是第一个表格单元格(从单元格的框架值可以看出,这个单元格的y = 46,而另一个在y = 91)。

我相信这将导致你的第一个单元格的背景在第二个屏幕截图中不一致(并且拉伸负责你在第一个屏幕截图中描述的白色区域,尽pipe我个人不能注意到),你可以通过确保你的UITableViewCell被设置为正确的框架高度(44点)。 这不是在你的问题中包含的代码片段,但这很可能在你的– tableView:heightForRowAtIndexPath:方法。

一旦你解决了这个问题,(5.0,5.0,1.0,5.0)的边缘插入可能是你想要的,因为你不希望延伸一点底线。 但是(5.0,5.0,5.0,5.0)和(5.0,5.0,0.0,5.0)应该看起来相同,因为当位图的高度和帧的高度完全匹配时,根本没有垂直伸展。