이미지를 잘린 도형에 맞게 조정하고 도형의 테두리 주위에 그림자를 그려 입체감을 줄 수 있습니다. 이 기법은 아바타 및 제품 썸네일과 같은 디자인을 만들거나 맞춤 도형으로 로고를 표시하는 데 유용합니다.
도형에 잘린 이미지를 표시하려면 다음을 실행해야 합니다.
- 도형을 만듭니다.
- 이미지를 도형으로 자릅니다.
버전 호환성
이 구현을 사용하려면 프로젝트 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) } }
코드 관련 핵심 사항
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) ) }
코드 관련 핵심 사항
RoundedPolygon
및RoundedPolygonShape
객체는 이미지에 육각형 도형을 정의하고 적용하는 데 사용됩니다.- 이 코드는
graphicsLayer
를 사용하여 이미지에 고도 기반 그림자를 추가합니다. 이렇게 하면 깊이감이 느껴지고 배경과 시각적으로 구분됩니다. remember
블록을 사용하면 도형 및 클리핑 정의가 한 번만 계산되고 나중에 UI를 재구성할 때 기억되도록 하여 성능을 최적화할 수 있습니다.
결과
![가장자리에 그림자가 적용된 육각형의 개](https://developer.android.com/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=ko)
이 가이드가 포함된 컬렉션
이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ko)
이미지 표시
밝고 흥미로운 시각적 요소를 사용하여 Android 앱에 멋진 디자인과 분위기를 부여하는 기법을 알아보세요.
질문이나 의견이 있으신가요?
자주 묻는 질문(FAQ) 페이지로 이동하여 빠른 가이드를 알아보거나 문의하여 의견을 보내주세요.