UIEdgeInsets在单元格上创建一个奇怪的带，我不知道如何解决它 [英] 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)的边缘插图，因为由于它仅在顶部四舍五入，因此不需要考虑bottom属性(它是平坦的).很好用！除了选择单元格以外，底部单元格不再占用整个单元格.

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. 两行将第一行和最后一行的高度加一个点(视网膜默认默认为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;
}

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