[ iOS / Swift ] XCode 스토리보드 가로 방향 컬렉션뷰 ( CollectionView ) - 좌우 스크롤

한 줄짜리 좌우로 스크롤이 되는 컬렉션 뷰를 만들다가 나처럼 고생하는 사람이 있을 거 같아서 씀.

이 글은 컬렉션뷰를 만드는 방법에 대한 내용이 아니라 컬렉션뷰를 만들면서 '돼야 하는데 왜 안되지...?'라는 의문들을 해결할만한 요소들에 대해 써봤다.(사실 다 내가 겪은 것들,,,,)

위에 이미지는 내가 만든 컬렉션 뷰 결과물이다.

 

 

1. horizontal collectionView 만들기

일단 기본적으로 Scroll Direction을 Horizontal로 바꿔줘야 한다. 좌우 스크롤 컬렉션뷰를 만들기 위해서는 기본이지만 처음 만들어 본다면 모를 수 도 있기 때문에 적어본다.

 

 

2. 셀 사이즈 문제

나는 134 * 152 크기의 셀을 가진 컬렉션 뷰를 만들고 싶었다. 그래서 위에처럼 size inspector에서 cell size를 설정해 주었는데

셀사이즈가 마음대로 늘어나는 현상이 있었다,,,

 

코드에서 sizeForItemAt 설정을 해줘도 여전히 똑같았다.

 

문제의 원인은 Estimate Size가 Automatic으로 되어있어서 발생한 것이었다. None으로 바꿔주면 셀 사이즈가 원하는 대로 나오게 된다.

Estimate Size에 관한 링크를 보면 Automatic으로 설정해 놓으면 셀의 preferredLayoutAttributesFitting(_:) 메소드를 이용해서 셀 사이즈가 조절된다는 거 같다. 나는 모든 셀의 사이즈가 같으므로 필요 없는 속성이다. 

 

 

3. 컬렉션 뷰 마지막 셀이 화면의 끝과 맞지 않는 문제

이 문제도 2번 문제처럼 Estimate Size를 None으로 바꿔주면 해결되는 문제였다.

아마 이 문제 또한 셀 사이즈가 제대로 설정되지 않아서 발생한 게 아닐까 싶다.

 

 

 

4. 셀 사이 간격 설정하고 싶을 때

나는 셀 사이 간격을 15로 주고 싶었는데

Min Spacing 중에 셀 사이 간격이니까 단순하게 생각해서 For Cells의 값을 15로 줘봤다. 하지만 아무런 변화가 없었는데 위에 사진처럼 For Lines 값을 15로 주니 해결되었다.

그 이유는 minimumLineSpacing에 관한 내용을 보면 나와있다. minimumLineSpacing이 세로 스크롤일 때는 행 사이의 간격을 설정하게 되고 가로 스크롤일 때는 열 사이의 간격을 설정해 준다고 한다.

따라서 가로 스크롤일 때 옆 셀과의 간격을 주고 싶다면 For Lines 값을 바꿔야 한다.

 

 

5. 스크롤 바를 없애고 싶을 때

 

없애고 싶은 방향에 맞는 show Indicator 설정을 해제해 주면 스크롤을 하더라도 스크롤바가 생기지 않는다.