UIEdgeInsetsMake在单元格上创建一个奇怪的乐队，我不知道如何解决它

Question

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

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

热门

底

底部顶部有一条缺失线，因此它们之间没有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)的边缘插入，因为它只在顶部舍入，bottom属性不需要考虑（它是平的）。这很完美！除非您选择单元格，否则底部单元格不再占用其整个单元格。

我该怎么办？似乎无论我做什么，它都行不通。我也试过1.0而不是0.0，以及-1.0也无济于事。

Answer 1

好消息：你不会发疯。您的可伸缩图像代码可能是完美的。问题是，带有分组样式的UITableView除了>在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如何做到这一点：

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

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

这是令人沮丧的，据我所知从未记录过。 ： - ）

<强>更新

上面的计算是针对使用默认分隔符样式UITableViewCellSeparatorStyleSingleLineEtched的分组样式表视图。以下是其他案例（即UITableViewCellSeparatorStyleSingleLine和UITableViewCellSeparatorStyleNone）：

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

Answer 2

更新

事实证明，我对背景错了，请参阅已批准的回复。

另一方面，添加分隔符不会“解决”问题，但它隐藏得非常好，所以我的答案在这个意义上可能仍然有效。

原帖

我的猜测是，既然你正在尝试绘制自己的分隔符，那么tableView用作“选定”背景的背景已经根据默认分隔符样式进行了缩放，我通过放置UITableViewCellSeparatorStyleNone来复制问题，涂成不同颜色的细胞：

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

另外，既然我们谈论的是一个可伸缩的资产，你应该考虑到可拉伸图像采用的是“这边应该固定”，中心区域，四处复制粘贴，所以，要有一个真正可伸缩的图形，你应该做类似的事情：

// 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)

这里的关键是，它只留下一个像素高的重复图案，这将是一个纯色，然后边框有适当的淡入淡出。

以下是后者的图解说明（我重复使用了我为公司设计师制作的一个文件并应用了您的尺寸）：

（注意细胞之间的细小红线）

Answer 3

在your debugger output中，第二个SettingsCell的高度为45分，而不是预期的44分。请注意，这是输出中的第二个，但它实际上以相反的顺序显示，这实际上是第一个表格单元格（您可以从单元格的帧值中看到，这一个是y = 46而另一个是是在y = 91）。

我认为这会导致你的第一个单元格在第二个截图中的背景错位（以及你在第一个截图中描述的白色带的拉伸，虽然我个人无法注意到它）并且你可以通过确保您的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）应该看起来一样，因为当位图的高度和帧的高度完全匹配时，根本没有垂直拉伸。