Android sistem çubukları

Durum çubuğu ve gezinme çubuğu birlikte sistem çubukları olarak adlandırılır. Pil seviyesi, saat ve pil seviyesi gibi önemli bilgileri görüntülerler uyarı uyarıları oluşturabilir ve herhangi bir yerden doğrudan cihaz etkileşimi sağlayabilir.

İster barda ister sanat eserleri olsun, ister misiniz? Android OS, giriş yöntemleri veya diğer etkileşimler ile etkileşimler için kullanıcı arayüzü tasarlama cihaz özellikleri. Sistem çubuklarının çoğu katmanın en üstünde olduğundan emin olmak için yardımcı olur.

Şekil 1: Sistem çubuklarının arkasındaki görüntüler

Çıkarımlar

  • Tasarımlarınıza kullanıcı arayüzü güvenli bölgeleri, sistem etkileşimler, giriş yöntemleri, ekran kesimleri ve diğer cihaz özellikleri. Sistem çubuklarının en üst katmanda tutulması, bunların dikkate alınmasını sağlar.

  • Yapılması gereken: Sistem çubuklarını şeffaf hale getirin ve uygulamanızı tam ekrana yerleştirin, uçtan uca deneyim sunmak için çubukların altındaki kullanıcı arayüzüne devam etmek.

  • Her iki çubuğu da şeffaf olacak şekilde ayarlayamıyorsanız çubukların renklerinden emin olun uygulamanızın gövdesinin rengiyle aynı olsun. Örneğin, her bir reklam grubu için Hareket çubuğu rengi ve üst durum çubuğuyla birlikte gezinme çubuğu rengi eşleştirmeye karar veriyorsunuz.

    Şekil 2: Sistem çubuğu renklerinin uygulamanızın gövde rengiyle eşleştiğinden emin olun
  • Hareketlerin altına dokunma hareketleri eklemekten veya hedefleri sürüklemekten kaçının; bu Uçtan uca ve hareketle gezinme.

    Şekil 3: Sistem hareketi içe aktarmaları. Temassız ödeme yapmayın bu alanlarda iyi performans göstermesi
    'nı inceleyin.

İçeriğinizi sistem çubuklarının arkasına çizin

Uçtan uca özelliği, Android'in kullanıcı arayüzünü açmak için sistem çubuklarının altına çizmesini bir deneyim sunabilir. Baştan sona kullanmanızı öneririz, çünkü gezinme çubuğu şeffaf, kullanıcılardan gelen yaygın bir istektir. (Daha fazla bilgi için uçtan uca desteklenmelidir.

Uygulamalar, eklere tepki vererek içerikteki çakışmaları giderebilir. Ekler açıklar çakışmaması için uygulama içeriğinizin ne kadarının doldurulması gerektiğini bazı bölümleri (ör. gezinme çubuğu veya durum çubuğu) ya da ekran kesimleri gibi fiziksel cihaz özellikleri.

Uçtan uca kullanım için tasarım yaparken aşağıdaki ek türlerine dikkat edin vakalar:

  • Sistem çubuğu ekleri, hem dokunulabilir hem de dokunulmaması gereken kullanıcı arayüzü için geçerlidir tarafından okunabilecek şekilde boşalt olmamasına dikkat edin.
  • Sistem hareketi ek kümeleri, sistem tarafından kullanılan hareketle gezinme alanlarına uygulanır daha öncelikli hale getirmeniz gerekir.

Durum çubuğu

Android'de, durum çubuğunda bildirim simgeleri ve sistem simgeleri bulunur. İlgili içeriği oluşturmak için kullanılan Kullanıcı, bildirime erişmek için aşağı çekerek durum çubuğuyla etkileşimde bulunduğunda gölge.

Şekil 4: Üst uygulama çubuğunun üst kısmında vurgulanmış durum çubuğu bölgesi

Bağlama göre, günün saatine ve saate göre durum çubuğu farklı görünebilir. kullanıcı tarafından ayarlanan tercihler veya temalar ve diğer parametreler. Ayrıca, aşağıdaki örneklerde olduğu gibi durum çubuğu stilini de ayarlayabilirsiniz.

Şekil 5: Açık ve koyu temada durum çubuğu.

Uçtan uca olduğu gibi artık uygulama içeriğinizin ekranın tamamını kapladığından emin olun. gereklidir. Aşağıda gösterildiği gibi, uçtan uca içeriğe sahip şeffaf sistem çubukları kullanın. örneği inceleyelim.

Şekil 6: Uçtan uca özellik, içeriklerinizi öne çıkarmak için idealdir verimli bir şekilde kullanabilirsiniz.


Şekil 7: İçeriğinizi geliştirmek veya uygulamanızın marka bilinci oluşturma. Sistem çubuklarını varsayılan özelliklere ayarlanmış olarak bırakmayın.

Bir bildirim geldiğinde, durum çubuğunda genellikle bir simge görünür. Bu kullanıcıya bildirim çekmecesinde görülecek bir şey olduğunu bildirir. Bu, kanalınızı temsil eden uygulama simgeniz veya simgeniz olabilir. Görüntüleyin Bildirim tasarımı.

Şekil 8: Durum çubuğundaki bildirim simgesi

Durum çubuğu stilini ayarla

