ios collectionview xib 파일 & customcell 예제

ios collectionview xib 파일 & customcell 예제

 

 

앞전의 포스팅(ios CollectionView 예제 - 프로젝트 생성)에서는 ios collectionview 예제를 스토리보드로 구현을 해보았다. 이번 포스팅에서는 ios collectionview 를 xib 파일로 구현해보고 , customcell 예제를 위해서 cell 도 xib 파일로 구현해 보도록 한다.

 

collectionview 를 생성하는 방법은 이전에 작성한 포스팅(ios CollectionView 예제 - 프로젝트 생성)에서 자세하게 설명을 해놓았다. 

 

이번에는 xib 파일을 이용해서 구현할 때 차이점만 몇가지 알아보고 아래와 같은 사진첩을 구현해본다.

 

 

 

 

순서

 

1.cell xib 파일 생성

2.cell xib 파일에 이미지, 라벨 객체 연결

 

3.UIViewController를 상속하는 Controller 생성 (xib 파일 동시 생성)

4.UI 객체 라이브러리 에서  collectionView 객체 xib 파일의 view에 넣어주고 제약조건 위, 아래, 양옆 0 으로 설정

5.Controller interface에서 <UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout> 프로토콜 채택

6.xib 파일에서 만든 collectionView IBOutlet으로 연결

7.collectionView delegate 선언 및 collectionView delegate 프로토콜 구현

8.위에서 xib 파일로 만든 customcell collectionView에 등록하기

 

 

 

 

cell xib 파일 생성하고, cell xib 파일에 이미지, 라벨 객체 연결

 

아래와 같이 cell xib 파일을 만들어 주고 이미지 객체 라벨등을 xib 파일 View에 위치 시켜주고 IBOutlet으로 연결 시켜 준다.

참고로 UIImageView 객체위에 라벨이 있다. 

 

 

ios cell

 

GallaryCell.h

 

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GallaryCell : UICollectionViewCell

//이미지 뷰
@property (strong, nonatomic) IBOutlet UIImageView *imageView;

//사진 타이틀 - 순번
@property (strong, nonatomic) IBOutlet UILabel *title;

//선택 여부
@property (nonatomic, assign) BOOL check;

@end

NS_ASSUME_NONNULL_END

 

 

GallaryCell.m

 

#import "GallaryCell.h"

@implementation GallaryCell

- (void)awakeFromNib {
    [super awakeFromNib];
    
}

@end

 

 

UIViewController를 상속하는 Controller 생성 (xib 파일 동시 생성)

 

GellaryViewController.h

 

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GellaryViewController : UIViewController <UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>


//컬렉션 뷰 객체
@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;

//사진 순서
@property (nonatomic, strong) NSMutableArray *arrayOfPicNum;

//사진 순서 딕셔너리
@property (nonatomic , strong) NSMutableDictionary *dicOfPicNum;

@end

NS_ASSUME_NONNULL_END

 

 

GellaryViewController.m

 

이부분에서 중요한것은 ViewDidLoad 메소드에서 아래처럼 위에서 만든 xib 파일의 custom cell을 호출해 놓고 collectionView에 등록을 해주어야 한다는 점이다. 아래 처럼 등록을 안해주면, 실행시 오류가 발생한다.

 

UINib * nib = [UINib nibWithNibName:@"GallaryCell" bundle:nil];

 

[collectionView registerNib:nib forCellWithReuseIdentifier:@"Cell"];

 

 

그리고 cell을 구성해주는 메소드에서 cell의 리턴 값을 아래와 같이 받아준다.

 

GallaryCell *gellarycell =

    [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

 

GallaryCell은 xib으로 만든 customcell 이다.

 

나머지 collectionView의 Delegate 메소드들은 이전 포스팅(ios CollectionView 예제 - 프로젝트 생성)에서 상세하게 설명해 놓았다.

 

 

#import "GellaryViewController.h"

#import "GallaryCell.h"

@interface GellaryViewController ()

@end

@implementation GellaryViewController

@synthesize collectionView , arrayOfPicNum , dicOfPicNum;

- (void)viewDidLoad {
    [super viewDidLoad];
   
    //사진 선택 순서 배열
    if (!arrayOfPicNum) {
        arrayOfPicNum = [NSMutableArray new];
    }
    
    //딕셔너리 초기화
    if (!dicOfPicNum) {
        dicOfPicNum = [NSMutableDictionary new];
    }
    
    
    
    
    NSLog(@"아이폰 스크린 크기");
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHeight = screenRect.size.height;
    
    
    NSLog(@"스크린 가로 : %f" , screenWidth);
    NSLog(@"스크린 세로 : %f" , screenHeight);
    

    [collectionView setDelegate:self];
    [collectionView setDataSource:self];

    
    UINib * nib = [UINib nibWithNibName:@"GallaryCell" bundle:nil];
    [collectionView registerNib:nib forCellWithReuseIdentifier:@"Cell"];
    
    
}


/* 컬렉션 뷰 셀 개수 */
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return 50;
}


