Standart düzenler

Standart düzenler, çeşitli form faktörlerinde optimum kullanıcı deneyimi sağlayan, kanıtlanmış ve çok yönlü düzenlerdir.

Standart düzenler, küçük ekranlı telefonların yanı sıra tabletleri, katlanabilir cihazları ve ChromeOS cihazları destekler. Materyal Tasarım rehberliğinden türetilen düzenler hem estetik hem de işlevseldir.

Android çerçevesi, düzenlerin uygulanmasını kolay ve güvenilir hale getiren özel bileşenler içerir.

Kanonik düzenler, harika uygulamaların temelini oluşturan, ilgi çekici ve üretkenliği artıran kullanıcı arayüzleri oluşturur.

如果您对自适应应用规范化布局很熟悉，但不确定哪些 Android API 适用于您的应用，请跳转到适用性部分，该部分可帮助您确定哪种布局适用于您的应用用例。

Liste-ayrıntı

Liste-ayrıntı düzeni, kullanıcıların açıklayıcı, açıklayıcı veya diğer ek bilgileri (öğe ayrıntısı) içeren öğe listelerini keşfetmesini sağlar.

Düzen, uygulama penceresini yan yana iki bölmeye ayırır: biri liste, diğeri ayrıntı için. Kullanıcılar, öğe ayrıntılarını görüntülemek için listeden öğe seçer. Ayrıntı bölümündeki derin bağlantılar, ayrıntı bölmesinde ek içerik gösterir.

Genişletilmiş genişlikteki ekranlar (bkz. Pencere boyutu sınıflarını kullanma) hem listeyi hem de ayrıntıları aynı anda gösterir. Bir liste öğesinin seçilmesiyle ayrıntılar bölmesi, seçilen öğeyle ilgili içeriği gösterecek şekilde güncellenir.

Orta ve küçük genişlikteki ekranlarda, uygulamayla kullanıcı etkileşimine bağlı olarak liste veya ayrıntı gösterilir. Yalnızca liste görünür olduğunda, bir liste öğesinin seçilmesiyle liste yerine ayrıntı gösterilir. Yalnızca ayrıntı görünürken geri düğmesine basıldığında liste yeniden gösterilir.

Cihaz yönü değişiklikleri veya uygulama penceresi boyutu değişiklikleri gibi yapılandırma değişiklikleri, ekranın pencere boyutu sınıfını değiştirebilir. Liste-ayrıntı düzeni, uygulama durumunu koruyarak buna göre yanıt verir:

• Hem liste hem de ayrıntılar bölmelerini gösteren genişletilmiş bir ekran, orta veya kompakt genişliğe daralırsa ayrıntılar bölmesi görünür kalır ve liste bölmesi gizlenir.
• Orta veya kompakt genişlikteki bir ekranda yalnızca ayrıntı bölmesi görünür durumdayken pencere boyutu sınıfı genişletilmiş olarak genişlerse liste ve ayrıntı birlikte gösterilir ve listede, ayrıntı bölmesindeki içeriğe karşılık gelen öğenin seçildiği belirtilir.
• Orta veya kompakt genişlikteki bir ekranda yalnızca liste bölmesi görünür durumdayken genişletilmiş görünümde liste ve yer tutucu ayrıntı bölmesi birlikte gösterilir.

Liste-ayrıntı, mesajlaşma uygulamaları, kişi yöneticileri, etkileşimli medya tarayıcıları veya içeriğin ek bilgiler gösteren öğe listesi olarak düzenlenebileceği tüm uygulamalar için idealdir.

Şekil 1. Mesajlaşma uygulamasında, görüşme listesi ve seçilen bir görüşmenin ayrıntıları gösteriliyor.

Uygulama

您可以使用各种技术创建列表-详情布局，包括 Compose、View 和 activity 嵌入（适用于旧版应用）。如需我们帮助您确定哪项技术最适用于您的应用，请参阅适用性部分。

SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。

首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（View 或 fragment），用于表示列表和详情内容。

实现一种通信方法，以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel，因为它能存储业务逻辑，并且可在配置更改后继续留存。

SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情，二者会并排显示。如果窗口空间不足，系统会根据用户与应用的互动单独显示列表或详情。

如需查看示例实现，请参阅包含滑动窗格的列表-详情示例。

Activity embedding

Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.

Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.

Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.

For more information, see Activity embedding.

For an example implementation, see the List-detail with activity embedding sample.

Feed

