[iOS] 컬렉션뷰 데이터소스& 델리게이트 구현해보고 뽀시자! - HoonIOS

안녕하세요, HoonIOS입니다. :)

 

저번 포스팅에는 데이터 소스의 델리게이트 옵셔널 메서드와 데이터 소스의 필수 메서드에 대해 포스팅을 해봤습니다. 이 메서드를 통해서 구현해볼 거라 한번 살짝 갔다 오시는 것을 추천드립니다. :)

 

boidevelop.tistory.com/85

[iOS] 컬렉션뷰의 델리게이트 & 데이터소스 뽀시기 - HooniOS

 

 컬렉션뷰 구현 뽀시기

 

 

※ 구현

이번 예시는 역시 제가 좋아하는 야구팀을 토대로 구현을 해주려고 합니다. :)

간단하게 컬렉션 뷰에 각 선수 이름과 밑에 이름을 설정해 주고 셀을 클릭할 때마다 아래에 몇 번째행이 출력되는지 확인해보겠습니다.

 

 

 

 

제일 먼저 스토리보드 세팅을 해야 됩니다. viewController위에 컬렉션 뷰를 설정해줘야 합니다.

 

* 설명

• UILibrary에서 Collection View를 ViewController위에 올려줘야 합니다.
• 그다음 올린 CollectionView는 오토레이아웃을 설정해줘야 하는데 설정은 오른쪽 그림과 같이 위, 아래, 좌, 우를 모두 safearea에 딱 붙여줘야 합니다. 
  
  근데 이건 자유인데 저는 한 뷰 컨트롤러 위에 모두 올릴 거라 이렇게 설정해줬지만 필요한 만큼 레이아웃을 잡아 설정을 해주면 됩니다.

 

이제 클래스와 커스텀 뷰 컨트롤러와 짝을 연결해줘야 합니다.

 

 

커스텀 뷰 컨트롤러의 클래스 안에 collectionView를 아울렛 변수로 선언을 해줍니다.

 

 

 

이제 imageView에 넣을 사진들을 모듈 안에다가 넣어주겠습니다.

 

화면에 출력해줄 데이터 (stirng, UIImage) 타입 배열을 선언해 주겠습니다.

 

 

데이터를 담아줄 playerlist 배열을 선언해 주겠습니다. playerData 데이터 소스를 playerlist class배열에 담아주는 역할을 합니다.

 

이제 큰 틀은 끝이 났고 이제 스토리보드의 컬렉션 셀을 꾸며줘야 합니다.

 

왜냐고요? 사진을 넣을 UIImageView와 이름을 표시해줄 label이 있어야 하기 때문입니다.

 

* 설명

• 선수 얼굴을 표시해줄 이미지 뷰와 이름을 표시할 라벨을 컬렉션 뷰 셀 안에 넣어줬습니다.

이제 데이터 소스 메서드를 통해서 안에 컬렉션 뷰 셀을 구현해줄 건데요, 그전에 셀의 identifier을 설정해주겠습니다.

 

 

데이터 소스를 구현해주기까지 준비는 모두 끝났습니다. UICollectionViewDatasource를 설정해주겠습니다.

 

 UICollectionViewDatasource

 

UICollectionViewDatasource에는 필수 메서드가 두 개 있다고 했습니다.

 

1. collectionView(_:numberOfItemsInSection:)
   - 셀의 개수를 나타낸다.
2. collectionView(_:cellForItemAt:)
   - 셀의 형태를 나타낸다.

이제 이 메서드들을 한번 구현해보겠습니다.

 

* 설명

• 이 두 데이터 소스 메서드는 선택이 아니라 필수이므로 무조건 추가를 해줘야 합니다.

 

첫 번째, 컬렉션 뷰 셀의 개수를 정해주는 numberofItemsInSection을 구현해주겠습니다.

 

* 설명

• 나중에 유지보수를 편하게 하기 위해서 직접 개수를 쓰는거보다 데이터 소스의 갯수를 반환하기 때문에 나중에 유지보수 할 때 더 편하다는 장점이 있습니다.
• 이렇게 해당 배열의 크기만큼 리턴해주라고 했기 때문에 해당 배열의 크기만큼 리턴을 해주게 만들어줬습니다.

두 번째, 컬렉션 뷰의 셀을 구성하는 메서드 collectionView(_:cellForItemAt:)을 구현해보겠습니다.

 

* 설명

• 제일 먼저 아까 컬렉션 셀의 identifier을 설정을 해줬었는데요, 이 식별자를 이용해서 해당 셀의 재사용 큐 인스턴스를 생성해 줬습니다.
  
  
• 
  
  
  테이블 뷰컨틀로러와 다르게 재사용 큐 인스턴스를 생성해줄 때 다르게 for인자 값이 들어가는데 테이블 뷰 컨트롤러와 다르게 추가되어 있어 이것이 뭔지 애플 문서에서 한번 찾아보겠습니다.
  
  
  
  
  " for에 들어가는 indexpath의 설명을 들어보면 셀의 위치를 지정하는 indexpath로 항상 특정한 indexpath에 데이터 소스 객체를 제공한다.
  이 메서드는 indexpath를 이용하여 테이블 뷰의 셀 위치를 기반으로 추가 구성할 때 사용한다. "라고 설명이 되어있습니다.
  
  위 코드에서는 해당 행을 추가로 구성해 줄 것이기 때문에 for에다가 해당 indexpath인자 값을 넣어주면 됩니다.
  
• 다음 코드로 if let에 대해 옵셔널이 아닐 때 사진이 없을 때를 대비해서 강제 옵셔널로 래핑을 해제하기 보다는 if let ~ else로 이미지가 없을때 아무 그림도 나오지 않게 예외 처리를 해줬습니다.
• 사진은 없어도 선수 이름은 있어야겠죠? 그래서 playerName은 강제 언래핑으로 해줬습니다.
  대신 값이 없을 때는 앱이 터지므로 조심해야 됩니다.

데이터 소스는 모두 설정을 해줬습니다. 이제는 델리게이트 메서드를 설정해주겠습니다.

 

 UICollectionViewDelegate

 

이번 예제에서 구현할 델리게이트 메서드는 총 2개입니다.

 

1. collectionView(_:didSelectItemAt:)
   - 셀을 클릭했을 때 발생
2. collectionView(_:shouldHighlightItemAt:)
   - 셀의 하이라이트 유무 결정

차례대로 델리게이트 메서드를 구현해보겠습니다.

 

* 설명

• 컬렉션 셀을 클릭했을때 발생하는 메서드로 몇 번째 행인지 print를 해주게 구현을 해주었습니다.

 

두 번째, 메서드로 셀의 하이라이트 유무를 결정하는 메서드를 구현하겠습니다.

 

* 설명

• 이 메서드는 셀의 터치 이벤트같이 하이라이트를 주는 유무를 결정하는 것으로 리턴 값이 Bool타입이라 하이라이트를 주고 싶으면 true 그렇지 않으면 false를 주면 됩니다.
• 이것에 true, false에 대한 차이를 보고 싶으시면 여기에 들어가셔서 읽어보고 오시는 것을 추천드립니다. :)

어우 다했네요 이제 실행을 시켜보겠습니다.!!!!

.

.

.

 

어? 사진이 안 나오고 잘린 거 같은데요? 인터넷을 찾아보니 layout을 잡아주지 않아 사진이 너무 작게 나오거나 여러 개 잡혀서 이상하게 나온다고 하네요

 

그래서 flowLayout을 잡아주기 위해 UICollectionViewFlowlayout을 알아봅시다.!