Uygulama Widget'ı Tasarım Yönergeleri

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

Şekil 1. 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 ile kısayollar gibi diğer öğeleriyle grafiksel olarak eşleşecek şekilde nasıl tasarlanacağı açıklanmaktadır. Kılavuzda, widget çizimleriyle ilgili bazı standartların yanı sıra widget grafiklerine ilişkin bazı 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: bir sınırlayıcı kutu, bir ç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 yer alır. Kullanılabilir Görünümlerin tam listesi için Geliştirici Kılavuzu'nda 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'ın denetimleri arasında dolgu bırakır.

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

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 bir hizalama sağlamak için widget çerçevesi ile uygulama widget'ının sınırlayıcı kutusu arasında otomatik olarak boşluklar bırakılır. Kesinlikle önerilen bu davranıştan yararlanmak için uygulamanızın targetSdkVersion değerini 14 veya daha büyük 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 işaretler alır. Ayrıca, standart gölgelendirme efektlerini de kullanırlar. Tüm bu ayrıntılar bu sayfada açıklanmaktadır.

Widget'ınız için boyut belirleme

Her widget, varsayılan olarak tüketmesi gereken minimum alanı belirten bir minWidth ve minHeight tanımlamalıdır. Kullanıcılar Ana ekranlarına bir widget eklediklerinde, bu widget genellikle belirlediğiniz minimum genişlik ve yükseklikten daha fazla yer kaplar. Android Ana ekranları kullanıcılara widget'ları ve simgeleri yerleştirebilecekleri bir ızgara sunar. Bu ızgara, cihaza göre değişiklik gösterebilir. Örneğin, birçok cep telefonunda 4x4, tabletlerde ise daha büyük bir 8x7 ızgara mevcuttur. 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 uzatılır. Aşağıdaki Widget Düzenleri ve Arka Plan Grafikleri Tasarlama bölümünde konuştuğumuz gibi, uygulama widget'ları için dokuz yamalı arka planlar ve esnek düzenler kullanmak, widget'ınızın cihazın Ana ekran ızgarasına sorunsuz bir şekilde uyum sağlamasına, hem kullanılabilir hem de 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österebilir, ancak istenen 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

Widget'ı iyi bir varsayılan durumda tutan minimum boyutu belirterek minWidth ve minHeight konusunda muhafazakar olmak iyi bir uygulamadır. minWidth ve minHeight öğelerinin nasıl sağlanacağına dair ö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:

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

Minimum yüksekliğiniz, sanatçı ve başlığa ait iki TextView'un yüksekliği ile birlikte metin kenar boşluklarının bazıları olmalıdır. Minimum genişliğiniz, Oynat ve İleri düğmelerinin kullanılabilir minimum genişliği ve minimum metin genişliği (örneğin, 10 karakter genişliği) ve ayrıca yatay metin kenar boşlukları kadar olmalıdır.

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 uygun şekilde minWidth ve minHeight öğelerine eklemeniz gerekir.

Yeniden boyutlandırılabilir widget'lar

Android 3.1'den itibaren widget'lar yatay ve/veya dikey olarak yeniden boyutlandırılabilir. Yani minWidth ve minHeight, widget için etkili şekilde varsayılan boyut olur. Minimum widget boyutunu minResizeWidth ve minResizeHeight kullanarak belirleyebilirsiniz. Bu değerler, widget'ın okunaksız veya başka şekilde kullanılamayacak olduğu 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 uygulamalarda Ana ekrandaki widget'ların her bir kenarına otomatik olarak küçük, standart kenar boşlukları ekleyecektir. 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ının uygulandığı ve Android 4.0 ve sonraki sürümler için ek kenar boşluğu içermeyen tek bir düzen yazmak kolaydır. Bunu düzen XML'siyle nasıl yapabileceğiniz hakkında bilgi edinmek için Geliştirici Kılavuzu'nda 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 kolayca, Adobe® Photoshop gibi bir grafik düzenleme programıyla oluşturulabilir. Böylece widget arka plan şekli, kullanılabilir tüm alanı kaplayabilir. Dokuz yama, fazladan kenar boşlukları sağlayan şeffaf pikseller olmadan uçtan uca olmalıdır. Hafif gölgeler veya diğer göze çarpmayan efektler için, birkaç kenarlık pikseli bir arada tutulabilir.

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

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

StackView kullananlar gibi bazı uygulama widget'larının arka planı şeffaftır. Bu durumda, StackView'daki her bir öğenin, kenar boşlukları için çok az şeffaf pikselleri olan veya hiç olmayan, uçtan uca dokuz yamalı bir arka plan kullanması gerekir.

Widget'ın içeriğinde 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ılavuzda, OS sürümüne bağlı olarak kenar boşluğu ekleme konulu önceki tartışma temel alınmıştır. Widget'a kenar boşlukları eklemenin en sağlam ve esnek yolunun, widget çerçevesini ve içeriğini dolgulu bir FrameLayout içine yerleştirmek 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ğıdaki gibi esnek düzenler özelliklerini kullanmaya başlayabilirsiniz:

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

Her ızgara hücresinin 80 dp × 100 dp boyutunda ve 8 dp kenar boşluğunun tüm boyutlara otomatik olarak uygulandığı örnek bir Android 4.0 cihazında, bir kullanıcı widget'ı ana ekranına eklediğinde, widget aşağıdaki gibi uzatılır:

7. Şekil. 80 dp x 100 dp boyutundaki örnek bir ızgaranın üzerinde duran ve sistem tarafından 8 dp otomatik kenar boşluğu bulunan müzik widget'ı.

Uygulama Widget Şablonları Paketini Kullanma

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

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

Aşağıdaki bağlantıyı kullanarak App Widget Şablonları Paketi arşivinin en son sürümünü edinebilirsiniz:

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