Sekme simgeleri, çok sekmeli bir arayüzde ayrı sekmeleri temsil etmek için kullanılan grafik öğeleridir. Her sekme simgesinin iki durumu vardır: seçili değil ve seçili.
Yoğunluğa Özel Simge Grupları Sağlama konusunda açıklandığı gibi, düşük, orta ve yüksek yoğunluklu ekranlar için ayrı simge grupları oluşturmanız gerekir. Bu sayede simgelerin, uygulamanızın yüklenebileceği farklı cihazlar genelinde doğru şekilde görüntülenmesi sağlanır. Birden fazla simge grubuyla nasıl çalışılacağıyla ilgili öneriler için Tasarımcılar İçin İpuçları bölümüne bakın.
Resmin son hali, şeffaf PNG dosyası olarak dışa aktarılmalıdır. Arka plan rengi eklemeyin.
Adobe Photoshop'ta simge oluşturmaya yönelik şablonlar Simge Şablonları Paketi'nde mevcuttur.
Uyarı:
Önceki sürümlere kıyasla Android 2.0'da sekme simgelerinin stili önemli ölçüde değişti. Tüm Android sürümlerini desteklemek için geliştiriciler:
1. Android 2.0 ve sonraki sürümler için sekme simgelerini drawable-hdpi-v5, drawable-mdpi-v5 ve drawable-ldpi-v5 dizinlerine yerleştirin.
2. Önceki sürümler için sekme simgelerini drawable-hdpi, drawable-mdpi ve drawable-ldpi dizinlerine yerleştir.
3. Uygulama manifesti bölümündeki <uses-sdk> içinde android:targetSdkVersion değerini 5 veya daha yüksek bir değere ayarlayın.
Bu, sisteme yeni sekme stilini kullanarak sekmeleri oluşturması gerektiğini bildirir.
İki Sekme Durumu İçin Simge Sağlama
Sekme simgelerinin iki durumu olmalıdır: seçili değil ve seçili. Birden çok durumu olan simgeler sağlamak amacıyla, geliştiricilerin her bir simge için çekilebilir bir durum listesi oluşturması gerekir. Bu, farklı kullanıcı arayüzü durumları için hangi resmin kullanılacağını listeleyen bir XML dosyasıdır.
Örneğin, "Arkadaşlar" ve "İş Arkadaşları" adlı sekmeler içeren bir sekme widget'ı için aşağıdakine benzer bir dizin yapısı kullanabilirsiniz:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
Yukarıda listelenen XML dosyalarının içeriği, ilgili seçili ve seçilmemiş simgenin çekilebilir alanlarına referans vermelidir. Örneğin, ic_tab_friends.xml kodu aşağıda verilmiştir:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Android 2.0 - Android 2.3
Aşağıdaki yönergelerde, Android 2.0 ile Android 2.3 arasındaki (API Düzeyleri 5-10) için sekme simgelerinin nasıl tasarlanacağı açıklanmaktadır.
Boyut ve konumlandırma
Sekme simgelerinde basit şekiller ve formlar kullanılmalıdır. Bunlar ölçeklendirilmeli ve nihai öğenin içine yerleştirilmelidir.
Şekil 1'de, simgenin öğenin içinde yerleştirilmesinin çeşitli yolları gösterilmektedir. Simgeleri öğenin gerçek sınırlarından daha küçük boyutlandırmanız gerekir.
Simgenin önerilen boyutunu belirtmek için Şekil 1'deki her örnek üç farklı kılavuz dikdörtgeni içerir:
- Kırmızı kutu, öğenin tamamı için sınırlayıcı kutudur.
- Mavi kutu, gerçek simge için önerilen sınırlayıcı kutudur. Simge kutusunun boyutu, özel simge işlemlerine izin vermek için tam öğe kutusundan daha küçüktür.
- Turuncu kutu, içerik kare olduğunda asıl simge için önerilen sınırlayıcı kutudur. Kare simgelerin kutusu, iki tür arasında tutarlı bir görsel ağırlık sağlamak için diğer simgelerden daha küçüktür.
|
|
|
|
|
|
|
Şekil 1. Sekme simgesinin boyutunu ve konumunu simge öğesinin sınırları içinde belirleyin. |
Stil, renkler ve efektler
Sekme simgeleri düz, mat ve yüz üzerinde gösterilmektedir.
Sekme simgelerinin iki durumu olmalıdır: seçili ve seçili değil.
|
Şekil 2. Seçili olmayan sekme simgelerinin stili ve efektleri. Not: Tüm piksel boyutları orta yoğunlukta olanlar içindir ve diğer yoğunluklar için uygun şekilde ölçeklenmelidir.
|
|
3. Şekil. Seçilen sekme simgeleri için stil ve efektler. Not: Tüm piksel boyutları orta yoğunlukta olanlar içindir ve diğer yoğunluklar için uygun şekilde ölçeklenmelidir.
|
Yapılması ve yapılmaması gerekenler
Aşağıda, uygulamanız için sekme simgeleri oluştururken göz önünde bulundurulması gereken "yapma ve yapma" örneklerinden bazıları verilmiştir.
Örnek simgeler
Aşağıda, Android platformunda kullanılan standart yüksek yoğunluklu sekme simgeleri gösterilmektedir.
Uyarı: Bu kaynaklar, platform sürümleri arasında değişebileceğinden, sistemin kaynak kopyasına referans vermemeniz gerekir. Herhangi bir simge veya diğer dahili çekilebilir kaynakları kullanmak isterseniz uygulama kaynaklarınızda bu simgelerin veya çekilebilir öğelerin yerel bir kopyasını depolamanız, ardından uygulama kodunuzdan yerel kopyaya başvurmanız gerekir. Bu şekilde, sistemin kopyası değişse bile simgelerinizin görünümü üzerinde kontrol sahibi olabilirsiniz. Aşağıdaki tablonun eksiksiz olması amaçlanmamıştır.
Android 1.6 ve önceki sürümler
Aşağıdaki yönergelerde, Android 1.6 (API Düzeyi 4) ve önceki sürümler için sekme simgelerinin nasıl tasarlanacağı açıklanmaktadır.
Yapı
- Seçili olmayan sekme simgeleri, menü simgeleriyle aynı dolgu renk geçişine ve efektlerine sahiptir, ancak dış parlaklık içermez.
- Seçilen sekme simgeleri, seçilmemiş sekme simgelerine benzer, ancak daha soluk bir iç gölgeye sahiptir ve iletişim kutusu simgeleriyle aynı ön taraf renk geçişine sahiptir.
- Sekme simgelerinde, yalnızca yuvarlak bir şeklin takma adının kenarıyla üst üste bindirilmesi gereken 1 piksellik bir güvenli çerçeve vardır.
- Bu sayfada belirtilen tüm boyutlar 32x32 piksellik çalışma yüzeyi boyutuna dayanır. Photoshop şablonunun içindeki sınırlayıcı kutunun çevresinde 1 piksellik dolgu bırakın.
|
3. Şekil. Seçili olmayan sekme simgeleri için güvenli çerçeve ve dolgu gradyanı. Simge boyutu 32x32'dir. |
|
4. Şekil. Seçilen durumdaki sekme simgeleri için güvenli çerçeve ve dolgu gradyanı. Simge boyutu 32x32'dir. |
Seçili olmayan sekme simgesi
Işık, efektler ve gölgeler
Seçili olmayan sekme simgeleri, seçilen sekme simgeleri gibi görünür, ancak daha soluk bir iç gölgeye ve iletişim kutusu simgeleriyle aynı ön kısım renk geçişine sahiptir.
|
5. Şekil. Seçili olmayan sekme simgeleri için ışık, efektler ve gölgeler.
|
Adım adım
|
Seçili sekme simgesi
Seçilen sekme simgeleri, menü simgesiyle aynı dolgu renk geçişine ve efektlerine sahiptir, ancak dış parlaklığı yoktur.
|
6. Şekil. Seçili sekme simgeleri için ışık, efektler ve gölgeler.
|
Renk paleti
|
Adım adım
|
