온보딩 화면 구현 - UICollectionView

온보딩화면을 구현하면 새로운 사용자에게 서비스를 이용하기위한 안내 및 설정들을 제공할 수 있습니다.

주의할 점

1. 서비스사용의 도움이 되는 내용들을 제공하는 것을 권장합니다.
2. 온보딩화면이 끝난 후 앱 시작화면으로 이동할 수 있도록 처리합니다.
3. 너무 많은 내용을 제시하기 보다는 필요한내용들만 직관적으로 표시합니다.

UIPageViewController 방식으로 보여주는 방법 vs UICollectionView로 보여주는 방법

• 온보딩화면이나 테스트화면을 매번 새로운 UI디자인을 보여주는 것이 아닌 비슷한 디자인형식으로 보여주는데 UIPageViewController를 사용하면 여러 ViewController를 사용하게 되므로 메모리측면에서 비효율적이라고 생각합니다.

UICollectionView Page나누는 원리

• 아이템 마다 컬렉션뷰의 높이와 너비를 지정
• Scrollview.frame.width = collection view.frame.width 와 동일합니다.
• contentOffset.x 을 사용하여 스크롤을 했을 때 x좌표를 이동시킵니다.
• collectionView.isPagingEnabled : 컬렉션뷰를 스크롤할 때 아이템단위로 스크롤하는 속성(페이징옵션)
  • 🚨  위 속성을 사용할 때 컬렉션뷰의 아이템크기와 아이템간의 거리를 정확히 설정해야합니다.

🚨  UICollectionView must be initialized with a non-nil layout parameter : UIFlowLayout초기화 안해줬을 때 디버그에러

온보딩화면 종료 후 첫 화면 이동 (window의 루트뷰를 변경하기)

guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene else { return }
windowScene.windows.first?.rootViewController = ViewController()
windowScene.windows.first?.makeKeyAndVisible()

• 온보딩화면을 모두 본 후에는 다시 돌아올 수 없도록 루트뷰를 변경합니다.

앱 최초실행 - 테스트 가능한 코드

• 앱 최초실행시 UserDefault를 flag를 사용해서 여부를 판단할 수 있지만 매번 앱을 삭제 후 설치해서 판단하기가 테스트할 때는 번거롭기 때문에 두가지 방식으로 분리

NSMutableAttributedString

텍스트 지정한 범위만 색깔 변경하기

let stringLength = attributedString.length

let attributedString = NSMutableAttributedString(string: "위치 기반으로 빠르게\n주위 친구를 확인")
attributedString.addAttributes([.foregroundColor: UIColor.green],
                                range: NSRange(location: 0, length: 5))
attributedString.addAttributes([.foregroundColor: UIColor.red],
                                range: NSRange(location: 6, length: stringLength - 6))

• range를 매개변수로 문자열의 지정한 범위의 색상을 변경할 수 있습니다.

텍스트 행 간의 간격 지정하기

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 1.08
paragraphStyle.alignment = .center // 문자열을 중앙에 정렬

let attributedString = NSMutableAttributedString(string: "위치 기반으로 빠르게\n주위 친구를 확인")
attributedString.addAttributes([.kern: -0.5, .paragraphStyle: paragraphStyle])

• 텍스트를 중앙에 정렬하기 위해서는 UILable의 textAlignMent 옵션이 아닌 paragraphStyle 를 정렬해줘야 합니다.

참고링크

• 온보딩화면
  • H.I.G - https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/
  • 온보딩구현 CollectionView (Swift5, Xcode 12) - https://youtu.be/VMiaNFabsZA
  • 최초실행 여부 - https://dongkyprogramming.tistory.com/30
• NSMutableAttributedString
  • 텍스트 특정범위 폰트크기, 색상변경 - https://0urtrees.tistory.com/183