[iOS] CollectionView와 PageControl로 Pager 구현하기

CollectionView와 PageControl로 Pager 구현하기

 

💬 들어가기 전에(Prepare)

생각보다 우리는 페이징 되는 화면을 자주 만납니다.

 

앱의 온보딩 화면부터 시작해, 캐러셀 뷰(Carousel View), 안드로이드에서는 View Pager라고 불리우는 탭 간 전환되는 화면 등 정말 많은데요! (사실 예시화면을 다 첨부하고 싶지만,,, 귀찮은건 안비밀..ㅎㅎ,,, 꼭 첨부하도록 하겠습니다..)

 

위에서 언급한 화면을 구현하는데에는 그 종류만큼 다양한 방법들이 존재합니다.

라이브러리를 쓴다거나 스크롤뷰를 이용하는 방법, 그리고 오늘 제가 소개해드릴 컬렉션뷰를 이용하는 방법이 있겠네요.

필요한 상황에 맞게 적절하게 사용하면 되겠죠?

 

오늘 제가 예시로 설명드릴 화면은 앱을 사용자가 처음 시작하게 되면 만나게 되는 온보딩 화면(Onboarding View)입니다.

(그나저나 일러스트 너무 예쁘지 않나요...? 두리번 디자이너 대박.. 일러스트 저작권은 두리번 팀에 있습니다!)

 

'작은 움직임이 만드는 우리다운 여행'  앱 서비스 두리번(Dooribon)의 온보딩 페이지 미리보기 (Preview)

 

🧐 스케치(Sketch)

전체적인 스케치

 

전체적인 스케치는 다음과 같습니다.

큰 틀은 스토리보드 내에서 CollectionView와 PageControl 그리고 Button을 배치해서 잡았구요.

 

셀 디자인 같은 경우는 CollectionViewCell Xib를 만들어서 진행했습니다.

이번에 디자인 한 것은 Lottie 라이브러리를 이용해서 애니메이션 파일을 넣게 되어서

애니메이션이 들어갈 자리를 UIView로 영역만 잡아주었어요~

전체 디자인

셀 디자인

 

🧐 폴더 구조(Foldering)

전체 폴더 구조

 

🧑🏻‍💻 구현하기 (Development)

설정부

일단 컬렉션 뷰를 배치하고 난 다음에 잘 설정해야하는 부분이 2군데 정도 있어요.

왼쪽에서 볼 수 있듯이 Paging Enabled에 체크✅를 그리고 오른쪽에서 볼 수 있듯이 Estimate Size는 None으로 설정해주세요.

 

딱히 어려운 부분은 없어요. 순서대로 한 번 가볼게요.

코드부

1. 기본 세팅

• 프로퍼티 세팅
  • onboardingDate: 온보딩 각 화면에 들어갈 데이터 변수 (animation, title, description)
  • currentPage: 현재 페이지 위치를 나타내는 변수
• UI, 컬렉션뷰, 더미데이터 세팅

    // MARK: - Properties
    var onboardingData: [OnboardingDataModel] = []
    var currentPage: Int = 0 {
        didSet {
            pageControl.currentPage = currentPage
            if currentPage == onboardingData.count - 1 {
                nextButton.setTitle("Start", for: .normal)
            } else {
                nextButton.setTitle("Next", for: .normal)
            }
        }
    }

// MARK: - Custom Functions
extension OnboardingViewController {
    private func setUI() {
        nextButton.layer.cornerRadius = 10
        pageControl.isUserInteractionEnabled = false
    }
    
    private func setCollectionView() {
        onboardingCollectionView.delegate = self
        onboardingCollectionView.dataSource = self
        
        let onboardingNib = UINib(nibName: OnboardingCollectionViewCell.cellId, bundle: nil)
        onboardingCollectionView.register(onboardingNib, forCellWithReuseIdentifier: OnboardingCollectionViewCell.cellId)
    }
    
    private func setOnboardingData() {
        onboardingData.append(contentsOf: [
            OnboardingDataModel(lottieName: "onboarding1_img",
                                title: "여행을 떠나볼까요?",
                                description: "여행을 생성하거나 참여 코드를 입력하여\n새로운 여행을 시작하세요"),
            OnboardingDataModel(lottieName: "onboarding2_img",
                                title: "우리다운 여행을 만들어요",
                                description: "유형 테스트로 여행 스타일을 파악하고,\n보드에서 소통하며 서로를 알아갈 수 있어요"),
            OnboardingDataModel(lottieName: "onboarding3_img",
                                title: "함께 여행을 만들어요",
                                description: "여행 정보를 입력하고 실시간으로 공유하여\n일정을 체계적으로 관리할 수 있어요")
        ])
    }
}

 

