IOS Xcode CollectionView 사용하기

IOS Xcode CollectionView 사용하기

xcode collectionView 를 이용해 보았습니다. android RecyclerView와 같은 개념으로 동작하는것 같습니다.

collectionView 는 사이즈를 통해서 테이블뷰 , 그리드뷰 , 페이져 역할을 할수 있는 위젯을 만들수 있습니다.

사이즈를 통해서 입맛에 맞는 위젯을 구성할수 있다는것이 굉장히 매력있는것 같습니다.

사용 방법 및  위젯 사이즈에 따른 형태에 대해 소개해 보려 합니다.

첫번째로 기본 프로젝트를 생성후에 스토리보드에 CollectionView를 드래그해서 올려 놓습니다.

 

위 Controller 화면을 보면 작은 네모가 있는것을 볼수 있습니다. 작은 네모는 CollectionView 에 나타날 Cell  입니다.

오른쪽 네비게이터를 보면 CollectionView 안에 Cell 과 Layout이 있는것을 볼수 있습니다.

CollectionView 의 배경을 검은색으로 지정후에 Cell 화면에 ImageView 를 추가 했습니다. 

이제 화면에 연결할 Controller , ImageView 를 연결할 Class 를 생성해야 합니다.

ViewController 는 기본적으로 생성되어있는것을 이용하고 , Cell 을 생성해서 준비 합니다.

 

UICollectionViewCell 을 생성 합니다. 

위와같이 ViewController 와 Cell Class를 구성이 완료 되면 연결 작업을 해야 합니다.

메인스토리보드 Inspecter로 이동하여 연결작업을 진행하겠습니다.

위와같이 연결을 하면 이제 코드를 작성할 준비가 완료 됩니다. 

이제 코드를 통해서 CollectionView를 구성해야 합니다.

Cell 에서 구성한 imageView 를 코드와 연결 작업을 진행해야 합니다.

1 2 3 4 5 6 7 8 9 10 11

#import <UIKit/UIKit.h>   @interface CollectionViewCell : UICollectionViewCell   @property (strong, nonatomic) IBOutlet UIImageView *imgBg;   @end       Colored by Color Scripter

cs

다음으로 ViewController.h 파일에 DataSource , Delegate 를 연결 합니다.

또한 화면에 보여줄 이미지를 담을수 있는 imgList를 작성하였고 , 사용할 collectionView 를 연결하였습니다.

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController <UICollectionViewDelegate , UICollectionViewDataSource>{
    
    NSMutableArray *imgList;
}
 
@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;
 
@end
 
 
 

이제는 본격적으로 .m 파일을 만들 차례 입니다. 

코드작성전에 화면에 보여줄 이미지를 여러장 준비해서 프로젝트로 옮겨 넣습니다.

넣은후에 ViewDidLoad에서 DataSource , Delegate 연결 작업 및 이미지 List화 작업을 진행 합니다.

- (void)viewDidLoad {
    [super viewDidLoad];
 
    [_collectionView setDelegate:self];
    [_collectionView setDataSource:self];
    
    imgList = [[NSMutableArray alloc] initWithObjects:
               @"img01.jpg",@"img02.jpg",@"img03.jpg",@"img04.jpg",@"img05.jpg",
               @"img06.jpg",@"img07.jpg",@"img08.jpg",@"img09.jpg",nil];
    
}

위와 같이 초기화를 마치면 이제 CollectionView 에 연결할 함수들을 구현해야 합니다. 

헤더 파일에서 DataSouce , Delegate 인터페이스를 연결했으면 ViewController 

메인 파일에서 함수가 없다고 경고가 나올것입니다. 경고에 해당하는 함수를 구성합니다.

 
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
 
 
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return imgList.count;
}
 
 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    [cell.imgBg setImage:[UIImage imageNamed:[imgList objectAtIndex:indexPath.item]]];
    return cell;
}
 

위 두함수를 구현합니다.

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return imgList.count;
}


- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    [cell.imgBg setImage:[UIImage imageNamed:[imgList objectAtIndex:indexPath.item]]];
    return cell;
}

numberOfItemsInSection 함수는 collectionView Item 갯수를 나타내는 함수 입니다.

 위에서 imgList의 개수를 넣었습니다.다음으로는 cellForItemAtIndexPath 함수입니다. 

Item 의 구성을 담당하는 함수입니다. 위 갯수 만큼 이벤트가 호출됩니다.

cellForItemAtIndexPath 함수에서 위에서 만든 Cell 을 불러왔고 , 불러온 Cell imgBg에 이미지를 넣어 주었습니다.

ps) 여기서 Cell 을 불러오기 위해서 cellIdentifer를 정의하고 연결작업을 진행해야합니다.

static NSString *cellIdentifier = @"Cell";

위와 같이 정의하고 스토리보드에서 셀을 선택후에 연결작업을 진행합니다.

위와 같이 연결작업 까지 완료 하고 앱을 실행해보면 아래와 같은 화면을 볼수 있습니다.

3배열의 이미지 리스트가 만들어 졌습니다. 여기까지가 구성 방법 입니다. 

하지만 여기서 CollectionView의 진가를 발휘하는것을 확인해 보아야 합니다.

사이즈 조절에 따라 화면의 모양이 바뀌는 것입니다. 

사이즈 변경만들통해서 테이블뷰형태를 만들어 볼수 있습니다.

Cell 의 가로사이즈를 화면 가로사이즈로 조정해보도록 하겠습니다.

Cell 의 크기에 따라 배열이 변경 됩니다. 화면 가로가 320 이라고 가정하면,

Cell 이 100 인경우는 3배열 150인경우는 2배열 위와 같이 배열 됩니다.

Cell을 화면 가로 , 세로 사이즈로 맞추고 page 속성을 주면 페이지 전환 효과도 만들수 있습니다.

 

또한 layout의 속성을 보면 vertical/horizontal 속성이 있습니다.
속성을 통해 방향을 바꿀수 있습니다.

이러한 속성,사이즈를 잘 다루면 페이징 효과,테이블뷰, 그리드뷰의 위젯을 만들어 낼수 있습니다.

사이즈를 통해서 자유롭게 표현하고 싶은 위젯을 만들수있는 장점을 가지고 있는 CollectionView 인것 같습니다.