如何使用图像创建自定义的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;  
}