Jetpack Compose Glimmer의 서피스

적용 가능한 XR 기기

이 가이드에서는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 방법을 설명합니다.

XR 기기 유형 알아보기 →

디스플레이 안경

XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 surface 구성요소는 버튼 및 카드와 같은 구성요소의 고유한 시각적 영역 또는 물리적 경계를 나타내는 기본 빌딩 블록입니다.

표면은 다음과 같은 시각적 및 물리적 속성을 담당합니다.

클리핑: 하위 요소를 지정된 도형으로 클리핑합니다.
테두리: 구성요소 경계를 강조하기 위해 내부 테두리를 그립니다. 포커스가 맞춰지면 포커스 강조표시가 있는 더 넓은 테두리를 그립니다.
배경: 표면 영역에 배경 색상을 적용합니다.
깊이 효과: 구성요소의 상태 (예: 기본값과 포커스)에 따라 DepthEffect 그림자를 렌더링합니다.
콘텐츠 색상: 표면 내 텍스트 및 아이콘의 색상을 제공하며, 기본적으로 배경 색상에서 계산됩니다.
상호작용 상태: 표면을 누르면 눌린 오버레이를 그리고 포커스가 맞춰지면 강조표시가 있는 더 넓은 테두리를 그립니다.

예: 표면 만들기

다음 코드는 클리핑, 배경, 기본 테두리가 있는 표면을 만듭니다.

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

상호작용 및 포커스

표면은 기본적으로 포커스할 수 없으므로 사용자가 표면과 상호작용할 수 없습니다. 대부분의 경우 표면은 사용자가 포커스를 일관되게 이동하고 구성요소 간에 탐색할 수 있도록 상호작용해야 합니다. 포커스할 수 있도록만 하려는 표면에는 Compose focusable 수정자 를 사용할 수 있습니다. 마찬가지로 Compose clickable 수정자를 사용하여 클릭 가능한 표면을 만들 수 있습니다. 작업이 필요한 표면에는 다른 수정자를 사용할 수도 있습니다.

다음 코드는 포커스할 수 있는 표면과 클릭 가능한 표면의 예를 보여줍니다.

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}SurfaceSamples.kt

코드의 주요 사항

포커스할 수 있는 표면의 공유 상호작용 소스: .surface() 및 .focusable()는 모두 동일한 interactionSource를 공유해야 합니다. 이렇게 하면 표면이 포커스 변경에 반응할 수 있습니다.
클릭 가능한 표면의 공유 상호작용 소스: .surface()와 .clickable()는 모두 동일한 interactionSource를 공유해야 합니다. 이렇게 하면 시각적 상태 (예: 누르기 또는 포커스)가 동기화되어 표면이 사용자 입력에 시각적으로 반응할 수 있습니다.
수정자 순서 지정: 수정자 시퀀스는 매우 중요합니다. .surface()는 레이아웃을 클리핑하므로 .clickable() 앞에 배치하면 터치 영역이 표면의 도형으로 제한됩니다. .clickable()이 먼저 나오면 상호작용 영역이 구성요소의 표시되는 클리핑된 경계를 벗어날 수 있습니다.

SurfaceDepthEffect

The SurfaceDepthEffect 클래스는 상호작용 상태 간 그림자의 전환을 관리합니다.

depthEffect: 표면이 기본 상태일 때 사용되는 그림자 효과입니다.
focusedDepthEffect: 표면에 포커스가 맞춰질 때 사용되는 그림자 효과입니다.