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")
    }
}

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}

Key points about the code

  • Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}

코드에 관한 주요사항

  • 공유 상호작용 소스 : .surface()와 .clickable() 은 동일한 interactionSource를 공유해야 합니다. 이렇게 하면 시각적 상태 (예: 누르기 또는 포커스)가 동기화되어 표면이 사용자 입력에 시각적으로 반응할 수 있습니다.

  • 수정자 순서: 수정자 순서는 중요합니다. .surface()는 레이아웃을 클리핑하므로 이전에 배치됩니다 .clickable() _앞에_ 배치하면 터치 영역이 표면의 도형으로 제한됩니다. .clickable() 이 먼저 나오면 상호작용 영역이 구성요소의 표시되는 클리핑된 경계를 벗어날 수 있습니다.

SurfaceDepthEffect

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

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