[UI] 원을 따라 움직이는 버튼 구현

이번에는 원형으로 움직이는 버튼을 구현해보겠습니다.

위의 그림은 화면 상에 위치한 슬라이드 버튼이 터치의 움직임에 따라 각도를 계산하여 원형으로 움직이는 모습입니다.

간단하게 말하면 중심 위치를 기준으로 터치된 좌표의 각도를 구하여 슬라이드 버튼을 위치시키고 배경색을 칠하는 것입니다.

그 중에서 슬라이드 버튼의 좌표를 구하는 공식은 다음과 같습니다.

x = radius * cos(angle) + centerX

y = radius * sin(angle) + centerY

위의 식으로 간단하게 원을 따라 움직이는 슬라이드 버튼을 구현하였습니다. 여기에서 각 좌표의 값에 슬라이드 버튼의 절반 사이즈를 빼줘야 슬라이드 버튼의 중심이 원을 따라 움직이게 됩니다.

이런 슬라이드 버튼은 이동 가능 각도를 조절하거나 백그라운드 비트맵을 수정하여 쓸만하게 만들 수 있습니다.

---

파일 첨부 :

SampleCircleSlideButton.zip