Uygulama Widget'ı Tasarım Yönergeleri

Uygulama widget'ları (bazen sadece "widget'lar") Android 1.5'te kullanıma sunulan ve Android 3.0 ile 3.1'de büyük ölçüde iyileştirilmiş bir özelliktir. Widget'lar, kullanıcının Ana ekranında uygulamanın en güncel bilgilerini veya başka bir şekilde alakalı bilgilerini bir bakışta görüntüleyebilir. Standart Android sistem resmi, Analog Saat, Müzik ve diğer uygulamalara yönelik bir widget dahil olmak üzere çeşitli widget'lar içerir.

Android 4.0'daki örnek uygulama widget'ları

1. Şekil. Android 4.0'daki örnek uygulama widget'ları.

Bu dokümanda, bir widget'ın diğer widget'larla ve Android Ana ekranındaki başlatıcı simgeleri ve kısayollar gibi diğer öğelerle grafiksel olarak sığacağı şekilde nasıl tasarlanacağı açıklanmaktadır. Ayrıca, widget çizimine ilişkin bazı standartların yanı sıra bazı widget grafiklerine ilişkin ipuçları ve püf noktaları da açıklanmaktadır.

Widget geliştirme hakkında bilgi edinmek için Geliştirici Kılavuzu'nun Uygulama Widget'ları bölümüne bakın.

Standart Widget Anatomisi

Tipik Android uygulama widget'ları üç ana bileşenden oluşur: Sınırlayıcı kutu, çerçeve ve widget'ın grafik denetimleri ile diğer öğeler. Uygulama widget'ları, Android'deki Görünüm widget'larının bir alt kümesini içerebilir. Desteklenen kontroller arasında metin etiketleri, düğmeler ve resimler bulunur. Kullanılabilir Görünümlerin tam listesi için Geliştirici Kılavuzu'ndaki Uygulama Widget Düzeni Oluşturma bölümüne bakın. İyi tasarlanmış widget'lar, sınırlayıcı kutu ile çerçevenin kenarları arasında bazı boşluklar ve çerçevenin iç kenarları ile widget denetimleri arasında dolgu bırakır.

Widget'lar genellikle sınırlayıcı kutu, çerçeve ve denetimler arasında kenar boşlukları ve dolguya sahiptir

2. Şekil. Widget'lar genellikle sınırlayıcı kutu ile çerçeve arasında kenar boşlukları ve çerçeve ile widget kontrolleri arasında dolguya sahiptir.

Not: Android 4.0 sürümünden itibaren uygulama widget'ları, kullanıcının ana ekranındaki diğer widget'lar ve simgelerle daha iyi uyum sağlamak için widget çerçevesi ile uygulama widget'ının sınırlayıcı kutusu arasında otomatik olarak kenar boşluklarına sahiptir. Kesinlikle önerilen bu davranıştan yararlanmak için uygulamanızın targetSdkVersion değerini 14 veya üstü bir değere ayarlayın.

Ana ekrandaki diğer widget'lara görsel olarak uyacak şekilde tasarlanmış widget'lar, hizalama için Ana ekrandaki diğer öğelerden ipuçları alır. Ayrıca, standart gölgelendirme efektlerini de kullanırlar. Bu bilgilerin tümü bu sayfada açıklanmaktadır.

Widget'ınız için boyut belirleme

Her widget, varsayılan olarak kullanması gereken minimum alan miktarını belirten bir minWidth ve minHeight tanımlamalıdır. Kullanıcılar Ana ekranlarına bir widget eklediklerinde, bu widget genellikle belirttiğiniz minimum genişlik ve yükseklikten daha fazlasını kaplar. Android Ana ekranları, kullanıcılara widget'ları ve simgeleri yerleştirebilecekleri bir mevcut alanlar sunar. Bu ızgara cihaza göre değişebilir. Örneğin, birçok telefonda 4x4'lük bir ızgara, tabletlerde ise daha büyük, 8x7'lik bir ızgara bulunur. Widget'ınız eklendiğinde, minWidth ve minHeight kısıtlamalarını karşılamak için yatay ve dikey olarak gereken minimum hücre sayısını kaplayacak şekilde genişletilir. Aşağıdaki Widget Düzenleri ve Arka Plan Grafikleri Tasarlama bölümünde ele aldığımız gibi, uygulama widget'ları için dokuz yamalı arka plan ve esnek düzenler kullanmak, widget'ınızın cihazın Ana ekran ızgarasına zarif bir şekilde uyum sağlamasına, kullanışlı ve estetik açıdan harika kalmasına olanak tanır.

