如何使用图像创建自定义的Grouped UITableView

Question

我想实现一个可靠的系统来创建自定义的Grouped Tableview，就像使用自定义样式表的应用程序ConvertBot一样。

http://i.stack.imgur.com/geAuw.png

我会得到相同的效果，使用背景图像插入单元格的 backgroundView ，这是我正在使用的代码。

使用的代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath     *)indexPath
{
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = (UITableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];      

    cell.textLabel.text = [NSString stringWithFormat:@"Cell Name %d %d",indexPath.row,indexPath.section];
    cell.textLabel.backgroundColor = [UIColor clearColor];

    //
    // Create a custom background image view.
    //        
    cell.backgroundView =
    [[[UIImageView alloc] init] autorelease];
    cell.selectedBackgroundView =
    [[[UIImageView alloc] init] autorelease];
    UIImage *rowBackground;
    UIImage *selectionBackground;
    NSInteger sectionRows = [self.tableView numberOfRowsInSection:[indexPath section]];
    NSInteger row = [indexPath row];
    if (row == 0 && row == sectionRows - 1)
    {
        rowBackground = [[UIImage imageNamed:@"TableSingleBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
        selectionBackground = [[UIImage imageNamed:@"TableSingleBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];

    }
    else if (row == 0)
    {
        rowBackground = [[UIImage imageNamed:@"TableTopBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 1, 10)];
        selectionBackground = [[UIImage imageNamed:@"TableTopBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 1, 10)];
    }
    else if (row == sectionRows - 1)
    {
        rowBackground = [[UIImage imageNamed:@"TableBottomBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 10, 10)];
        selectionBackground = [[UIImage imageNamed:@"TableBottomBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 10, 10)];
    }
    else
    {
        rowBackground = [[UIImage imageNamed:@"TableMiddleBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 1, 10)];
        selectionBackground = [[UIImage imageNamed:@"TableMiddleBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 1, 10)];
    }
    ((UIImageView *)cell.backgroundView).image = rowBackground;
    ((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;


    UIImage *indicatorImage = [UIImage imageNamed:@"DetailDisclosure.png"];
    cell.accessoryView =
    [[[UIImageView alloc]
      initWithImage:indicatorImage]
     autorelease];

}


return cell;  
}

结果如下：

http://i.stack.imgur.com/EmwX7.png

您可以看到第一个单元格没有正确绘制。快速滚动导致了这个绘图问题，如何避免这个问题？我想知道是否有更高效的解决方案不会影响性能并且易于实现，例如定制的UITableViewCell或类似的东西。

有什么建议吗？

Answer 1

当tableView没有重用已经创建的单元格时，您只创建新单元格。您所看到的是一个重复使用的单元格，它在创建时处于“中间”位置，但现在它在“顶部”位置被重用，而没有设置新图像。

我建议使用多个标识符，每种情况一个（单个，顶部，中间，底部）：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath     *)indexPath
{
    static NSString *singleIdentifier   = @"SingleCell";
    static NSString *topIdentifier      = @"TopCell";
    static NSString *middleIdentifier   = @"MiddleCell";
    static NSString *bottomIdentifier   = @"BottomCell";

    NSString *CellIdentifier = nil;
    NSInteger sectionRows = [tableView numberOfRowsInSection:[indexPath section]];
    NSInteger row = [indexPath row];

    // Select the identifier

    if (row == 0 && row == sectionRows - 1)
    {
        CellIdentifier = singleIdentifier;        
    }
    else if (row == 0)
    {
        CellIdentifier = topIdentifier;
    }
    else if (row == sectionRows - 1)
    {
        CellIdentifier = bottomIdentifier;
    }
    else
    {
        CellIdentifier = middleIdentifier;
    }

    UITableViewCell *cell = (UITableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];      

        cell.textLabel.text = [NSString stringWithFormat:@"Cell Name %d %d",indexPath.row,indexPath.section];
        cell.textLabel.backgroundColor = [UIColor clearColor];

        //
        // Create a custom background image view.
        //        
        cell.backgroundView =
        [[[UIImageView alloc] init] autorelease];
        cell.selectedBackgroundView =
        [[[UIImageView alloc] init] autorelease];
        UIImage *rowBackground;
        UIImage *selectionBackground;
        NSInteger sectionRows = [self.tableView numberOfRowsInSection:[indexPath section]];
        NSInteger row = [indexPath row];
        if (row == 0 && row == sectionRows - 1)
        {
            rowBackground = [[UIImage imageNamed:@"TableSingleBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
            selectionBackground = [[UIImage imageNamed:@"TableSingleBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];

        }
        else if (row == 0)
        {
            rowBackground = [[UIImage imageNamed:@"TableTopBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 1, 10)];
            selectionBackground = [[UIImage imageNamed:@"TableTopBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 1, 10)];
        }
        else if (row == sectionRows - 1)
        {
            rowBackground = [[UIImage imageNamed:@"TableBottomBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 10, 10)];
            selectionBackground = [[UIImage imageNamed:@"TableBottomBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 10, 10)];
        }
        else
        {
            rowBackground = [[UIImage imageNamed:@"TableMiddleBackground.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 1, 10)];
            selectionBackground = [[UIImage imageNamed:@"TableMiddleBackgroundSelected.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 10, 1, 10)];
        }
        ((UIImageView *)cell.backgroundView).image = rowBackground;
        ((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;


        UIImage *indicatorImage = [UIImage imageNamed:@"DetailDisclosure.png"];
        cell.accessoryView =
        [[[UIImageView alloc]
          initWithImage:indicatorImage]
         autorelease];

    }


    return cell;  
}