목록 항목

리스트 뷰는 콘텐츠를 세로로 스크롤할 수 있는 단일 열 목록 형태로 항목별로 표시합니다. 이 뷰는 사용자가 텍스트를 읽고 데이터를 확인하여 선택할 때 가장 적합합니다.

목록 항목은 그리드 항목보다 세로 공간을 적게 차지하므로 화면에 더 많은 항목을 표시할 수 있습니다.

말풍선 아이콘
그리드 구성 요소
격자는 이미지를 강조하는 또 다른 표시 모드를 제공합니다.

해부

목록 보기에서 각 행은 하나의 목록 항목을 나타내는 타일로 구성됩니다. 기본 작업은 타일 전체를 채울 수 있으므로 사용자는 타일 내 어디에서든 작업을 시작할 수 있습니다. 아이콘과 텍스트로 표시되는 보조 작업의 경우, 아이콘과 텍스트가 포함된 영역만 실행 가능합니다.

1. 기본 아이콘
2. 전환 버튼 켜짐
3. 전환 버튼 끄기
4. 1차 및 2차 텍스트
5. 콘텐츠 타일

명세서

한 줄 목록 항목

두 줄 목록 항목

두 줄 목록 항목이 반전되었습니다.

헤더가 있는 여러 줄 목록 항목

헤더가 없는 여러 줄 목록 항목

텍스트가 넘치는 목록 항목

분할 작업이 포함된 목록 항목

목록 항목에 표시기 아이콘 배치

레이아웃 크기 조정

이 참조 레이아웃은 다양한 너비와 높이의 화면에 맞게 목록 항목을 조정하는 방법을 보여줍니다. (너비와 높이 범주는 레이아웃 섹션에 정의되어 있습니다.) 모든 픽셀 값은 다운샘플링 또는 업샘플링이 발생하기 전의 렌더링된 픽셀 값입니다.

말풍선 아이콘
공들여 나열한 것
다양한 화면 크기에 따른 여백, 키라인 및 패딩
말풍선 아이콘
레이아웃 레이블
E, M, KL, P, Flex의 정의

표준, 와이드, 엑스트라 와이드 스크린

콘텐츠 타일이 포함된 표준, 와이드 및 엑스트라 와이드 화면

슈퍼 와이드 스크린

스타일

타이포그래피

타입 스타일 글꼴 무게 크기(dp)
본문 1 로보토 정기적인 32
본문 3 로보토 정기적인 24

색상

요소 색상(주간 모드) 색상(야간 모드)
기본 유형/아이콘 하얀색 흰색 @ 88%
보조 유형/아이콘 흰색 @ 72% 흰색 @ 60%
구분선 흰색 @ 22% 흰색 @ 12%
목록 항목 배경 검은색 검은색

사이즈

요소 크기(dp)
목록 항목 높이 96인치(짧은 화면) / 116인치(표준 화면) / 128인치(세로 화면)
기본 아이콘 44
3차 아이콘 24
콘텐츠 타일 리스트 항목 높이에서 소수점 첫째 자리까지 뺀 값
중간 크기 아바타 76
구분선 두께 1

예시

설정 목록 - 날짜
설정 목록 - 야간
설정 목록 - 날짜
설정 목록 - 야간
미디어 목록 - 일별
미디어 목록 - 야간