[iOS] - 온보딩화면구현

수킴·2022년 1월 19일

iOS

목록 보기

3/7

온보딩 화면 구현 - UICollectionView

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

주의할 점

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

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])