iOS Swift 네이버 그린닷 UI 구현 학습 (Circle CollectionView , Rotating Wheel , Circular Picker , Spin Menu)

 

 

 

 

네이버 앱에 보면 가운데 버튼 눌렀을 때 나오는 회전 메뉴가 있습니다.

그린닷이라고 하는데요 미스고 라는 부동산 앱에도 같은 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

 

이 라이브러리가 제일 비슷한 것 같아서 이걸 베이스로 하기로 결정하고 수정해봤습니다.

큰 틀은 UIControl 로 되어 있고, 애니메이션을 일반적인 방식이 아니라 CADisplayLink 로 하는데

이게 디스플레이의 주사율에 맞춰서, 특정 함수를 호출시킬 수 있는 타이머 개체입니다.

처음에는 어려웠지만 하다보니 되더라고요.

 

회전 메뉴 UI

 

작업한 내용은 크게 이렇습니다.

- 회전 시 각 부채꼴 도형에 똑바로 서있는 뷰 추가 (난이도 상)

- 이전, 다음 버튼으로 한칸 이동 동작 추가 (연타 대응 완료)

- 스핀 또는 버튼으로 회전 후 최종으로 멈춘 이벤트 전달 추가

- 각 부채꼴 조각 터치 이벤트 추가

- 중앙 버튼 추가

 

UIControl Tracking  , CADisplayLink , CAShapeLayer , atan2 , sqrt , abs 등

새로운 것도 많이 알게 되어서 도움이 많이 됐습니다.

끝~!

iOS

Swift

Xcode

Naver