Feed düzeni, eşdeğer içerik öğelerini yapılandırılabilir bir ızgarada düzenleyerek çok miktarda içeriğin hızlı ve kolay bir şekilde görüntülenmesini sağlar.

Boyut ve konum, içerik öğeleri arasında ilişkiler oluşturur.

İçerik grupları, öğelerin aynı boyutta olması ve birlikte konumlandırılmasıyla oluşturulur. Öğeler, yakındaki öğelerden daha büyük yapılarak dikkat çekilir.

Kartlar ve listeler, feed düzenlerinin yaygın bileşenleridir.

Feed düzeni, ızgara tek bir kaydırılabilir sütundan çok sütunlu kaydırılabilir bir içerik feed'ine uyarlanabildiği için neredeyse her boyuttaki ekranı destekler.

Feed'ler özellikle haber ve sosyal medya uygulamaları için uygundur.

Şekil 2. Farklı boyutlardaki kartlarda gönderileri gösteren sosyal medya uygulaması.

Uygulama

RecyclerView 可在单个列中高效呈现大量的项。GridLayoutManager 以网格形式排列各个项，支持配置项的大小和 span。

根据可用显示区域的大小配置网格列，以设置项允许的最小宽度。

如需替换 GridLayoutManager 的默认 span 设置策略（即每个项对应一个 span），可以创建自定义 SpanSizeLookup。调整 span 即可让某些项比其他项更为醒目。

如果显示屏因宽度较小而只够显示一个列，请使用 LinearLayoutManager，而不是 GridLayoutManager。

如需查看示例实现，请参阅使用 View 构建 Feed 示例。

Destek bölmesi

Destekleyici bölme düzeni, uygulama içeriğini birincil ve ikincil ekran alanları şeklinde düzenler.

Birincil görüntüleme alanı, uygulama penceresinin büyük bir bölümünü (genellikle yaklaşık üçte ikisini) kaplar ve ana içeriği barındırır. İkincil görüntüleme alanı, uygulama penceresinin geri kalanını kaplayan ve ana içeriği destekleyen içerikleri sunan bir bölmedir.

Desteklenen bölme düzenleri, yatay yönde genişletilmiş genişlikteki ekranlarda iyi çalışır (bkz. Pencere boyutu sınıflarını kullanma). Orta veya kompakt genişlikteki ekranlar, içerik daha dar ekran alanlarına uyarlanabiliyorsa ya da ek içerik, menü veya düğme gibi bir kontrol aracılığıyla erişilebilen alt veya yan sayfada başlangıçta gizlenebiliyorsa hem birincil hem de ikincil ekran alanlarının gösterilmesini destekler.

Destek bölmesi düzeni, birincil ve ikincil içerik ilişkisi açısından liste-ayrıntı düzeninden farklıdır. İkincil bölme içeriği yalnızca birincil içerikle ilişkili olarak anlamlıdır. Örneğin, destekleyici bölme araç penceresi tek başına alakasızdır. Ancak liste-ayrıntı düzeninin ayrıntı bölmesindeki ek içerik, birincil içerik olmadan da anlamlıdır. Örneğin, ürün listelemesindeki bir ürünün açıklaması.

Destek bölmesinin kullanım alanları şunlardır:

• Üretkenlik uygulamaları: Destekleyici bir bölmede inceleyen yorumlarının yer aldığı bir doküman veya e-tablo
• Medya uygulamaları: Destekleyici bir bölmede alakalı videoların listesiyle desteklenen bir akışlı video veya bir oynatma listesiyle desteklenen bir müzik albümünün tasviri
• Araçlar ve ayarlar: Destek bölmesinde paletler, efektler ve diğer ayarların bulunduğu bir medya düzenleme aracı

Şekil 3. Destekleyici bir bölmede ürün açıklamaları bulunan alışveriş uygulaması.

Uygulama

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

• Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
• Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
• Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

• Supporting pane with views
• Supporting pane with fragments

Geçerlilik

Standart düzenler, kolay erişim ve derinlemesine keşif için içeriğin çok yönlü sunumlarını oluşturur. Uygulamanızın kullanım alanları için en uygun düzen ve uygulama stratejisini belirlemek üzere aşağıdaki akış şemasını kullanın.

Farklı uygulama türlerinde uygulanan standart düzen örnekleri için büyük ekran galerisine bakın.

Şekil 4. Büyük ekran için canonical düzen karar ağacı.

Ek kaynaklar

• Materyal Tasarım — Standart düzenler