UIEdgeInsetsMake 在单元格上创建了​​一个奇怪的带，我不知道如何修复它 [英] UIEdgeInsetsMake creating a weird band on the cell, and I don't know how to fix it

问题描述

我正在尝试使用 UIEdgeInsetsMake 将单元格的背景设置为渐变.我尝试了多种方法来让它工作，但无论我使用什么，总是有问题.

I'm trying to use UIEdgeInsetsMake to make set the background of my cell to a gradient. I've tried multiple things to get it to work, but no matter what I use, there's always an issue.

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

I simply have two static cells, where I'm trying to set their backgroundView in willDisplayCell:. I have separate images for the top, bottom and middle cells, but since I have two cells I only need the top and the bottom. These are those images:

热门

底部

底部的顶部缺少一条线，因此它们之间没有 2pt 线.我稍微调整了底部的高度以进行补偿(高 1pt).这些图片是 44x44pt.

There's a missing line on the top of the bottom one so that there's not a 2pt line in between them. I adjusted the height of the bottom one slightly to compensate (1pt higher). These images are 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 白色带"穿过单元格，看起来非常难看.我不知道它为什么在那里.

This does not work well. As you can see in the image below, in the top cell, there's a 1pt white "band" across the cell that looks quite ugly. I don't know why it's there.

所以我将 topCellBackgroundView 更改为具有 (5.0, 5.0, 0.0, 5.0) 的边缘插入，因为它只在顶部四舍五入，所以 底部 属性不需要考虑(它是平坦的).这完美！除非您选择单元格，否则底部单元格不再占据整个单元格.

So I changed the topCellBackgroundView to have edge insets of (5.0, 5.0, 0.0, 5.0), as since it's only rounded on the top, the bottom property needn't be factored in (it's flat). That works perfectly! Except when you select the cell, the bottom cell no longer takes the entirety of its cell up.

我该怎么办?似乎无论我做什么，它都不起作用.我也试过1.0而不是0.0，还有-1.0也没用.

What am I supposed to do? It seems no matter what I do, it doesn't work. I also tried 1.0 instead of 0.0, as well as -1.0 to no avail.

推荐答案

好消息:你不会发疯的.您的可拉伸图像代码可能是完美的.问题是具有分组样式的 UITableView 为单元格的高度添加了额外的点除了您在 heightForRowAtIndexPath:

Great news: you're not going crazy. Your stretchable image code is likely perfect. The problem is that UITableView with a grouped style adds extra points to the height of your cells in addition to the value you return in heightForRowAtIndexPath:

因此，解决问题的方法是根据部分中的总行数在 heightForRowAtIndexPath: 中返回调整后的单元格高度:

So the solution to your problem is to return an adjusted cell height in heightForRowAtIndexPath: based on the total number of rows in the section:

- (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 是如何做到这一点的:

Here's a sample image showing how UITableView does this:

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

As far as I know, only the grouped style table views are affected, and even then the effect changes based on the total number of rows in a given section:

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

1. One Row Adds two points to the cell height (defaults height is 92 pixels on retina).
2. Two Rows Adds one point to the height of the first and last rows (90 pixels high each by default on retina).
3. Three Rows Adds one point to the height of the first and last rows (90 pixels high each on retina by default). The middle rows are unaffected.

这太令人沮丧了，据我所知从未记录过.:-)

This is so frustrating and has never been documented as far as I know. :-)

更新

上面的计算是针对使用默认分隔符样式 UITableViewCellSeparatorStyleSingleLineEtched 的分组样式表视图.以下是其他情况下的操作(即 UITableViewCellSeparatorStyleSingleLine 和 UITableViewCellSeparatorStyleNone):

The calculations above are for a grouped style table view using the default separator style of UITableViewCellSeparatorStyleSingleLineEtched. Here's what to do in the other cases (i.e. UITableViewCellSeparatorStyleSingleLine and UITableViewCellSeparatorStyleNone):

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

这篇关于UIEdgeInsetsMake 在单元格上创建了​​一个奇怪的带，我不知道如何修复它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！