UIEdgeInsetsMake在单元格上创建了一个奇怪的条带，我不知道如何修复它。

Question

我正在尝试使用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)，因为它只在顶部是圆角的，所以无需考虑bottom属性（它是平的）。这样做完美地解决了问题！但是当你选择该单元格时，底部单元格不再占据整个单元格。

我该怎么办？似乎无论我做什么，都不起作用。我还尝试过使用1.0代替0.0，以及-1.0，但都没有效果。

- Doug Smith

---

你是否将行高设置为背景图像视图的高度？ - Mattias Farnemyhr

在此表视图屏幕上暂停您的应用程序，然后在调试器中键入：po [[[UIApplication sharedApplication] keyWindow] recursiveDescription]。将输出粘贴在这里。 - Robert Wijas

是的，两者高度都是44，materik。Robert，它在这里可用：https://gist.github.com/anonymous/2ad5556bceb6cd4666ed - Doug Smith

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. 一个单元格 会将单元格的高度增加两个点（在Retina上，默认高度为92像素）。
2. 两个单元格 会将第一个和最后一个单元格的高度各增加一个点（在Retina上，默认高度为90像素）。
3. 三个单元格 会将第一个和最后一个单元格的高度各增加一个点（在Retina上，默认高度为90像素）。中间的单元格不受影响。

这真是让人沮丧，而且据我所知从未被记录下来。 :-)

更新

以上计算结果针对的是使用UITableViewCellSeparatorStyleSingleLineEtched默认分隔符样式的分组样式表视图。以下是其他情况下（即UITableViewCellSeparatorStyleSingleLine和 UITableViewCellSeparatorStyleNone）应采取的措施：

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

- jaredsinclair

---

兄弟，如果我能在这个问题上给你+100分，我甚至不会犹豫！ - abbood

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)

关键在于这里只留下一个像素高的重复图案，它将成为一个纯色，然后边框有适当的渐变。

以下是后面内容的图解（我重新使用了一份公司设计师制作的文件并应用了您的尺寸）：

（请注意单元格之间的微小红线）

- Can

---

谢谢你让我认识到这个“可伸缩性”的世界，这对我肯定会有所帮助。+1 - abbood

请注意，从iOS 6开始，您可以选择拉伸内部区域而不是“复制粘贴”它。请参见resizableImageWithCapInsets：resizingMode：。 - Zev Eisenberg

Answer 3

在 调试器输出 中，第二个 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）应该看起来相同，因为当位图的高度和框架的高度完全匹配时，没有任何垂直拉伸。

- Clafou