Standart widget düzenleri

Öncelikle temel içeriğinizi belirleyerek etkili widget düzenleri oluşturun. Düzeniniz, bilgilerin ve etkileşimli öğelerin widget'ınızda nasıl düzenleneceğini belirler. Android, bu süreci kolaylaştırmak için araç çubukları, metin, liste ve ızgara türü widget'lar için çeşitli önceden oluşturulmuş düzenler sunar.

Metin

Metin düzenleri, kısa ve öz bilgiler göstermek için idealdir. İsteğe bağlı olarak metnin yanına bir resim ekleyerek widget'ınızın görsel çekiciliğini artırın.

Yalnızca metin

Başlıklar, durum güncellemeleri, kısa açıklamalar veya tek bir metin satırının mesajı etkili bir şekilde ilettiği tüm senaryolar için idealdir.

Metin ve resim

Görsel etkiyi artırmak için resim ekleyin. Bu düzeni farklı ekran boyutlarına nasıl uyarlayacağınızı öğrenmek için Kesme noktaları başlıklı makaleyi inceleyin.

Araç çubukları

Kullanıcılara, uygulamanızda sık kullanılan görevlere hızlı erişim sağlamak için araç çubuğu düzenlerini kullanın. Bu düzenler, widget boyutlarına göre uyarlanabilen esnek bir yapıya sahiptir.

Arama araç çubuğu

Arama araç çubuğu düzeni, araç çubuğundaki birincil işlem olarak aramaya odaklanacak şekilde tasarlanmıştır. Ek kullanışlı düğmeler, sık kullanılan işlevlere hızlı erişim sağlayabilir.

Araç çubuğu

Araç çubuklarında, en sık kullanılan görevler için düğmelerin yanı sıra uygulama markası yer alır. Bu düğmeler, açılıp kapatılabilen ayarlar veya görev bağlantıları için idealdir. Yeniden boyutlandırma sırasında, daha az kullanılan seçenekler daha yaygın işlemler lehine gizlenebilir. Yer olduğunda yeni bir minimum 48 dp dokunulabilir düğme eklemek için kesme noktalarını kullanın.

Listeler

Birden fazla öğeyi net ve taranabilir bir biçimde düzenlemek için liste düzenlerini kullanın. Bu özellik, haber başlıkları, yapılacaklar listeleri veya mesajlar için idealdir. İçerikleri yapılandırılmış ve taranabilir bir liste halinde düzenleyin. İçerik ihtiyaçlarınıza göre kapsayıcılı veya kapsayıcısız sunum arasında seçim yapın.

Metin ve resim listesi

Taranabilir metin ve resim listeleri; haber başlıkları, albüm kapaklı oynatma listeleri veya mesajlar gibi birden fazla içerik türünü sergilemek için idealdir.

Yapılacaklar listesi

Yapılacaklar listesi düzeni, görevleri göstermek ve kullanıcıların öğeleri hızlıca tamamlandı olarak işaretlemesi için net dokunma hedefleri sağlamak açısından idealdir.

İşlem listesi

Eylem listeleriyle sezgisel kontrol gruplandırması sağlayın. Burada görsel açık/kapalı durumları, öğe durumları hakkında anında geri bildirim sunar.

Tam çerçeve resim

Android 17 ve sonraki sürümlerde tam taşmalı, etkileyici resimler göstermek için ideal olan bu düzende, her bir alt öğenin widget kapsayıcısının yüksekliğiyle mükemmel şekilde hizalanmasını sağlamak için hızlı kaydırma kullanılır.

Izgara

Resimleri, isteğe bağlı etiketlerle birlikte kompakt, esnek ve görsel açıdan zengin bir ızgarada gösterin. Farklı ekran boyutlarına uyum sağlayan sütunlar ve satırlar kullanın.

Yalnızca resim

Yalnızca resimlerden oluşan ızgaralar kullanarak görsel olarak etkileyici, kaydırılabilir resim galerileri oluşturun. Satırlar ve sütunlar, en iyi sunum için çeşitli ekran boyutlarına otomatik olarak uyum sağlar.

Resim ve metin

