[iOS] UICollectionViewFlowlayout 설정 & 적용하기 - HoonIOS

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

저번에 컬렉션 뷰를 구현했는데... 상당히 찜찜한 결과물이 나왔죠...ㅋㅋㅋㅋㅋㅋㅋ

boidevelop.tistory.com/86

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

 

그래서 이번에는 해당 셀들의 레이아웃을 잡아서 화면에 컬렉션 셀들이 보이게 구현을 한번 해보겠습니다.

 

UICollectionView에서 뷰의 레이아웃을 잡기위해서 UICollectionViewFlowLayout 클래스를 사용합니다.

 

 

 UICollectionViewFlowlayout

 

애플 공식 문서에서는 어떻게 어떤 클래스라고 나와있는지 한번 찾아보겠습니다.

 

" 그리드 안에서 각 조직적 아이템의 각 섹션을 위한 헤더와 푸터 뷰의 레이아웃 객체이다. "

 

쉽게 말해 컬렉션 뷰에 대한 레이아웃 정보를 생성하기위한 추상적인 기본 클래스라고 합니다.

 

 

이 클래스의 레이아웃 방식은 현재 행에서 채워 나가되 객체의 공간이 부족하면 새로운 행을 생성해서 거기다가 셀들을 추가하는 방식입니다.

 

*플로우 레이아웃의 종류는 총 3가지가 있습니다.

1. 수직 스크롤

 

부스트 코스 참조

• 이 레이아웃은 왼쪽에서 오른쪽으로 셀들을 추가하고 공간이 부족하면 다음 행으로 넘어가 처음부터 채우는 방식입니다.

2. 수평 스크롤

• 헤더 푸터가 양쪽 끝에 있는것이 특징으로 셀들이 위에서 아래로 채워지고 만약 열을 다 채웠으면 다음 열로 넘어가 첫 행부터 채우는 방식입니다.

3. 단일행 스크롤

• 셀이 하나가 있고 위아래로 헤더 푸터가 있는 방식입니다.
  ( 구성되어 있는것을 찾아보다가 너무 안 나와서 혹시 좋은 예시 있으시면 댓글 부탁드려요 ㅠㅠ )

 

이렇게 컬렉션 셀들을 구성하는 UI에대해 알아봤습니다.

 

이제 플로우 레이아웃을 구성하는 방법에 대해 알아보겠습니다. :)

 

 플로우 레이아웃 구성하기

 

플로우 레이아웃을 어떤 순서로 구성하는지 보고 그다음 그 순서대로 구현해보겠습니다.

 

* 구현 순서

1. 제일 먼저 UICollectionViewFlowlayout 인스턴스를 생성해줍니다.
2. 콘텐츠 여백을 설정해줍니다.
   (좌, 우, 위, 아래를 설정해줄수 있습니다.)
3. 필요한 경우 셀들 간의 좌우 최소 간격, 위아래 최소 간격을 설정해줍니다.
4. 필요한 경우 섹션 헤더 또는 섹션 푸터의 크기를 설정해줍니다.
5. 레이아웃 스크롤 방향을 설정해줍니다.
   ( 만약 설정 안 했을 때는 기본값인 vertical로 되어있습니다. )
6. 셀의 가로, 높이 크기를 지정해줍니다.

 

이렇게 플로우 레이아웃을 사용하면 다양한 형태를 만들 수 있습니다.

 

그럼 처음부터 구현하기 전에 6번째에 있는 셀의 크기를 조정하는 방법은 총 3가지가있습니다.

 

1.  UICollectionViewFlowlayout클래스의 itemSize프로퍼티를 통해 설정하는 방법이 있습니다.
   
   이 방법은 모든 셀들을 해당 프로퍼티에 설정한 사이즈로 변경을 해줍니다.
   
   
2. UICollectionViewDelegateFlowLayout 프로토콜의 collectionView(_:layout:sizeForItemAt:) 메서드를 통해 설정하는 방법이 있습니다.
   
   이 방법은 셀마다 크기를 다른 게 사이즈를 설정해줄 수 있습니다.
   
   
