Standart düzenler

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

Depiction of large screen devices showing the canonical layouts.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

Uyarlanabilir uygulama kanonik düzenleri hakkında bilginiz varsa ancak hangi Android API'lerin kullanılacağından emin değilseniz uygulamanızın kullanım alanları için hangi düzenin doğru olduğunu belirleme konusunda yardım almak üzere Uygulanabilirlik bölümüne gidin.

List-detail

Wireframe of list-detail layout.

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

  • If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
  • If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
  • If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, file browsers, or any app where the content can be organized as a list of items that reveal additional information.

Figure 1. Messaging app showing a list of conversations and the details of a selected conversation.

Implementation

Liste ayrıntıları düzeni; Oluşturma, görünümler ve etkinlik yerleştirme (eski uygulamalar için) gibi çeşitli teknolojilerle oluşturulabilir. Uygulamanız için hangi teknolojinin en uygun olduğuna karar verme konusunda yardım almak üzere Uygulanabilirlik bölümüne bakın.

SlidingPaneLayout kitaplığı, görünümlere veya parçalara dayalı liste-ayrıntı düzenleri uygulamak için tasarlanmıştır.

Öncelikle, XML düzeninizin kök öğesi olarak bir SlidingPaneLayout tanımlayın. Ardından, liste ve ayrıntı içeriğini temsil eden iki alt öğeyi (görüntü veya parça) ekleyin.

Liste ayrıntısı görünümleri veya parçaları arasında veri aktarmak için bir iletişim metodolojisi uygulayın. ViewModel, iş mantığını depolayabilmesi ve yapılandırma değişikliklerine dayanabilmesi nedeniyle önerilir.

SlidingPaneLayout, listenin ve ayrıntının birlikte mi yoksa ayrı ayrı mı gösterileceğini otomatik olarak belirler. Her ikisini de barındıracak kadar yatay alana sahip bir pencerede liste ve ayrıntı yan yana görünür. Yeterli alan bulunmayan bir pencerede, kullanıcının uygulamayla etkileşimine bağlı olarak liste veya ayrıntı gösterilir.

Örnek uygulama için Kayan bölmeli List-detail örneğine bakın.

Etkinlik yerleştirme

Birden çok etkinlik içeren eski uygulamaların, iki etkinliği aynı ekranda yan yana veya yığın halinde (biri diğeriyle çakışıyor) görüntülemesini sağlamak için etkinlik yerleştirmeyi kullanın. Uygulamanız, liste ayrıntısı düzeninin listesini ve ayrıntısını ayrı etkinliklerde uyguluyorsa etkinlik yerleştirme, kod yeniden düzenlemesi yapmadan veya çok az kod yeniden düzenlemesi yaparak liste ayrıntısı düzeni oluşturmanıza olanak tanır.

XML yapılandırma dosyası kullanarak görev penceresi bölme belirtip etkinlik yerleştirme işlemini uygulayın. Bölme, bölmeyi başlatan birincil etkinliği ve ikincil bir etkinliği tanımlar. Pencere boyutu sınıfı kesme noktalarını kullanarak bölme için minimum görüntü genişliği belirtin. Görüntü genişliği minimum kesme noktasının altına düştüğünde etkinlikler birbirinin üzerine binecek şekilde gösterilir. Örneğin, minimum ekran genişliği 600 dp ise etkinlikler kompakt ekranlarda birbirinin üzerine binecek şekilde, orta ve genişletilmiş ekranlarda ise yan yana gösterilir.

Etkinlik yerleştirme, Android 12L (API düzeyi 32) ve sonraki sürümlerde desteklenir ancak cihaz üreticileri tarafından uygulanırsa daha düşük API düzeylerinde de kullanılabilir. Bir cihazda etkinlik yerleştirme kullanılamadığında, yedek davranış, kullanıcının uygulamayla etkileşimine bağlı olarak liste etkinliğinin veya ayrıntı etkinliğinin uygulama penceresinin tamamını kaplamasına neden olur.

Daha fazla bilgi için Etkinlik yerleştirme başlıklı makaleyi inceleyin.

Örnek uygulama için Etkinlik yerleştirme içeren liste ayrıntısı örneğine bakın.

Feed

Wireframe of feed layout.

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Figure 2. Social media app showing posts in cards of varying sizes.

Implementation

RecyclerView, tek bir sütunda çok sayıda öğeyi verimli bir şekilde oluşturur. GridLayoutManager, öğeleri bir ızgara şeklinde düzenler ve öğe boyutlarının ve aralıkları yapılandırmanıza olanak tanır.

Öğeler için izin verilen minimum genişliği ayarlamak amacıyla ızgara sütunlarını mevcut görüntüleme alanının boyutuna göre yapılandırın.

Öğe başına bir kapsam olan GridLayoutManager varsayılan kapsam stratejisi, özel bir SpanSizeLookup oluşturularak geçersiz kılınabilir. Bazı öğeleri diğerlerinden daha belirgin hale getirmek için aralığı ayarlayın.

Yalnızca bir sütun için yeterli alana sahip kompakt genişlikteki ekranlarda GridLayoutManager yerine LinearLayoutManager kullanın.

Örnek uygulama için Görüntüleme içeren feed örneğine bakın.

Supporting pane

Wireframe of supporting pane layout.

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

  • Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
  • Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
  • Search and reference apps: A query input form with results in a supporting pane
Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

Destekleyici bölme düzeni, LinearLayout veya ConstraintLayout gibi bir yardımcı düzen kullanılarak uygulanır. Pencere boyutu sınıflarını belirleme kullanabileceğiniz yatay görüntüleme alanını üç kategori: kompakt (< 600 dp), orta (>= 600 dp) ve genişletilmiş (>= 840 dp).

Her pencere boyutu sınıfı için düzenleri aşağıdaki gibi tanımlayın:

  • Kompakt: Uygulama kaynakları layout klasörüne, destekleyici bölmeyi ana içeriğin altına veya alt sayfanın içine yerleştiren içerikleri yerleştirin.
  • Aracı: layout-w600dp klasöründe, destekleyici bölme içeriğini sağlayın. ana içerik ve destekleyici bölmenin yan yana oluşturulmasına neden olur. yatay ekran alanı eşit olarak bölünüyor
  • Genişletilmiş: layout-w840dp klasörüne destekleyici bölme içeriğini ekleyin Böylece, ana içerik ve destekleyici bölmenin yan yana oluşturulması sağlanmış olur. Ancak destekleyici bölme yatay alanın yalnızca% 30'unu kaplar. %70'ini ana içeriğe bırakın.

Ana içerik ileViewModel ya da bunların bir kombinasyonu kullanılarak destekleyici bölmede gösterilir.

Uygulama örnekleri için aşağıdaki örneklere bakın:

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ı.

Additional resources