목록을 사용하면 사용자는 Wear OS 기기에서 여러 선택 항목 중 하나를 고를 수 있습니다.
많은 Wear OS 기기가 원형 화면을 사용하므로 화면의 상단과 하단 근처에 표시되는 목록 항목을 보기가 어렵습니다. 이러한 이유로 Wear OS용 Compose에는 크기 조정 및 페이딩 효과를 지원하는 ScalingLazyColumn
이라는 LazyColumn
클래스의 한 가지 버전이 포함되어 있습니다. 항목이 화면 중앙으로 이동하면 항목이 더 크고 불투명해집니다.
다음 애니메이션은 요소가 화면에서 움직일 때 크기와 투명도가 어떻게 변경되는지 보여줍니다.
다음 코드 스니펫은 Horologist의
ScalingLazyColumn
레이아웃의 버전을 사용해
다양한 Wear OS 화면 크기에서 보기 좋게 표시됨(예:
첫 번째와 마지막 요소에 필요한 패딩을 추가합니다.
ScalingLazyColumn
의 scrollState
에 설정된 목록의 예입니다.
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
맞추기 및 플링 효과 추가
사용자가 ScalingLazyColumn
객체에 적용하는 손가락 동작에 맞추기 및 플링 동작을 추가할 수 있습니다. 이 효과는 사용자가 목록의 항목을 더 정확하게 탐색하고 긴 목록에서 더 빠르게 이동하는 데 도움이 됩니다.
이 효과를 Horologist의 ScalingLazyColumn
버전에 추가하려면 다음 안내를 따르세요.
columnState
의 rotaryMode
매개변수를
RotaryWithSnap
를 사용해야 합니다.
val columnState = rememberResponsiveColumnState( // ... // ... rotaryMode = ScalingLazyColumnState.RotaryMode.Snap ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { // ... // ... } }
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- Wear OS용 Compose Codelab
- 목록 및 그리드
- Compose에서 뷰 사용