선택 도구
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
선택 도구는 사용자가 특정 데이터를 선택하고 설정하는 데 도움이 됩니다.
선택 도구
선택 도구는 사용자가 제한된 수의 항목 중에서 선택할 수 있도록 하는 데 사용해야 합니다.
기본적으로 항목은 양방향으로 무한 반복됩니다. 목록의 순서가 중요하거나 빠른 스와이프로 사용자가 첫 번째 요소와 마지막 요소에 도달할 수 있도록 하려면 이 동작을 사용 중지하는 것이 좋습니다.
분석
분석
A. 비활성 열
B. 콜론 시점
C. 선택 도구 열
D. 인기 콘텐츠
E. 중간 콘텐츠
F. 하단 콘텐츠
너비 및 높이
선택 도구 그룹이 사용 가능한 높이와 너비를 채웁니다. 선택 도구 열에는 4가지 레이아웃 옵션이 있습니다. 각 레이아웃은 가운데에 배치되며 사용 가능한 높이를 채웁니다. 열 너비는 글꼴에 필요한 자릿수를 수용하는 데 필요한 너비로 정의됩니다. 날짜 선택 도구는 예외로, 가로로 화면을 채우고 가장자리에서 블러 처리됩니다.
예를 들어 숫자는 '00'의 너비를 계산한 다음 너비를 설정합니다. 텍스트 필드의 경우(예: 월 필드) 'MMM'(라틴 알파벳에서 가장 넓은 문자)의 너비로 계산됩니다. 따라서 너비와 높이 (사용된 서체의 줄 높이)는 사용된 서체의 영향을 받습니다.
선택 도구 항목의 크기는 브레이크포인트에 따라 다릅니다.
사용
날짜 및 시간 선택 도구의 다음 예를 참고하세요.
사전 빌드된 날짜 및 시간 선택 도구 구현은 GitHub의 Horologist 라이브러리를 참고하세요.
사용자가 여러 선택 도구에서 여러 부분으로 구성된 값을 선택하는 유사한 환경을 만들려면 내장된 PickerGroup 구성요소를 사용하세요. 이 객체는 포커스 코디네이터 객체를 사용하여 올바른 선택 도구 요소에 포커스를 할당합니다.
적응형 레이아웃
TimePicker 24H
TimePicker 12H
날짜 선택 도구
대응하는 동작
텍스트 크기 증가
225+ 브레이크포인트를 지나면 선택 도구 요소의 글꼴 크기가 변경됩니다. 지연 스크롤 열 내의 상단 및 하단 사본은 중간 사본과 마찬가지로 (A)를 조정합니다. 다음은 몇 가지 예입니다.
2열 레이아웃
225dp 단위 아래 브레이크포인트
글꼴: 디스플레이 2
3열 레이아웃
225dp 단위 아래 브레이크포인트
글꼴: 디스플레이 3
그라데이션 크기 증가
선택 도구 열의 그라데이션은 사용 가능한 공간에 따라 높이가 정의됩니다. 상단 그라데이션과 하단 그라데이션은 모두 사용 가능한 높이의 3분의 1 (33%)로 설정됩니다. 즉, 사용 가능한 각 화면 크기에서 그라데이션이 비례하여 조정됩니다. 열 레이아웃과 무관하게 표시됩니다.
225dp 단위 아래 브레이크포인트
크기: 열 높이의 33%
225dp 중단점 이상
크기: 열 높이의 33%
열 간격 늘리기
열 간격은 225+ 중단점 이후 2dp 또는 4dp에서 시작하여 6dp로 늘어납니다. 선택한 레이아웃(2열 또는 3열 레이아웃)에 따라 다릅니다.
2열 레이아웃
225dp 단위 아래 브레이크포인트
4dp 열 간격
3열 레이아웃
225dp 단위 아래 브레이크포인트
2dp 열 간격
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-27(UTC)"],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
