[iOS : Toy Project] NRC Onboarding

📌 일곱번째 프로젝트 

NRC Onboarding 앱을 만들어보자

 

1️⃣ Data 확인 및 SearchViewController 만들기

- 이전 프로젝트들과 마찬가지로 패캠에서 제공해준 데이터들을 사용

- "OnboardingViewController" 이름의 UIViewController을 만들어서, Main storyboard와 연결까지 완료

 

 

2️⃣ 배경이미지 넣기

- 배경 이미지는 Assest에 있음

Aspect Fill로 이미지가 가득하게!

 

3️⃣ StackView를 이용하여 하단에 버튼 넣기

Stack View의 Auto Layout

StackView의 Spacing를 1만주면 버튼 사이 라인이 생긴다.

 

 

4️⃣ Page Control + Collection View

- View에 수평방향 맞게하고, StackView와의 vertical 거리는 40으로!

 

 

5️⃣ UICollectionViewCell 만들기

- "OnboardingCell" 이라는 이름으로!

- CollectionViewCell과 연결 , 재사용 cell도 설정

//  OnboardingCell.swift


import UIKit

class OnboardingCell: UICollectionViewCell {
    
    // component 연결
    @IBOutlet weak var thumbnailImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    
    // 데이터 연결
    func configure(_ message: OnboardingMessage){
        thumbnailImageView.image = UIImage(named: message.imageName)
        titleLabel.text = message.title
        descriptionLabel.text = message.description
    }
}

 

6️⃣ View Controller까지 코드 중간 완성

//
//  OnboardingViewController.swift
//  NRC Onboarding
//
//  Created by 오예진 on 2022/05/30.
//

import UIKit

class OnboardingViewController: UIViewController {

    // collectionView 연결
    @IBOutlet weak var collectionView: UICollectionView!
    
    // 메세지 가져오기
    let messages: [OnboardingMessage] = OnboardingMessage.messages
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.estimatedItemSize = .zero
        }

    }
}

extension OnboardingViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "OnboardingCell", for: indexPath) as? OnboardingCell else{
            return UICollectionViewCell()
        }
        
        // messages에서 item을 가져와서 cell을 구성
        let message = messages[indexPath.item]
        cell.configure(message)
        return cell
    }
    
    
}

extension OnboardingViewController: UICollectionViewDelegateFlowLayout {
    
}

 

아래로 스크롤 되는 collection view

 

 

7️⃣ cell이 좌우 스크롤 되도록 바꾸기

CollectionView의 Scroll Direction : Horizontal

 

 

 

8️⃣ 페이징 느낌나게 바꾸기 + Indicator 도 없애기

CollectionView의 Paging Enabled 체크

 

Indicator 체크 모두 해제

 

페이징 느낌 + Indicator 없앰

이후 description 중앙 정렬까지 완료해줬음

 

 

9️⃣ cell 사이즈 조정하기

// OnboardingViewController.swift

//...

extension OnboardingViewController: UICollectionViewDelegateFlowLayout {
     
    // cell 사이즈 조정
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        // cell과 collectionView의 사이즈가 같음
        return collectionView.bounds.size   // size 프로퍼티 안에 width, height 모두 있음.
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return .zero
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return .zero
    }
}

 

 

 

그랬더니 아주 깔꼼하게 넘겨지는 cell들..!

 

 

🔟 Page Control 연결

- View Controller에 Page Control을 연결

// OnboardingViewController.swift

import UIKit

class OnboardingViewController: UIViewController {

    //...
    
    // pageControl 연결
    @IBOutlet weak var pageControl: UIPageControl!
    
    override func viewDidLoad() {
    
        // ...
        
        // 페이지 개수 ( 동그란 점의 개수 )
        pageControl.numberOfPages = messages.count

    }
}

extension OnboardingViewController: UIScrollViewDelegate {
//    func scrollViewDidScroll(_ scrollView: UIScrollView) {
//        // 페이지 구하는 식
//        print(Int(scrollView.contentOffset.x / self.collectionView.bounds.width))
//    }
    
    // 페이지가 움직이다가 멈췄을 때 실행되는 함수
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        
        // 위에서 페이지 구하는 식 가져오기
        let index = Int(scrollView.contentOffset.x / self.collectionView.bounds.width)
        
        // 이 index를 currentPage에 업데이트!
        pageControl.currentPage = index
    }
}

 

🚀 구현완료!

 

 

---

📌 정리,

• Scroll Direction = Horizontal : collectionView가 좌우로 스크롤 되도록 바꿈
• PageControl을 CollectionView와 연결
  • PageControl.numberOfPages : 페이지 개수
  • UICollectionView는 UIScrollView의 특성을 가지고 있음
    • UIScrollViewDelegate의 scrollViewDidEndDecelerating : 페이지를 움직이다가 멈췄을 때마다 실행되는 함수
      • 여기에 index를 계산하고 pageControl.currentPage에 할당해주면 Page와 CollectionView의 아이템이 연결됨!

 

 

---

Reference

패스트캠퍼스 온라인 강의