Bir hücrenin genişliği ve yüksekliğinin yanı sıra widget'lara uygulanan otomatik kenar boşluklarının miktarı cihazlar arasında farklılık gösterebilse de, istediğiniz sayıda dolu ızgara hücresi sayısına göre widget'ınızın minimum boyutlarını kabaca tahmin etmek için aşağıdaki tabloyu kullanabilirsiniz:

Hücre Sayısı
(Sütunlar veya Satırlar)
Kullanılabilir Boyut (dp)
(minWidth veya minHeight)
1 40dp
2 110dp
3 180dp
4 250dp
n 70 × n ≤ 30

minWidth ve minHeight konusunda dikkatli olmak ve widget'ı iyi bir varsayılan durumda oluşturacak minimum boyutu belirtmek iyi bir uygulamadır. minWidth ve minHeight verilerinin nasıl sağlanacağına dair bir örnek olarak, o anda çalan şarkıcıyı ve şarkının adını (dikey olarak yığılmış), Oynat ve İleri düğmesini gösteren bir müzik çalar widget'ınız olduğunu varsayalım:

Müzik çalar widget'ı örneği

3. Şekil. Örnek bir müzik çalar widget'ı.

Minimum yüksekliğiniz, sanatçı ve başlık için iki TextView'unuzun yüksekliği ve metin kenar boşlukları olmalıdır. Minimum genişliğiniz, Oynat ve İleri düğmelerinin kullanılabilir minimum genişlikleri ve minimum metin genişliği (örneğin, 10 karakter genişliği) ve yatay metin kenar boşlukları olmalıdır.

Minimum genişlik/yükseklik hesaplamaları için örnek boyutlar ve kenar boşlukları

4. Şekil. minWidth/minHeight hesaplamaları için örnek boyutlar ve kenar boşlukları. Metin etiketleri için iyi bir minimum genişlik örneği olarak 144 dp'yi seçtik.

Örnek hesaplamalar aşağıda verilmiştir:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48dp + (2 × 4dp) = 56dp

Widget arka planınızın dokuz yamasında doğal içerik dolgusu varsa minWidth ve minHeight öğelerine uygun şekilde eklemeniz gerekir.

Yeniden boyutlandırılabilir widget'lar

Widget'lar, Android 3.1'den itibaren yatay ve/veya dikey olarak yeniden boyutlandırılabilir. Yani minWidth ve minHeight, widget için etkin bir şekilde varsayılan boyut olur. Minimum widget boyutunu minResizeWidth ve minResizeHeight kullanarak belirtebilirsiniz. Bu değerler, widget'ın okunamayacağı ya da başka şekilde kullanılamayacağı boyutu belirtmelidir.

Bu genellikle ListView veya GridView tabanlı olanlar gibi koleksiyon widget'ları için tercih edilen bir özelliktir.

Uygulama widget'ınıza kenar boşlukları ekleme

Daha önce de belirtildiği gibi Android 4.0, targetSdkVersion değeri 14 veya daha büyük olan uygulamalar için Ana ekrandaki widget'ların her bir kenarına otomatik olarak küçük, standart kenar boşlukları ekler. Bu, Ana ekranın görsel olarak dengelenmesine yardımcı olur. Bu nedenle, Android 4.0'da uygulama widget'ınızın arka plan şeklinin dışında fazladan kenar boşluğu eklememenizi öneririz.

Platformun önceki sürümlerine özel kenar boşlukları uygulanan ve Android 4.0 ve sonraki sürümler için ek kenar boşlukları olmayan tek bir düzen yazmak kolaydır. Bunu düzen XML'siyle nasıl yapacağınız hakkında bilgi edinmek için Geliştirici Kılavuzu'ndaki Uygulama Widget'larına Kenar Boşlukları Ekleme bölümüne bakın.

Widget Düzenleri ve Arka Plan Grafikleri Tasarlama

