Listeler, bir veya daha fazla ilgili öğenin görsel bir temsilidir. Bunlar genellikle bir dizi seçeneği görüntülemek için kullanılır.
Kaynaklar
Tür | Bağlantı kur | Durum |
---|---|---|
Tasarım | Tasarım kaynağı (Figma) | Kullanılabilir |
Uygulama | Jetpack Compose | Çok yakında |
Öne çıkanlar
- Listeler metin veya resimlerin sürekli bir koleksiyonudur.
- Listeler doğal olmalı ve göz atılabilir olmalıdır.
- Listeler, simgeler ve metinlerle temsil edilen birincil ve ek işlemler içeren öğelerden oluşur.
Varyantlar
Üç tür liste vardır: tek satırlık liste, iki satırlık liste ve üç satırlık liste.
- Tek satırlı liste: Her bir öğeyi bildiren tek bir satır. Bu basit tasarım, her bir öğenin diğerlerinden açıkça farklı olmasını sağlar.
- İki satırlı liste: Her bir öğeyi belirtmek için iki paralel çizgi kullanır. Bu yapılandırılmış tasarım doğal okunabilirlik sağlar ve bilişsel aşırı yüklenmeyi önler.
- Üç satırlı liste: Her bir öğeyi temsil etmek için üç paralel çizgi kullanır. Bu dekoratif tasarım, üst düzey bir görsel belirginlik sağlar.
Anatomi
- Simge: Belirli bir nesneyi ya da eylemi temsil eden ve genellikle bir fikri veya kavramı görsel olarak aktarmak için kullanılan küçük bir grafiktir.
- Üst Başlık: Başlığın veya alt başlığın üzerinde görünen ve genellikle ek bağlam veya vurgu sağlamak için kullanılan kısa bir metin satırı.
- Başlık: Bir tasarım öğesinin veya sayfanın ana başlığı olarak kullanılan, büyük ve kalın bir metin satırı.
- Alt başlık: Ana başlığın altında ek bilgi veya bağlam sağlayan daha kısa bir metin satırı.
- Kontrol: Kullanıcının karar girmesine olanak tanıyan etkileşimli bir öğedir.
Eyaletler
Özellikler
Kullanım
Listeler, dikey olarak düzenlenmiş metin ve resim gruplarıdır. Okuduğunu anlama özelliği için optimize edilmiş bir liste, kesintisiz tek bir öğe sütunundan oluşur. Liste öğeleri, simgeler ve metinle temsil edilen birincil ve ek işlemler içerebilir.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=5&hl=tr)
Dikkat
Seçim kontrolleri
Liste öğeleriyle ilgili bilgileri ve işlemleri kontrol eder. Liste öğesinin ön veya son kenarına hizalanabilirler.
![Seçim onay kutusu](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=5&hl=tr)
![Seçim radyosu](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=5&hl=tr)
![Seçim anahtarı](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=5&hl=tr)
- Onay kutuları: Bir veya daha fazla liste öğesi seçin.
- Radyo düğmeleri: Listeden tam olarak bir öğe seçin.
- Anahtarlar: Bir kontrolü açın veya kapatın.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
Simgeler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
Avatarlar ve resimler
Liste öğeleri, bir kişiyi veya varlığı temsil edecek şekilde dairesel kırpılmış resimler içerebilir.