มุมมองรายการจะแสดงเนื้อหาเป็นรายการโฆษณาในรายการคอลัมน์เดียวที่เลื่อนในแนวตั้ง มุมมองนี้เหมาะที่สุดเมื่อผู้ใช้อาศัยการอ่านข้อความและดูข้อมูลเพื่อเลือก
รายการจะใช้พื้นที่แนวตั้งน้อยกว่ารายการในตารางกริด ช่วยให้แสดงรายการบนหน้าจอได้มากขึ้น
กายวิภาคศาสตร์
ในมุมมองรายการ แต่ละแถวจะมีไทล์แสดงรายการ 1 รายการ การดำเนินการหลักจะแสดงในไทล์เพื่อให้ผู้ใช้เริ่มการดำเนินการได้จากทุกที่ในไทล์ สำหรับการดำเนินการเสริมที่แสดงด้วยไอคอนและข้อความ จะมีเพียงพื้นที่ที่มีไอคอนและข้อความเท่านั้นที่ดำเนินการได้
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=1&hl=th)
2. ปุ่มสลับเปิดอยู่
3. ปุ่มตัวสลับปิดอยู่
4. ข้อความหลักและข้อความรอง
5. ไทล์เนื้อหา
ข้อกำหนด
รายการโฆษณาแบบบรรทัดเดียว
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=1&hl=th)
รายการโฆษณาแบบ 2 บรรทัด
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=1&hl=th)
กลับรายการ 2 บรรทัด
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=1&hl=th)
รายการแบบหลายบรรทัดพร้อมส่วนหัว
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=1&hl=th)
รายการโฆษณาหลายบรรทัดที่ไม่มีส่วนหัว
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=1&hl=th)
รายการที่มีข้อความล้น
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=1&hl=th)
รายการที่มีการดำเนินการแยก
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=1&hl=th)
ตำแหน่งไอคอนตัวบ่งชี้ในรายการ
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=1&hl=th)
การปรับขนาดเลย์เอาต์
เลย์เอาต์ข้อมูลอ้างอิงเหล่านี้แสดงวิธีปรับรายการให้เหมาะกับหน้าจอที่มีความกว้างและความสูงต่างๆ (หมวดหมู่ความกว้างและความสูงจะกำหนดอยู่ในส่วนการออกแบบ) โปรดทราบว่าค่าพิกเซลทั้งหมดจะเป็นพิกเซลที่แสดงผล ก่อนที่จะเกิดการสุ่มหรือสุ่มขึ้น
หน้าจอมาตรฐาน หน้าจอกว้าง และหน้าจอกว้างพิเศษ
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=1&hl=th)
หน้าจอมาตรฐาน หน้าจอกว้าง และกว้างพิเศษพร้อมด้วยการ์ดเนื้อหา
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=1&hl=th)
หน้าจอขนาดกว้างพิเศษ
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=1&hl=th)
รูปแบบ
การพิมพ์
รูปแบบของประเภท | ลักษณะแบบอักษร | น้ำหนัก | ขนาด (dp) |
---|---|---|---|
เนื้อความ 1 | Roboto | ปกติ | 32 |
เนื้อความ 3 | Roboto | ปกติ | 24 |
สี
องค์ประกอบ | สี(โหมดวัน) | สี (โหมดกลางคืน) |
---|---|---|
ประเภท / ไอคอนหลัก | สีขาว | สีขาว @ 88% |
ประเภท / ไอคอนรอง | สีขาว @ 72% | สีขาว @ 60% |
เส้นแบ่ง | สีขาว @ 22% | สีขาว @ 12% |
พื้นหลังของรายการ | สีดำ | สีดำ |
ขนาด
องค์ประกอบ | ขนาด (dp) |
---|---|
ความสูงของรายการ | 96 (หน้าจอสั้น) / 116 (หน้าจอมาตรฐาน) / 128 (หน้าจอสูง) |
ไอคอนหลัก | 44 |
ไอคอนลำดับสาม | 24 |
ไทล์เนื้อหา | ความสูงของรายการลบ 1dp |
รูปโปรไฟล์ขนาดกลาง | 76 |
ความหนาของเส้นแบ่ง | 1 |
ตัวอย่าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=1&hl=th)