목록은 스크롤과 포커스가 내장된 요소의 컨테이너입니다.
원칙
명확한 구성: 목록은 명확하고 쉽게 훑어볼 수 있는 세로 배열로 정보를 표시해야 합니다.
일관된 항목 표시: 목록 항목은 일관된 시각적 구조를 따라야 합니다.
포커스 가능성 및 탐색: 방향 탐색을 사용하는 인터페이스에서 목록은 현재 포커스가 있는 항목을 명확하게 표시해야 합니다.
상호작용: 목록 항목은 선택 가능하거나 조치를 취할 수 있는 요소를 나타내는 경우가 많습니다.
사용 및 배치
목록에는 반복 가능한 요소가 있는 다양한 형제 콘텐츠가 포함될 수 있습니다. 스택과 달리 목록은 앱 뷰 컨테이너를 채웁니다.
목록은 뷰 내에서 선택 가능한 항목을 하나 이상 표시할 수 있습니다.
스크림을 사용하여 오버플로 콘텐츠 표시
목록에 뷰에 맞지 않는 항목이 포함된 경우 목록의 경계 근처에 검은색 스크림이 사용됩니다.
필요한 경우 목록에 제목을 사용할 수 있습니다
명확성을 위해 목록에 고정 제목을 사용할 수 있습니다.
금지사항
깊이를 사용하여 포커스 표시
목록 항목은 포커스가 없는 상태와 포커스가 있는 상태에서 0~+4 깊이 사이로 이동합니다.
목록 항목은 실행 가능할 수 있음
목록의 항목은 작업으로 작동할 수 있습니다. 작업을 목록 항목으로 유지
분석
목록은 스크롤 컨테이너와 일관된 간격의 목록 항목으로 구성됩니다. 항목 수가 표시 영역을 초과하면 목록이 세로로 스크롤되어야 하며 오버슈트는 최소화해야 합니다.
A. 컨테이너 - 스크롤 가능한 영역
B. 목록 항목
C. 시스템 표시줄
목록 항목: 목록 내의 각 개별 요소입니다.
A. 도형
B. 테두리
C. 앞부분 아이콘
D. 텍스트 콘텐츠
E. 후행 표시기
맞춤설정
대부분의 맞춤설정은 목록 항목을 사용하여 이루어집니다.
| 속성 | 맞춤설정 | 기본값 |
|---|---|---|
| 목록 항목: 도형 | 예 | 40 dp |
| 목록 항목: 앞부분 및 뒷부분 아이콘 | 예 | 중간 기호 아이콘 |
| 목록 항목: 패딩 값 | 예 | 2d dp, 20 dp |
| 목록 항목: 콘텐츠 | 예 | 단일 행: Body Small을 사용하는 기본 라벨용 Text 컴포저블 하나 이중 행: 기본 및 보조 라벨용 Text 컴포저블 두 개가 포함된 열 기본: Title Small 보조: Body Small |
| 목록: verticalArrangement | 예 | 20dp |