2. 컬렉션뷰 세팅

- 그 다음에 우리가 기본적으로 컬렉션뷰를 다루는 것처럼 Delegate, DataSource, FlowLayout을 설정을 해요.

- 스크롤뷰 Delegate 관련 코드가 있는데 뒤에서 설명할게요!

// MARK: - CollectionView Delegate, DataSource
extension OnboardingViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return onboardingData.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = onboardingCollectionView.dequeueReusableCell(withReuseIdentifier: OnboardingCollectionViewCell.cellId, for: indexPath) as? OnboardingCollectionViewCell else { return UICollectionViewCell() }
        cell.setOnboardingSlides(onboardingData[indexPath.row])
        return cell
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let width = scrollView.frame.width
        currentPage = Int(scrollView.contentOffset.x / width)
    }
}

// MARK: - CollectionView Delegate Flow Layout
extension OnboardingViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: collectionView.frame.height)
    }
}

 

3. 스크롤에 따른 온보딩 페이지 스와이프

위에서 보았던 코드인데요. 애플 공식문서를 보면 컨텐츠를 스크롤할때 컨텐츠 오프셋의 변경 내용을 대리자에게 알린다라고 설명하고 있습니다. 간단하게 보면 컬렉션뷰도 스크롤뷰의 일종이잖아요? 옆으로 스와이프 할 때마다 위치를 가져와서 페이징을 처리해주기 위함입니다!

Apple Developer 공식문서

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let width = scrollView.frame.width
        currentPage = Int(scrollView.contentOffset.x / width)
    }

총 3가지의 컨텐츠가 있으니깐 컨텐츠 오프셋을 스크롤뷰의 전체 넓이로 나눠보면

currentPage는 코드에 따라서 0, 1, 2가 나올 수 있겠네요!

 

4. Next 버튼을 누를때마다 컨텐츠 전환

위에서 gif를 보시면 우측 아래의 버튼을 누를때마다 화면이 전환되는 것을 보실 수 있어요.

코드는 다음과 같은데요!

 

가장 마지막 컨텐츠일때는 나중에 화면전환을 해야하니까 분기처리를 해주고,

그 전 상황에서는 currentPage를 1씩 증가시켜주고,

indexPath를 구해서 scrollToItem이라는 메서드로 컬렉션뷰를 페이징 해주고 있습니다.

(이 부분은 공식문서에서 메서드를 좀 더 찾아보면 좋을 듯 하네요..!, 다 설명하기에는 내용이 너무 길ㅇ...)

    // MARK: - Actions
    @IBAction private func nextButtonTapped(_ sender: Any) {
        if currentPage == onboardingData.count - 1 {
            print("go to main")
        } else {
            currentPage += 1
            let indexPath = IndexPath(item: currentPage, section: 0)
            onboardingCollectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        }
    }

 

5. 프로퍼티 관찰자를 활용해 버튼 컨텐츠 변경

네 마지막 내용입니다! 우리는 프로퍼티 관찰자를 이용해서 변경되는 내용이 있을때마다 어떤 액션을 처리할 수 있습니다.

저도 최근에 해당 내용을 자주 사용하고 있는데요. 기회가 되면 내용을 따로 정리해보겠습니다.

우선 코드를 보시면요!

    var currentPage: Int = 0 {
        didSet {
            pageControl.currentPage = currentPage
            if currentPage == onboardingData.count - 1 {
                nextButton.setTitle("Start", for: .normal)
            } else {
                nextButton.setTitle("Next", for: .normal)
            }
        }
    }

요렇게! currentPage의 값이 바뀔때마다 pageControl의 현재 페이지 위치를 바꿔주고,

마지막 온보딩 페이지에 도달하면 버튼의 타이틀을 Next에서 Start로 바꿔주는 것을 알 수 있습니다.

 

🙌 마무리하며(End)

쓰다보니, 어느덧 글이 끝이 났네요..! 사실 내용이 너무 길어질 거 같아 요약해서 내용을 정리했는데

필요하신 내용이라면 천천히 따라해보시고, 혹시나 궁금한 점이나 잘못된 내용이 있다면 댓글 남겨주세요 :)

 

페이저 관련해서는 더 어려운 내용들도 많이 있다고 생각하는데요.

나중에 다른 내용으로 다시 찾아오겠습니다 :) 감사합니다~

 

전체 코드는 제 깃허브 링크에 있습니다. 아래에 첨부하도록 할게요!

https://github.com/Taehyeon-Kim/iOS-Wiki/tree/master/OnboardingSample