Jetpack Compose Glimmer의 도형

적용 가능한 XR 기기

이 가이드는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 데 도움이 됩니다.

XR 기기 유형 알아보기 →

XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 서페이스는 도형을 사용하여 시각적 경계와 곡선을 정의합니다. Shapes 클래스는 다양한 유형의 구성요소에 적합한 여러 수준의 곡선을 제공합니다.

도형 카테고리

GlimmerTheme 클래스는 세 가지 표준 도형 크기를 정의합니다.

• 소형: 크기가 같은 네 개의 모서리가 있는 도형입니다. 카드와 같은 구성요소에 사용됩니다. 기본적으로 24.dp 의 RoundedCornerShape입니다.
• 중형: 소형과 대형 사이에 크기가 같은 네 개의 모서리가 있는 도형입니다. 가장 흔히 사용되는 도형이며 서페이스에서 기본적으로 사용됩니다. 기본적으로 36.dp 의 RoundedCornerShape입니다.
• 대형: 네 개의 둥근 모서리가 있는 도형입니다. 이 도형은 버튼과 같은 구성요소에 사용됩니다. 기본적으로 CircleShape입니다.

예: GlimmerTheme에서 도형 가져와 구성요소에 적용

먼저 GlimmerTheme.shapes에서 정의된 도형을 가져옵니다.

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

다음으로 이러한 도형을 일부 구성요소에 적용할 수 있습니다.

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

도형 맞춤설정

Shapes 클래스는 @Immutable입니다. 기존 테마 도형의 사본을 만들고 copy 함수를 사용하여 특정 값을 재정의할 수 있습니다. 이렇게 하면 앱 브랜드의 특정 반지름을 조정하면서 테마의 구조를 유지할 수 있습니다.

예: 특정 도형 값 재정의

다음 코드는 특정 도형 값을 재정의합니다.

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

기본값

GlimmerTheme에 달리 지정되지 않은 경우 시스템은 기본적으로 다음 값을 사용합니다.