Çoğu widget'ın arka planı düz bir dikdörtgen veya yuvarlatılmış dikdörtgen şekli vardır. Bu şekli, her ekran yoğunluğu için bir tane olacak şekilde dokuz yama kullanarak tanımlamak en iyi uygulamadır (ayrıntılar için Birden Fazla Ekranı Destekleme bölümüne bakın). Dokuz yama, draw9patch aracıyla veya sadece Adobe® Photoshop gibi bir grafik düzenleme programıyla oluşturulabilir. Bu, widget arka plan şeklinin mevcut tüm alanı kaplamasını sağlar. Dokuz yama, fazladan kenar boşlukları sağlayan şeffaf pikseller olmadan uçtan uca olmalıdır. Hafif gölgeler veya diğer ince efektler için birkaç kenarlık pikseli saklayın.

Not: Etkinliklerdeki kontrollerde olduğu gibi, durum listesi çekilebilir öğelerini kullanarak etkileşimli kontrollerin görsel odaklı ve basılmış durumları olduğundan emin olmanız gerekir.

Dokuz yama kenarlığı pikselleri

5. Şekil. Uzatılabilir bölgeleri ve içerik dolgusunu gösteren dokuz yamalı kenarlık pikseli.

StackView kullananlar gibi bazı uygulama widget'ları şeffaf bir arka plana sahiptir. Bu durumda, StackView'daki her bir öğe, kenardan kenara dokuz yamalı bir arka plan kullanmalıdır. Bu arka plan kenar boşlukları için çok az şeffaf piksel içerir veya hiç yoktur.

Widget'ın içeriği için RelativeLayout, LinearLayout veya FrameLayout gibi esnek düzenler kullanmanız gerekir. Etkinlik düzenlerinizin farklı fiziksel ekran boyutlarına uyum sağlaması gerektiği gibi widget düzenleri de farklı Ana ekran ızgara hücre boyutlarına uyum sağlamalıdır.

Aşağıda metin bilgilerini gösteren bir müzik widget'ının ve iki düğmenin kullanabileceği örnek bir düzen yer almaktadır. Bu kılavuz, OS sürümüne bağlı olarak kenar boşluklarının eklenmesiyle ilgili önceki açıklamayı temel almaktadır. Widget'a kenar boşlukları eklemenin en sağlam ve esnek yolunun, widget çerçevesini ve içeriğini dolgulu bir FrameLayout ile sarmalamak olduğunu unutmayın.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

Şimdi önceki bölümde verilen örnek müzik widget'ına göz atarsanız, aşağıdakiler gibi esnek düzenler özelliklerini kullanmaya başlayabilirsiniz:

Örnek bir müzik widget&#39;ı için esnek düzenleri ve özellikleri alıntılayın

6. Şekil. Esnek düzenlerden ve özelliklerden alıntı yapma.

Bir kullanıcı widget'ı ana ekranına eklediğinde, her ızgara hücresinin 80 dp × 100 dp boyutunda ve 8 dp kenar boşluğunun otomatik olarak tüm boyutlarda uygulandığı örnek bir Android 4.0 cihazda widget şu şekilde uzatılır:

Müzik widget&#39;ı, sistem tarafından 8 dp otomatik kenar boşluklarının eklendiği 80 dp x 100 dp boyutundaki örnek bir ızgara üzerinde duruyor

7. Şekil. Müzik widget'ı, sistem tarafından 8 dp otomatik kenar boşluklarının eklendiği 80 dp x 100 dp boyutundaki örnek bir ızgaranın üzerinde duruyor.

Uygulama Widget Şablonları Paketini Kullanma

Yeni bir widget tasarlamaya veya mevcut bir widget'ı güncellemeye başlarken, ilk olarak aşağıdaki widget tasarım şablonlarına bakmak iyi bir fikirdir. Aşağıdaki indirilebilir paket, dokuz yamalı arka plan grafikleri, XML ve birden çok ekran yoğunluğu için kaynak Adobe® Photoshop dosyaları, işletim sistemi sürümü widget stilleri ve widget renklerini içerir. Şablon paketi, widget'ınızın tamamını veya bazı bölümlerini (ör. düğmeler) etkileşimli hale getirmek için kullanışlı grafikler de içerir.

Widget şablonu alıntıları

8. Şekil. Uygulama Widget Şablonları Paketi'nden alıntılar (orta yoğunluklu, koyu, Android 4.0/önceki stiller, varsayılan/odaklanmış/basılmış durumlar).

Aşağıdaki bağlantıyı kullanarak en son App Widget Şablonları Paketi arşivini edinebilirsiniz:

Android 4.0 için Uygulama Widget Şablonları Paketi'ni indirin »