Jetpack compose spin wheel 만들기 ... 퍼옴

Compose에서 스핀 휠 만들기

spin wheel

• 블리츠위에서 빙고, 솔리테어, 매치3, 풀 등의 클래식 게임을 플레이할 수 있는 애플리케이션을 개발하고 있습니다. 또한 무작위 보너스 금액과 같은 무작위 아이템이 있으므로 사용자에게 일종의 행운의 바퀴를 표시하고 싶었습니다.

• 안드로이드 앱은 전체 구성으로 되어 있습니다. 바퀴를 재창조하기 위해 라이브러리를 찾았지만 디자인이나 기술적인 측면에서 나에게 맞는 라이브러리는 없었습니다.

• https://github.com/commandiron/SpinWheelCompose에서 약간의 영감을 얻었지만 거의 모든 것을 다시 작업했습니다. 내 물레바퀴는 매개변수로 섹션 목록을 받아들여야 합니다. 각 섹션에는 브러시 배경이 있으며 섹션에는 컴포저블 그림이 있습니다. 이 구성 가능한 것은 섹션의 회전을 따라야 합니다. 단면이 거꾸로 되어 있으면 컴포지트도 거꾸로 되어 있어야 합니다.

• 내 물레바퀴는 다음과 같은 기능을 할 수 있어야 합니다.

• - 애니메이션 없이 특정 섹션으로 이동

• - 무기한 회전

• - 특정 섹션에서 부드럽게 멈출 수 있어야 합니다.

• 섹션을 만들어야 합니다. 구성에서는 끌어올리기라는 수식어 덕분에 호를 그리는 것이 쉽습니다(sweepAngle은 도 단위의 호 크기입니다). 그리고 함수 끌어올리기 아크: 박스(수식어 = 수식어.크기(200.dp).drawBehind {드로아크(브러시 = 브러시.수직 구배(listOf(color.Red, color.Yellow)startAngle = 0f, sweepAngle = 30f, useCenter = true,)}) {}} 좋아요, 이제 섹션을 상단으로 옮기고 중앙으로 이동해야 브러시를 올바르게 바르고 섹션 내용을 쉽게 배치할 수 있습니다.

• 시작각 = -90f - (sweepAngle / 2) 더 좋은데 제 붓이 전체 원에 적용되어 있어서 노란색이 보이지 않아요. 그래서 브러시를 반쯤 멈추라고 말해야 합니다. 이에 대한 파라미터가 있습니다. endY = 200.dp.toPx() /2f 야, 기대되는 결과가 있어.

• 이제 콘텐츠로 넘어갈 수 있습니다. 먼저 데이터 클래스에서 섹션을 설정합니다.

https://medium.com/voodoo-engineering/creating-a-spin-wheel-in-compose-b71d1b0c7b77

Creating a spin-wheel in Compose