Listeler, yerleşik kaydırma ve odak özelliklerine sahip öğelerin kapsayıcılarıdır.
İlkeler
Net Düzen: Listeler, bilgileri net ve kolayca taranabilecek dikey bir düzende sunmalıdır.
Öğelerin Tutarlı Sunumu: Liste öğeleri tutarlı bir görsel yapıya sahip olmalıdır.
Odaklanılabilirlik ve gezinme: Yönlü gezinmeye dayalı arayüzlerde, listelerde odaklanılan öğe net bir şekilde belirtilmelidir.
Etkileşim: Liste öğeleri genellikle seçilebilir veya üzerinde işlem yapılabilir öğeleri temsil eder.
Kullanım ve Yerleşim
Listeler, tekrarlanabilir öğeler içeren çeşitli kardeş içerikler içerebilir. Yığınların aksine listeler, uygulama görünümü kapsayıcısını doldurur.
Listeler, bir görünümde seçilebilir bir veya daha fazla öğe gösterebilir.
Taşan içeriği belirtmek için karartma katmanlarını kullanma
Bir liste, görünümde sığacak öğe sayısından daha fazla öğe içerdiğinde listenin sınırlarına yakın bir yerde siyah bir scrim kullanılır.
Gerekirse listelerde başlık kullanılabilir
Netlik için listede statik veya sabit bir başlık kullanılabilir.
Yapılmaması gerekenler:
Odak noktasını belirtmek için derinliği kullanma
Liste öğeleri, odaklanılmamış ve odaklanılmış durumlar için 0 ile +4 derinlik arasında hareket eder.
Liste öğeleri üzerinde işlem yapılabilir
Bir listedeki öğeler işlem olarak kullanılabilir. İşlemi liste öğesiyle sınırlayın
Anatomi
Liste, kaydırılabilir bir kapsayıcıdan ve eşit aralıklı liste öğelerinden oluşur. Öğe sayısı görüntü alanını aştığında listeler, minimum aşma ile dikey olarak kaydırılmalıdır.
A. Kapsayıcı - kaydırılabilir alan
B. Liste öğesi
C. Sistem çubukları
Liste Öğesi: Listedeki her bir öğe.
A. Şekil
B. Kenarlık
C. Ön simge
D. Metin içeriği
E. Takip eden gösterge
Özelleştirme
Özelleştirmenin büyük bir kısmı liste öğeleriyle yapılır.
| Özellikler | Özelleştirme | Varsayılanlar |
|---|---|---|
| Liste öğesi: Şekil | Evet | 40 dp |
| Liste öğesi: Öndeki ve sondaki simge | Evet | Orta Sembol Simgesi |
| Liste öğesi: Dolgu değerleri | Evet | 2d dp, 20 dp |
| Liste öğesi: İçerik | Evet | Tek satırlı: Body Small kullanılarak birincil etiket için bir Text composable Çift satırlı: Birincil ve ikincil etiket için iki Text composable içeren bir sütun Birincil: Title Small İkincil: Body Small |
| Liste: verticalArrangement | Evet | 20 dp |