목록 보기는 세로로 스크롤되는 단일 열 목록에 콘텐츠를 광고 항목으로 표시합니다. 이 뷰는 사용자가 텍스트를 읽고 데이터를 보는 것에 의존하여 선택할 때 가장 효과적입니다.
목록 항목은 그리드 항목보다 세로 공간이 적으므로 화면에 더 많은 항목을 표시할 수 있습니다.
분석
목록 보기에서 각 행에는 하나의 목록 항목을 나타내는 타일이 포함됩니다. 기본 작업이 카드를 채울 수 있으므로 사용자는 카드 어디에서나 작업을 시작할 수 있습니다. 아이콘과 텍스트로 표시되는 추가 작업의 경우 아이콘과 텍스트가 포함된 영역만 실행할 수 있습니다.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=4&hl=ko)
2. 전환 버튼 사용 설정
3. 전환 버튼 사용 중지
4. 기본 및 보조 텍스트
5. 콘텐츠 타일
사양
단선형 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=4&hl=ko)
2행 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=4&hl=ko)
두 줄 목록 항목 반전됨
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=4&hl=ko)
헤더가 있는 여러 줄 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=4&hl=ko)
헤더가 없는 여러 줄 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=4&hl=ko)
텍스트 오버플로가 포함된 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=4&hl=ko)
분할 작업이 있는 목록 항목
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=4&hl=ko)
목록 항목에서 표시기 아이콘 배치
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=4&hl=ko)
레이아웃 확장
이러한 참조 레이아웃은 다양한 너비와 높이의 화면을 수용하도록 목록 항목을 조정하는 방법을 보여줍니다. 너비 및 높이 카테고리는 레이아웃 섹션에 정의되어 있습니다. 다운샘플링 또는 업샘플링이 발생하기 전에 모든 픽셀 값은 렌더링된 픽셀입니다.
표준, 와이드, 엑스트라 와이드 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=4&hl=ko)
콘텐츠 타일이 있는 표준, 와이드, 엑스트라 와이드 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=4&hl=ko)
슈퍼 와이드 화면
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=4&hl=ko)
스타일
서체
서체 스타일 | 글꼴 | 무게 | 크기 (dp) |
---|---|---|---|
본문 1 | Roboto | 일반 | 32 |
본문 3 | Roboto | 일반 | 24 |
색상
요소 | 색상(데이 모드) | 색상 (야간 모드) |
---|---|---|
기본 유형 / 아이콘 | White | 흰색 @ 88% |
보조 유형 / 아이콘 | 흰색 @ 72% | 흰색 @ 60% |
구분선 | 흰색 @ 22% | 흰색 @ 12% |
목록 항목 배경 | 흑인 | 흑인 |
사이즈
요소 | 크기 (dp) |
---|---|
목록 항목 높이 | 96 (짧은 화면) / 116 (표준 화면) / 128 (세로형 화면) |
기본 아이콘 | 44 |
3차 아이콘 | 24 |
콘텐츠 타일 | 목록 항목 높이에서 1dp를 뺀 값 |
중간 아바타 | 76 |
구분선 두께 | 1 |
예
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=4&hl=ko)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=4&hl=ko)