如何使用圖像創建定製的分組UITableView

Question

我想實現一個可靠的系統來創建自定義的分組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

你可以看到，第一個單元格不正確drawed。快速滾動導致此繪圖問題，如何避免此問題？我想知道是否有更高效的解決方案不影響性能，並且很容易實現，例如定製的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; 
}