3. 셀에 오토 레이아웃을 지정하고 셀 스스로 크기를 결정해서 UICollectionViewlayout객체에 알려주는 방법이 있습니다.
   
   이 방법은 estimatedItemSize프로퍼티를 사용해 셀의 최소 크기를 미리 설정하는 방법입니다.

 

이제 구현을 해보겠습니다. 구현을 해보고 셀의 크기를 조정하는 방법은 따로 구현해보겠습니다.!

 

 구현해보기!

 

첫 번째로 UICollectionViewFlowlayout 인스턴스를 생성해줘야 됩니다. :)

 

* 코드 설명

• 이제 이 인스턴스 안에 필요한 설정들을 설정해주면 됩니다.

 

두 번째는 콘텐츠 여백을 설정해주겠습니다.

 

* 코드 설명

• 셀들과 safeArea사이의 간격을 설정하는 것으로 UIEdgeInsets메서드를 사용합니다.
•  이 사진에서 위아래 왼쪽 오른쪽을 설정해 주는 것입니다.
• 아.... 호기심이 생기네요 모두 10을 줬을 때랑 50을 줬을 때라 어떻게 다른지 비교해보고 싶어 졌습니다.ㅠㅠ 이건 못 참아  왼쪽이 10씩 준거고 오른쪽이 50씩 준 건데요
  
  오른쪽 결과를 보시면 위, 왼쪽만 봐도 safeArea랑 차이가 더 벌어지는 것을 눈에 뜨게 확인할 수 있습니다. :)

 

이제 세 번째로 safeArea가 아니라 셀들 간에 열, 행에서 최소 간격을 설정해줘 보겠습니다.

 

* 코드 설명

• . minimumLineSpaceing 속성은 열에서 아이템 간의 최소 간격을 설정해준 것이고
• . minimumInteritemSpacing 속성은 행에서 아이템 간의 최소 간격을 설정해준 것입니다.

 

※ 혹시 이 말이 이해가 안 가신다면 참조하세요

• .minimumLineSpacing속성은 아래 그림에서 연두색 같이 위 아래 셀들간의 최소 간격을 설정해주는것을 말합니다.

• .minimunInteritemSpacing속성은 아래 그림의 화살표와 같이 좌, 우 셀들간의 최소 간격을 설정해주는것을 말합니다.

 

 

네 번째, 이번 프로젝트에서 Supplementary view를 추가해주지 않았기 때문에 헤더 뷰랑 푸터 뷰를 추가해주지 않았기 때문에 따로 크기를 설정해 줄 필요가 없습니다.

 

다섯 번째, 저는 기본값인 vertical을 사용해주기 위해서 즉 위아래로 수직 스크롤 되게 하기 위해서 기본값을 사용하려고 설정을 안 해줬습니다. 

 

 

이제 드디어 여섯 번째인 셀의 가로, 높이 크기를 지정해준 건데요 아까 말씀드린 것처럼 이것은 총 3가지 방법이 있습니다.

 

제일 먼저 itemSize속성을 이용하는 방법을 알아보겠습니다.

 

 itemSize를 이용하여 셀 크기 정하기

 

itemSize속성은 셀 크기를 모두 동일하게 똑같이 설정한다고 앞에서 말씀드렸는데요 

 

그전에 저는 한 셀에 3개의 사진을 추가하기 위해 설정을 하겠습니다.

 

* 코드 설명

•  CGFloat으로 잡아준 것으로 스크린이 넓이 값을 불러와 3으로 나눠서 설정을 해줬습니다.
• UIScreen.main.bounds.width를 이용하면 화면의 넓이를 가져올 수 있습니다.

이제 itemSize 속성을 통해서 크기를 설정해 주겠습니다.

※ itemSize

사용하는 아이템의 기본 사이즈로 CGSize 타입 이기 때문에 width, height를

모두 구현해줘야 합니다.

 

 

* 코드 설명

