도형으로 잘린 이미지 표시

이미지를 잘린 도형에 맞게 조정하고 도형의 테두리 주위에 그림자를 그려 입체감을 줄 수 있습니다. 이 기법은 아바타 및 제품 썸네일과 같은 디자인을 만들거나 맞춤 도형으로 로고를 표시하는 데 유용합니다.

도형에 잘린 이미지를 표시하려면 다음을 실행해야 합니다.

  • 도형을 만듭니다.
  • 이미지를 도형으로 자릅니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

도형 만들기

다음 코드는 둥근 다각형을 동적으로 그리고 렌더링할 수 있는 맞춤 도형을 만듭니다.

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

코드 관련 핵심 사항

  • RoundedPolygon.getBounds()는 RoundedPolygon 클래스에 확장 함수를 정의하여 경계를 계산합니다.
  • RoundedPolygonShape 클래스는 Shape 인터페이스를 구현하므로 Jetpack Compose에서 맞춤 도형 (둥근 다각형)을 정의할 수 있습니다.
  • 도형은 Matrix를 사용하여 유연한 렌더링을 위한 크기 조절 및 변환 작업을 관리합니다.
  • createOutline() 함수는 RoundedPolygon 객체를 사용하여 지정된 크기에 맞게 크기를 조정하고 변환한 후 그려질 최종 도형을 설명하는 Outline 객체를 반환합니다.

도형으로 이미지 자르기

다음 코드는 이미지를 육각형으로 자르고 은근한 음영을 추가하여 깊이감을 제공합니다.

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}
ShapesSnippets.kt

코드 관련 핵심 사항

  • RoundedPolygon 및 RoundedPolygonShape 객체는 이미지에 육각형 도형을 정의하고 적용하는 데 사용됩니다.
  • 이 코드는 graphicsLayer를 사용하여 이미지에 고도 기반 그림자를 추가합니다. 이렇게 하면 깊이감이 느껴지고 배경과 시각적으로 구분됩니다.
  • remember 블록을 사용하면 도형 및 클리핑 정의가 한 번만 계산되고 나중에 UI를 재구성할 때 기억되도록 하여 성능을 최적화할 수 있습니다.

결과

가장자리에 그림자가 적용된 육각형의 개
그림 1. 맞춤 도형이 클립으로 적용되었습니다.

이 가이드가 포함된 컬렉션

이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.

밝고 흥미로운 시각적 요소를 사용하여 Android 앱에 멋진 디자인과 분위기를 부여하는 기법을 알아보세요.
빠른 가이드 모음

질문이나 의견이 있으신가요?

자주 묻는 질문(FAQ) 페이지로 이동하여 빠른 가이드를 알아보거나 문의하여 의견을 보내주세요.
FAQ로 이동 의견 남기기