//cell 구성
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    
    //1.cell
    GallaryCell *gellarycell =
    [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    
    //2. 이미지 셋팅
    gellarycell.imageView.image = [UIImage imageNamed:@"flower.jpg"];
   
    
    //3. 제목 셋팅
    gellarycell.title.backgroundColor = [UIColor lightGrayColor];
    
    //gellarycell.title.text = [[NSString alloc] initWithFormat:@"%ld" , (long)indexPath.row];
    
    //4.사진 선택 여부 셋팅
    gellarycell.check = NO;
    
        
    return gellarycell;
}


//아이템 클릭
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    NSLog(@"선택된 아이템 %ld - %ld" , indexPath.section , indexPath.row);
    
    
    GallaryCell *cell =  (GallaryCell *)[collectionView cellForItemAtIndexPath:indexPath];
    
    
    
    if (!cell.check) {
        
        //체크 안되었으면 체크 표시
        cell.layer.borderColor = [UIColor blueColor].CGColor;
        cell.layer.borderWidth = 3.0f;
        
        cell.check = YES;
        
        //사진 위치 번지
        NSInteger integer = indexPath.row;
        NSString *inStr = [NSString stringWithFormat: @"%ld", (long)integer];
        NSLog(@"선택-위치 : %@" , inStr);
        
        //딕셔너리 count + 1
        NSInteger count = [dicOfPicNum count] + 1;
        NSString *countStr = [NSString stringWithFormat: @"%ld", (long)count];
        NSLog(@"선택-순번 : %@" , countStr);
        
        
        //사진 위치와 순번 담아주기
        [dicOfPicNum setValue:countStr forKey:inStr];
        
        //순번 화면에 표시 재정렬
        for (id key in dicOfPicNum) {
            
            NSLog(@"key = %@ value = %@" , key , [dicOfPicNum objectForKey:key]);
            
           // GallaryCell * selectedCell = (GallaryCell *)[collectionView cellForItemAtIndexPath:key];
            //selectedCell.title.text = [collectionView cellForItemAtIndexPath:key];
            
        }
        
        
        
        
        //순번 표시
        cell.title.text = countStr;
        
        
        
        
        //체크 되었으면, 체크 해제
    }else{
        
        cell.layer.borderColor = nil;
        cell.layer.borderWidth = 0.0f;
        
        cell.check = NO;
        
        NSInteger integer = indexPath.row;
        NSString *inStr = [NSString stringWithFormat: @"%ld", (long)integer];
        
        NSLog(@"inStr : %@" , inStr);
        
        [dicOfPicNum removeObjectForKey:inStr];
        
        cell.title.text = @"";
    }
    
}


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



//cell 끼리 가로 간격
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{


    return 5;
}


//cell 끼리 위아래 간격
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    return 5;
}



//컬렉션 뷰 셀 크기
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    CGFloat height = self.view.frame.size.height;
    CGFloat width  = self.view.frame.size.width;
    
    NSLog(@"height : %f" , height);
    NSLog(@"width : %f" , width);
    
    // in case you you want the cell to be 40% of your controllers view
    return CGSizeMake((width -10) / 3 , (width -10) / 3);
}


//컬렉션뷰 셀 라인 간격 참고!!!!
//https://stackoverflow.com/questions/28872001/uicollectionview-cell-spacing-based-on-device-screen-size
@end

 

 

photocollectionview.zip

0.14MB

 

 

 

 

컬렉션뷰 셀 라인 간격 참고

https://stackoverflow.com/questions/28872001/uicollectionview-cell-spacing-based-on-device-screen-size