이미지를 사용하여 사용자 지정된 그룹화 된 UITableView를 만드는 방법

Question

테이블에 사용자 지정 스타일을 사용하는 응용 프로그램 ConvertBot처럼 사용자 지정 그룹화 된 Tableview를 만들기 위해 견고한 시스템을 구현하고 싶습니다.

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

나는 배경 이미지를 사용하여 동일한 효과를 얻을 것 이것이 내가 사용하는 코드입니다 세포의 backgroundView 내부에 삽입한다.

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

당신은 첫 번째 셀이 제대로 drawed되지 않는 것을 볼 수 있습니다

코드 다음은 결과입니다

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

사용. 빠른 스크롤링으로이 그림 문제가 발생했습니다.이 문제를 방지하려면 어떻게해야합니까? 성능에 영향을 미치지 않고 사용자 지정 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; 
} 

을