[Swift] CollectionView에 PageControl 사용하기

 

오늘 다뤄볼 내용은 CollectionView에 PageControl을 사용하는 방법입니다.

 

PageControl이 무엇인가요??

라고 이야기할 수 있는데요.

 

 

가로로 일련의 점들을 표현하는 컨트롤이라고 하네요.

그리고 그 점들은 문서나 다른 데이터 모델 엔티티의 페이지에 해당한다고 합니다.

 

말보단 보는게 최고죠 ㅋㅋㅋ

 

 

이 화면은 제가 메가박스 앱을 클론 할 때

썼던 화면인데요.

 

저 밑에 5개의 점이 보이나요?

네 저게 바로 UIPageControl 입니다.

 

UIPageControl을 통해서

총 몇 개의 페이지가 있는지

그리고 현재 나타나고 있는 페이지가 어디인지

사용자가 쉽게 알 수 있겠네요!!

 

이제 코드로 한 번 보겠습니다.

 

 

UIPageControl을 생성해 주시고요.

 

pageControl의 속성을 볼게요.

 

1. hidesForSinglePage

페이지가 하나일 때 pageControl을 숨길 것인지 확인하는 속성입니다.

페이지가 하나일 때는 굳이 보여줄 필요가 없기 때문에 true로 주었습니다.

 

2. numberOfPages

pageControl의 점의 개수라고 생각하면 될 것 같습니다.

지금 저는 정적으로 5라는 값을 넣어주었지만,

실제 백앤드에서 데이터를 가져오면

그 데이터의 count 값으로 넣게 될 것입니다.

 

3. pageIndicatorTintColor

pageControl의 점의 색깔입니다.

현재 보이는 페이지의 점 색깔과 달라야겠죠?

 

4. currentPage

현재 pageControl의 위치입니다.

스크롤 뷰와 협업? 해야 하기 때문에 ㅋㅋㅋㅋ

아직 위쪽에 코드에는 없고 아래에서 살펴볼게요.

 

다음으로 pageControl의 AutoLayout을 잡아줍니다.

보통 중앙 하단에 많이 잡아주는 거 같아요!

 

그러면 얼추 pageControl을 사용하는 방법은 다 끝났는데

가장 중요한 currentPage를 조절하는 방법입니다.

 

저도 처음에 인터넷에서 많이 찾아봤는데

다들 willDisplay라는 델리게이트에서

pageControl.currentPage = indexPath.row

로 현재 페이지를 조절하더라고요.

 

물론 안 되는 건 아닙니다.

동작은 하는데!!!

페이지를 살짝 옆으로 넘기는 척하다가

다시 돌아와도

이미 넘어간 것처럼 pageControl이 표시가 됩니다.

 

다시 말해서

현재 보고 있는 페이지와 pageControl이 가리키고 있는 페이지가 다른 거죠!!

 

그래서 저는!!

아래와 같이 구현했습니다.

 

 

UICollectionViewDelegate에서

scrollViewWillEndDragging 메서드를 사용했습니다.

 

그리고 현재 페이지를 구하기 위해서

targetContentOffset.pointee.x / self.frame.width

라는 식을 이용했습니다.

 

이 식을 사용하게 되면

컬렉션 뷰의 페이지가 완전히!!

넘어갔을 때

page 값이 1이 될 거예요.

 

그때

pageControl의 currentPage 값을 바꿔주는 겁니다.

 

그러면 아까 위에 말한

넘어갈 듯하다가 안 넘어갔을 때

pageControl이 넘어가는 문제를 해결할 수 있습니다!