• flowlayout의 아이템 사이즈의 넓이 높이를 설정해준 코드입니다.
• 넓이는 아까 threePicture에서 설정해준 값을 넣어주면 되는데 어? 여기서 왜 30을 빼지 라는 의문을 가지 실수 있습니다.
  아래 참고를 확인해주세요 ㅎㅎ

※ 참고

-30을 해준 이유는 해당 넓이를 3으로 나눴을 때. 몇몇몇 값과 위에서 행간 격을 5로 설정해줬기 때문에 그 공백 값만큼 모두 빼준 것입니다.

 

이제 결과를 한번 확인해 보겠습니다 :)

 

오호 드디어 3줄로 나오는 것을 확인할 수 있습니다.

 

이제 다른 방법인. estimatedItemSize속성으로 사이즈를 설정해보겠습니다.

 

 . estimatedItemSize을

 

flowlayout 인스턴스 생성해주고 해당 flowlayout에 설정을 해준 것은 똑같습니다.

 

. itemSize에 넣어준 부분만 지우고. estimatedItemSize에 값을 넣어주는 걸로 만들어주면 됩니다.

 

 

* 코드 설명

• 넣어준 것도 다 똑같네요? ㅎㅎ
  
  둘의 속성 창이를 다시 한번 확인해보겠습니다.
• . itemSize
  - 모든 셀을 같은 크기로 설정하는 것
• . estimatedSize
  - 셀 스스로 크기를 결정하고 UICollectioNViewlayout 객체에 알려주는 것
  - 셀마다 크기가 동적으로 정해져 있어 제각각 컬렉션 뷰 셀의 크기를 정하는 것

 

이제 결과를 한번 봐보겠습니다.

 

• 결과를 보면 아시겠지만 어 뭐야 그냥 같은데?라고 생각하실수 있는데 여기서는 맞습니다...ㅎㅎ
  
  그 이유는 사진의 크기는 모두 같아 같은 셀의 크기를 반환하기 때문이죠 즉 모든 셀들에 있는 콘텐츠의 크기들이 모두 같기 때문에 이렇게 나올 수 있는 것입니다.

 

이제 세 번째 방법인 collectionView(_:layout:sizeForItemAt:)에 대해 알아보겠습니다.

 

 collectionView(_:layout:sizeForItemAt:)을 이용하여 셀 크기 정하기

 

 

이 메서드는 세 개의 인자 값과 한 개의 리턴 값을 가집니다.

 

1. 첫 번째
   - 레이아웃을 설정할 collectionView객체를 나타냅니다.
   ( collectionView를 구분할 수 있습니다.)
2. 두 번째
   - 레이아웃 객체 정보를 제공하는 매개변수입니다. UICollectionViewFlowLayout을 사용하고 싶으면 이것을 이용해서 캐스팅해 사용하면 됩니다.
3. 세 번째
   - 몇 번째 아이템에 적용을 할 것인지 셀별로 구분 지을 때 사용합니다.
4. 리턴 값
   - CGSize값을 리턴해 셀의 크기를 정해줍니다.

* 코드 설명

• guard let 부분은 레이아웃 정보를 UICollcetionViewFlowLayout으로 다운 캐스팅을 해줬는데 이것은 선택사항입니다. 크기만 정해줄 거면 사용할 이유가 없겠죠?
• width를 통해 위 예시와 같이 전체 크기에서 3으로 나누어 셀들의 간격을 5로 준 것을 빼줬습니다.
• CGSize를 통해 width와 height를 설정해줘 리턴을 해줬습니다.

 

이제 이렇게 결과가 나왔습니다. 뭐 같은 역할을 하는 메서드 이므로 결과는 같겠죠...ㅎㅎ

 

 

이렇게 UICollectionViewFlowLayout도 알아보고 각 셀의 크기를 설정하는 방법도 하나씩 구현을 해봤습니다!

 

CollectionView는 talbeViewController와 다르게 컨트롤러가 아닌 뷰타 입인 것에 대해 신기했고 인스타그램에 스토리보드 같은 것을 CollectionView를 통해서 구현을 해줬겠구나 라는 생각을 해봤습니다.!