画像を使用してカスタマイズされたGrouped UITableViewを作成する方法

Question

テーブルのカスタムスタイルを使用するアプリケーションConvertBotのように、カスタマイズされたGrouped Tableviewを作成するためのソリッドシステムを実装したいと思います。

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

Iは、細胞の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がすでに作成されたセルを再利用しなかった場合にのみ、新しいセルを作成します。あなたが見ているのは、再作成されたセルが作成されたときに「中間」の位置にあったが、今は新しいイメージを設定せずに「トップ」ポジションで再利用されているということです。

私は、それぞれの状況（シングル、トップ、ミドル、ボトム）のための1つを複数の識別子を使用してお勧めする：

- (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; 
}