Listeler
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Listeler, bir veya daha fazla ilgili öğenin görsel bir temsilidir.
Genellikle bir seçenek grubunu görüntülemek için kullanılırlar.
Kaynaklar
Öne çıkanlar
- Listeler, metin veya resimlerden oluşan sürekli bir koleksiyondur.
- Listeler doğal ve taranabilir olmalıdır.
- Listeler, simge ve metinle 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 öğeyi bildirmek için tek bir satır. Bu basit tasarım, her bir öğenin diğerinden açıkça farklı olmasını sağlar.
- İki satırlı liste: Her öğeyi iletmek için iki paralel satır kullanır.
Bu yapılandırılmış tasarım, doğal okunabilirliği sağlar ve bilişsel aşırı yüklenme yaşanmasını önler.
- Üç satırlı liste: Her öğeyi temsil etmek için üç paralel çizgi kullanır.
Bu dekoratif tasarım, yüksek düzeyde görsel belirginlik sağlar.
Anatomi
- Simge: Belirli bir nesneyi veya işlemi temsil eden, genellikle bir fikri ya da kavramı görsel olarak iletmek için kullanılan küçük bir grafik.
- Üst çizgi: Başlığın veya alt başlığın üzerinde görünen kısa bir metin satırı. Genellikle ek bağlam veya vurgu sağlamak için kullanılır.
- Başlık: Bir tasarım öğesinin veya sayfanın ana başlığı olarak kullanılan büyük, 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üçük bir metin satırı.
- Denetleyici: 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.
Okuma anlama için optimize edilmiş liste, tek bir kesintisiz öğe sütunundan oluşur.
Liste öğeleri, simge ve metinle temsil edilen birincil ve ek işlemler içerebilir.
check_circle
Yapılması gerekenler
Liste öğeleri düğme değildir. Öğelerde kapsayıcı yok. Liste öğeleri varsayılan olarak seçili değildir ve odak noktası üzerinde değildir.
warning
Dikkat
Liste öğeleri için kapsayıcı arka planını yalnızca gerektiğinde kullanın.
Seçim kontrolleri
Liste öğelerinin görüntüleme bilgilerini ve işlemlerini kontrol eder. Bunlar, liste öğesinin baş veya son kenarına hizalanabilir.
- 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.
check_circle
Yapılması gerekenler
Listedeki seçili öğeyi net bir şekilde göstermek için simge seçim göstergesi kullanın. Bu sayede kullanıcılar hangi öğeyi seçtiklerini kolayca belirleyebilir ve genel kullanıcı deneyimini iyileştirebilir.
cancel
Yapılmaması gerekenler
Bir listedeki seçimi belirtmek için yalnızca arka plan rengini kullanmaktan kaçının.
cancel
Yapılmaması gerekenler
Odaktaki öğeyle ilgili kafa karışıklığına neden olabileceğinden, liste öğelerinin içine düğme yerleştirmekten kaçının.
Simgeler
check_circle
Yapılması gerekenler
Listede aynı türde içerikler gösteriyorsanız görsel kirliliği azaltmak ve kullanıcı deneyimini iyileştirmek için simgeleri çıkarın. Listelerde, hiçbir amaca hizmet etmeyen ve ek bilgi sağlamayan simgelerden kaçının.
cancel
Yapılmaması gerekenler
Listedeki tüm öğeler için aynı simgeyi kullanmaktan kaçının. Bu durum, kullanıcılar için görsel açıdan bunaltıcı ve kafa karıştırıcı olabilir. Bunun yerine, simgeleri yalnızca değer kattığı veya ek bilgi sağladığı durumlarda kullanın.
Avatarlar ve resimler
Liste öğeleri, bir kişiyi veya tüzel kişiyi temsil etmek için dairesel kırpma içeren resimler içerebilir.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-07-27 UTC."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
