본문 바로가기
아이폰 개발/ios 개념&튜토리얼

ios CollectionView 예제 - Cell 아이템 선택 및 간격

by 인생여희 2020. 12. 10.

ios CollectionView 예제 - Cell 아이템 선택

 

1. CollectionView Cell을 클릭했을때 실행되는 CollectionView 델리게이트 메소드를 작성한다.

/* 아이템 클릭 */
- (void) collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"선택된 아이템  %ld-%ld",(long)indexPath.section,(long)indexPath.row);
    
    
    /* 컬렉션 뷰 객체 */
    UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
    cell.layer.borderColor = [UIColor blueColor].CGColor;
    cell.layer.borderWidth = 3.0f;
}

 

2. CollectionView Cell을 다른 셀을 선택했을때 셀 선택해제되는 CollectionView 델리게이트 메소드를 작성한다.

/* 선택 해제 */
- (void) collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"선택해제된 아이템 %ld-%ld",(long)indexPath.section,(long)indexPath.row);
    
    
    /* 컬렉션 뷰 객체 */
    UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];
    cell.layer.borderColor = nil;
    cell.layer.borderWidth = 0.0f;
}

 


 

ios CollectionView 예제 - Cell 아이템 간격

 

1. Cell 아이템 끼리 가로 간격을 설정하는 CollectionView 델리게이트 메소드를 작성한다.

//예)) 한줄에 4개의 Cell을 넣을때
//320px = [Cell1 77px] + [간격 4px] + [Cell2 77px] + [간격 4px] + [Cell3 77px] + [간격 4px] + [Cell4 77px]
- (CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 4;
}

 

2. Cell의 위아래 라인 간격을 설정하는 CollectionView 델리게이트 메소드를 작성한다.

- (CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 4;
}

 

3.완성

CollectionView 아이템 선택 및 셀 간격 예제

 

 

예제파일

Collectionview201208 4.zip
0.07MB

 

 

참고

https://blog.naver.com/xodhks_0113/205951713

https://seoddong.tistory.com/226?category=634436