Ayrıca, metin etiketleri ve açıklamaları da ekleyerek resim ızgarası içeriğinizi daha fazla bağlam ve bilgiyle zenginleştirebilirsiniz.

Kod örnekleri

Aşağıdaki tabloda, her bir standart düzenin Android Platform Samples GitHub deposundaki karşılık gelen Jetpack Glance uygulamasıyla eşlemesi gösterilmektedir.

Standart düzen Referans dosyaları Rehberlik
İşlem Listesi Düzeni
  • Glance işlem geri çağırmalarıyla liste öğesi işlemlerini yönetin ve durum güncellemelerinin doğru şekilde yapılmasını sağlayın.
Liste Düzenini Kontrol Etme
  • Toplama öğelerini güncellemek için işlem parametrelerini veya geri çağırmaları kullanarak onay kutusu durumunu değiştirme işlevini uygulayın.
  • Bir onay kutusuna dokunma gibi tıklama etkinliklerini işlemek için widget'ın `onClick` parametrelerinde `actionRunCallback`, `ActionCallback(actionParametersOf(...))` veya `actionStartActivity(...)` gibi Glance işlemi geri çağırmalarını kullanın.
İfadeli Araç Çubuğu Düzeni
  • `ColorProvider` içe aktarma hatalarından kaçının: `androidx.glance.unit.ColorProvider` öğesini içe aktarın ve `androidx.glance.color.ColorProvider(dayColor, nightColor)` öğesini kullanın.
  • Düz arka plan renkleri için `ColorProvider` yerine doğrudan `GlanceModifier.background(Color)` kullanın.
Resim ızgarası düzeni
  • Resim yükleme kitaplığı yapılandırılmadığı veya istenmediği sürece, resim öğeleri için düz renkler (`GlanceModifier.background`) ya da yerel çizilebilir öğeler kullanın.
Resim Metin Listesi Düzeni
  • Yaygın kullanım alanları: haber feed'leri, makale listeleri, egzersiz geçmişleri, mesaj feed'leri ve dikey küçük resim listeleri.
  • Küçük resimleri birincil/ikincil metinle birleştirirken liste satırı yüksekliği ve metin kırpma arasında denge kurun.
Uzun Metin Düzeni
  • `Dp` değerlerini (ör. `2 * padding`) çarpıyorsanız `androidx.compose.ui.unit.times` öğesini içe aktarın.
  • Boyutlandırma kurallarına uyun: Dolgu ve tipografi ölçeklendirme için `dimens.xml` dosyasındaki boyutların kullanıldığından emin olun.
Arama Araç Çubuğu Düzeni
  • `ColorProvider` içe aktarma hatalarından kaçının: `androidx.glance.unit.ColorProvider` öğesini içe aktarın ve `androidx.glance.color.ColorProvider(dayColor, nightColor)` öğesini kullanın.
  • Düz arka plan renkleri için ColorProvider yerine doğrudan `GlanceModifier.background(Color)` kullanın.
Taşma payı olmayan resim düzeni / Anında kaydırma
  • LazyColumn'da `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` değerini ayarlayarak kaydırmayı sabitleyin.
  • Anlık kaydırma özelliğini kullanıyorsanız Glance 1.3.0-alpha02 veya sonraki sürümler, derleme SDK'sı 37 (Baklava) veya sonraki sürümler ve Android Gradle eklentisi (AGP) 9.1.0 veya sonraki sürümler gereklidir.
  • Widget sağlayıcı sınıfında `override val sizeMode: SizeMode = SizeMode.Exact` değerini ayarlayın.
Standart Araç Çubuğu Düzeni
  • "ColorProvider" içe aktarma hatalarını önlemek için Sorun Giderme bölümüne bakın: "androidx.glance.color.ColorProvider(dayColor, nightColor)" kullanın.
  • Düz arka plan renkleri için `ColorProvider` yerine doğrudan `GlanceModifier.background(Color)` kullanın.
Resim düzeniyle metin
  • Mevcut widget boyutlarına göre metin ve resmi yan yana veya üst üste yerleştirmek için duyarlı düzen boyutlandırma kurallarını uygulayın.