티스토리 뷰
iOS Swift 네이버 그린닷 UI 구현 학습 (Circle CollectionView , Rotating Wheel , Circular Picker , Spin Menu)
GonsLab 2023. 6. 7. 23:34
네이버 앱에 보면 가운데 버튼 눌렀을 때 나오는 회전 메뉴가 있습니다.
그린닷이라고 하는데요 미스고 라는 부동산 앱에도 같은 UI가 있네요.
휠을 돌리는게 신기하기도 하고 공부도 할겸 저도 한번 만들어 봤습니다.
처음에는 컬렉션뷰로 하는건줄 알고 Circle CollectionView 이런식의 키워드로 접근했는데 안나오더라고요
그래서 Rotating Wheel , Circular Picker , Spin Menu 등으로 검색하다가 괜찮아보이는걸 찾았습니다.
https://github.com/joshdhenry/SpinWheelControl
GitHub - joshdhenry/SpinWheelControl: An inertial spinning wheel UI control that allows selection of an item. Cocoapod written i
An inertial spinning wheel UI control that allows selection of an item. Cocoapod written in Swift. - GitHub - joshdhenry/SpinWheelControl: An inertial spinning wheel UI control that allows selectio...
github.com
이 라이브러리가 제일 비슷한 것 같아서 이걸 베이스로 하기로 결정하고 수정해봤습니다.
큰 틀은 UIControl 로 되어 있고, 애니메이션을 일반적인 방식이 아니라 CADisplayLink 로 하는데
이게 디스플레이의 주사율에 맞춰서, 특정 함수를 호출시킬 수 있는 타이머 개체입니다.
처음에는 어려웠지만 하다보니 되더라고요.
작업한 내용은 크게 이렇습니다.
- 회전 시 각 부채꼴 도형에 똑바로 서있는 뷰 추가 (난이도 상)
- 이전, 다음 버튼으로 한칸 이동 동작 추가 (연타 대응 완료)
- 스핀 또는 버튼으로 회전 후 최종으로 멈춘 이벤트 전달 추가
- 각 부채꼴 조각 터치 이벤트 추가
- 중앙 버튼 추가
UIControl Tracking , CADisplayLink , CAShapeLayer , atan2 , sqrt , abs 등
새로운 것도 많이 알게 되어서 도움이 많이 됐습니다.
끝~!
iOS
Swift
Xcode
Naver
'iOS Library' 카테고리의 다른 글
| iOS Swift Google ML Kit - 머신러닝 번역 (Machine Learning Translation) (3) | 2023.11.01 |
|---|---|
| iOS Swift AWS S3 사용법 (Amazon Simple Storage Service) (2) | 2022.01.17 |
| iOS Swift 저작권 표시 Library License copyright indication (0) | 2021.03.24 |
| iOS Swift 라이브러리 바텀 시트 (MDC Sheets: bottom) (0) | 2021.03.17 |
| iOS Swift 라이브러리 MarqueeLabel (움직이는 레이블, 흐르는 라벨, 움직이는 텍스트) (0) | 2021.03.12 |