Jetpack Compose를 사용한 커스텀 컴포저블

Jetpack Compose는 이미 UI를 만들기 위한 방대한 구성 요소 라이브러리를 제공합니다. 그러나 사용자에게 더 즐겁고 맞춤화된 경험을 제공하기 위해 때로는 자신만의 경험을 만들어야 합니다.

첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다.

Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를 살펴봅니다. Compose의 범위 슬라이더의 현재 버전은 부동 범위만 제공하고 선택한 범위에 따라 표시를 변경하여 단계적으로 정렬된 레이블을 표시하는 쉬운 방법이 없기 때문에 이 예를 선택했습니다.

이 시리즈의 결과는 다음과 같습니다.


컴포저블을 생성하는 데 사용되는 세 가지 다른 주제를 살펴보고 마지막에는 모두 함께 모을 것입니다.

캔버스에 그리는 방법(이 부분)

(새롭고 재미있으니까 :-D)

모든 코드와 프로젝트는 우리가 진행하는 동안 GitHub에 게시될 것입니다.

캔버스에 그리는 방법

컴포저블 내의 캔버스에 무언가를 그리는 방법부터 살펴보겠습니다.

첫 번째 간단한 단계로 원과 같은 기본 모양을 그립니다. 이를 위해 우리는

컴포저블 만들기

최소 크기 지정

캔버스 추가

원 그리기

@Composable
fun DrawSimpleCircle(
   color: Color,
   modifier: Modifier = Modifier,
   minSize: DpSize = DpSize(32.dp, 32.dp)
) {
   Canvas(modifier = modifier.size(minSize)) {
      drawCircle(color)
   }
}

이 컴포저블의 결과는 지정된 색상의 원이 되어 전체 컴포저블의 크기를 채웁니다.



또한 이 API를 사용하면 단일 색상으로 모양을 그릴 수 있을 뿐만 아니라 더 유연한 브러시 변형도 제공합니다. 브러시를 사용하면 그래디언트도 얻을 수 있습니다. 이 예는 두 가지 색상의 그라데이션을 보여주지만 API는 원하는 경우 다양한 색상 목록을 허용합니다.

...
drawCircle(
   brush = Brush.radialGradient(
      colors = listOf(
         centerColor, outerColor
      )
   )
)

Compose의 캔버스는 물론 원만 그릴 수 있는 것은 아닙니다. 다양한 그리기 방법을 제공합니다. 다음은 제공 방법의 예와 그 모양입니다.

drawRect



drawRoundRect



그리기선



drawOval



drawArc

...
drawArc(
   color = color,
   startAngle = 180f,  // 0f is at 3 o'clock of the circle
   sweepAngle = 180f,  // go 180° from startAngle
   useCenter = false,  // whether to fill the arc or not
   style = Stroke(width = 2.dp.toPx())
)

drawPath

...
val path = Path().apply {
   lineTo(size.width, 0f)   // line from start to end
   quadraticBezierTo(       // arc from the top to  bottom
      size.width / 2, size.height / 2,
      size.width, size.height
   )
   lineTo(0f, size.height)  // line from end to start
   quadraticBezierTo(       // arc from bottom to top 
      size.width / 2, size.height / 2,
      0f, 0f
   )
   close()                   // link end to start
}

drawPath(
   color = color,
   path = path,
   style = Stroke(width = 2.dp.toPx())
)

드로포인트



그리기 개요



그리기 이미지

...
drawImage(
   image = image,
   dstSize = IntSize(size.width.toInt(), size.width.toInt()),
   colorFilter = ColorFilter.lighting(Color.Yellow, Color.Red)
)

네이티브 캔버스

Canvas Composable 내에서 직접 제공되지 않는 유용한 그리기 기능 중 하나는 텍스트를 그리는 기능입니다. 하지만 drawIntoCanvas 메서드를 사용하면 여전히 이를 달성할 수 있습니다. drawText 메서드를 제공하는 기본 Canvas에 대한 액세스를 제공합니다.

중요 참고 사항: 기본 Canvas를 사용하는 경우 Compose 변형 대신 Paint 또는 Color 클래스를 사용하여 android.graphics 패키지에 의존해야 합니다.

Canvas(modifier = modifier.size(minSize)) {
   val paint = android.graphics.Paint()
   paint.textSize = textSize.toPx()
   paint.color = android.graphics.Color.BLACK
   drawIntoCanvas {
      it.nativeCanvas.drawText(text, 0f, 0f, paint)
   }
}

결론

캔버스와 기본 캔버스를 사용하여 레이블이 지정된 범위 슬라이더에 필요한 모든 것을 그릴 수 있습니다.



다음 부분에서는 터치 이벤트에 반응하여 맞춤 컴포저블을 대화형으로 만드는 방법을 살펴보겠습니다. .

이 게시물의 이미지를 만드는 코드는 GitHub에서 찾을 수 있습니다.