9

我正在尝试将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 无济于事。

4

3 回答 3

9

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

uitable-view-grouped-style-borked

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

  1. One Row将两个点添加到单元格高度（视网膜上的默认高度为 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;
}
于 2013-07-14T19:00:59.373 回答
3

更新

事实证明，我对背景的看法是错误的，请参阅批准的回复。

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

原帖

我的猜测是，由于您正在尝试绘制自己的分隔符，tableView 用作“选定”背景的背景已经考虑到默认分隔符样式进行了缩放，我通过 put 复制了该问题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)

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

这是后者的图形解释，（我重用了我为公司设计师制作的一个文件并应用了您的尺寸）：

可拉伸图像

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

于 2013-07-11T06:55:09.680 回答
0

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

于 2013-07-10T21:42:59.930 回答