Durum çubuğu arka planını, uygulama temanızın bir parçası olarak özel bir renkle biçimlendirin Şeffaflık ve opaklık ayarı bulunuyor.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Arka plan rengini manuel olarak ayarlıyorsanız çubuk içeriğini açık veya koyu olarak ayarlayın.

Ekran kesimleri ve durum çubuğu

Ekran kesimi, bazı cihazlarda ekrana kadar uzanan bir alandır ön sensörler için yer olarak kullanılabilir. Görünümü etkileyebilir olabilir. Ekran kesimleri, üreticiye bağlı olarak değişiklik gösterebilir.

Ekran kesimlerini destekleme hakkında bilgi edinin.

Şekil 9: Ekran kesimi örnekleri

Android'de geri, ana sayfa ve genel bakış kontrollerini kullanarak kullanıcılar gezinmeyi kontrol edebilir:

  • Geri, doğrudan önceki görünüme geri döner.
  • Ana ekran, uygulamadan çıkıp cihazın ana ekranına geçiş yapar.
  • Genel Bakış'ta uygulamaların açık ve yakın zamanda açıldığı gösterilir.

Kullanıcılar, hareket de dahil çeşitli gezinme çubuğu yapılandırmaları arasından seçim yapabilir gezinme (önerilen) ve üç düğmeli gezinme.

Hareketle gezinme

Android 10'da (API düzeyi 29) sunulan bu özellikte hareketle gezinme önerilir. ancak kullanıcının tercihini geçersiz kılamazsınız. Hareket navigasyonda geri, ana sayfa ve genel bakış düğmeleri kullanılmaz; bunun yerine uygun fiyatlı tek hareket tutma yeri. Kullanıcılar, ekranı sol tarafından veya kaydırarak devam etmek için ekranın sağ kenarını, ileri ve geri gitmek için ekranın sağ kenarını home. Yukarı kaydırıp basılı tuttuğunuzda genel bakış açılır.

Hareketle gezinme, farklı platformlarda tasarım yapmak için daha ölçeklenebilir bir gezinme kalıbıdır. mobil cihazlar ve daha büyük ekranlar. En iyi kullanıcı deneyimini sağlamak için hareketle gezinme:

  • Uçtan uca içerikleri destekleme.
  • Hareketle gezinme eklerinin altına etkileşim veya dokunma hedefi eklemekten kaçının.

Hareketle gezinmeyi uygulama hakkında bilgi edinin.

Şekil 10: Hareket tutma yeri gezinme çubuğu

Üç düğmeyle gezinme

Üç düğmeli gezinme; geri, ana sayfa ve genel bakış için üç düğme sağlar.

Şekil 11: Üç düğmeli gezinme çubuğu

Diğer gezinme çubuğu varyasyonları

Android sürümüne ve cihaza bağlı olarak diğer gezinme çubuğu yapılandırmaları kullanımına sunmaktır. Örneğin, iki düğmeli gezinme ana ekran ve geri düğmeleri.

Şekil 12: İki düğmeli gezinme çubuğu

Gezinme stili ayarlama

Aşağıdaki örnekte, gezinme stilinin nasıl uygulanacağı gösterilmektedir.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android, hareketle kullanıcı arayüzünün tüm görsel korumasını işler ya da düğme modunda kullanabilirsiniz.

  • Hareketle gezinme modu: Sistem, belirli bir klavye düzeninde dinamik renk uyarlamasını uygular. sistem çubuklarının içeriğinin içeriğe göre renk değiştirdiği fark etmeyeceksiniz. Aşağıdaki örnekte, gezinme çubuğundaki tutma yeri üzerine yerleştirildiğinde koyu renge veya açık renkli içeriğin üzerine yerleştirildiğinde koyu renge dönüşür.

    Şekil 13: Dinamik renk adaptasyonu
  • Düğme modları: Sistem, sistemin arkasına yarı saydam bir çerçeve uygular çubuklar (API düzeyi 29 veya üstü için) ya da şeffaf bir sistem çubuğu (API düzeyi için) 28 veya daha küçük).

    Şekil 14: Sistem çubuklarının kullanıldığı dinamik renk uyarlaması arkasındaki içeriğe göre rengi değiştirin

Klavye ve gezinme

Şekil 15: Gezinme çubukları olan dokunmatik klavye

Her gezinme türü, dokunmatik klavyeye uygun şekilde kullanıcının, bu ayarı kapatmak, hatta klavye türü. Klavye geçişinin yumuşak olmasını sağlamak için uygulama geçişini, klavye kaydırma hareketleriyle senkronize eden geçiş ekranın altından yukarı veya aşağı ok WindowInsetsAnimationCompat.

Yoğun içerik modu

Şekil 16: Tam ekran deneyimini gösteren yoğun içerik modu bir mobil cihaz üzerinde

Örneğin, tam ekran deneyimine ihtiyaç duyduğunuzda sistem çubuklarını gizleyebilirsiniz. Kullanıcı film izlerken. Kullanıcı yine de cihaza dokunabilir ve sistem kontrollerinde gezinmek veya sistem denetimleriyle etkileşimde bulunmak için sistem çubukları ve kullanıcı arayüzünü görünür. Tam ekran modları için tasarım hakkında daha fazla bilgi edinin veya Yoğun içerik modu için sistem çubuklarını gizleyin.