Uçtan uca tasarım

Uçtan uca uygulamalar, sistem çubuklarının altında kullanıcı arayüzü çizerek ekranın tamamından yararlanır.

Şekil 1. Sol. Kenardan kenara olmayan bir uygulama Sağ. Uçtan uca bir uygulama.

Çıkarımlar

  • Uçtan uca deneyim için sistem çubuklarının altında arka plan ve kaydırma içeriği çizin.
  • Sistem yerleşimleri altına dokunma hareketleri veya sürükleme hedefleri eklemeyin. Bunlar, uçtan uca ve hareketle gezinme ile çakışır.
Şekil 2. Hareket yerleştirmelerinin yeşil renkle vurgulandığı bir uygulama.

İçeriğinizi sistem çubuklarının arkasında gösterme

Uçtan uca özelliği, kullanıcı arayüzünü sistem çubuklarının altında çizerek etkileyici bir deneyim sunar.

Bir uygulama, yerleştirilmiş resimlere tepki vererek içerikteki çakışmaları giderebilir. İçerik yerleştirme, uygulamanızın içeriğinin sistem çubuklarıyla veya ekran kesikleri gibi fiziksel cihaz özellikleriyle çakışmaması için ne kadar doldurulması gerektiğini açıklar. Compose ve Görünümler'de uçtan uca desteği ve iç kısımları nasıl işleyeceğiniz hakkında bilgi edinin.

Uçtan uca kullanım alanları tasarlarken aşağıdaki yerleştirme türlerine dikkat edin:

  • Sistem çubuğu yerleştirmeleri, hem dokunulabilir hem de sistem çubukları tarafından görsel olarak engellenmemesi gereken kullanıcı arayüzü için geçerlidir.
  • Sistem hareketi yerleştirmeleri, işletim sistemi tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanlarına uygulanır.
  • Ekran kesimi yerleştirmeleri, ekran yüzeyine uzanan cihaz alanları (ör. kamera kesimi) için geçerlidir.

Durum çubuğuyla ilgili dikkat edilmesi gereken noktalar

Temel sistem çubuğu tasarımıyla ilgili yönergeler için Android Sistem Çubukları'na bakın. Aşağıdaki bölümde durum çubuğuyla ilgili ek hususlar ele alınmaktadır.

Kaydırılan içerik

Kaydırma sırasında üst uygulama çubukları daraltılmalıdır. Material 3 TopAppBar'ı nasıl daraltacağınızı öğrenin. Material 3'te küçük üst uygulama çubukları, durum çubuğu yüksekliğine daraltılabilir veya ekran dışına kaydırılabilir. Orta ve büyük boyutlu üst uygulama çubukları daha küçük bir uygulama çubuğu haline daraltılabilir. Materyal rehberine bakın.

Yapılması gerekenler

Uygulama çubuğu sabitse küçük üst uygulama çubuğunu durum çubuğu yüksekliğine daraltın.

Yapılması gerekenler

Küçük üst uygulama çubuğu sabit değilse eşleşen bir arka plan rengi gradyanı ekleyin.

Kullanıcı arayüzü altta kaydırıldığında durum çubukları yarı saydam olmalıdır. Böylece durum çubuğu simgeleri dağınık görünmez. Bunu yapmak için önce LazyColumn veya RecyclerView dokümanlarındaki adımları uygulayarak kaydırılabilir bir kullanıcı arayüzü oluşturun. Ardından, aşağıdakilerden birini yaparak sistem çubuğunun yarı saydam olduğundan emin olun:

  • Geçerliyse kaydırma sırasında Material 3 TopAppBar otomatik korumasına güvenin.
  • Özel bir gradyan composable'ı oluşturun veya Görünümler için GradientProtection'ı kullanın. Bunu oluşturma penceresinde yapma hakkında daha fazla bilgi için Sistem çubuğu koruması başlıklı makaleyi inceleyin.
Şekil 3. Hareket yerleştirmelerinin yeşil renkle vurgulandığı bir uygulama.

Uyarlanabilir düzenlerde, farklı arka plan renklerine sahip paneler için ayrı korumalar olduğundan emin olun.

Yapılmaması gerekenler

Her bölmenin arka planıyla eşleşmeyen gradyan koruması

Yapılması gerekenler

Her bölmenin arka planıyla eşleşen renk geçişi koruması olmalıdır.

Benzer şekilde, gezinme çekmeceleri de uygulamanın geri kalanından ayrı bir korumaya sahip olmalıdır.

Şekil 4. Gezinme çekmecesi için yarı saydam durum çubuğu. Bu resimde, gezinme çekmecesi için durum çubuğu koruması gösterilmektedir ancak uygulama için gösterilmemektedir.

Durum çubuğu korumalarını üst üste kullanmayın. Örneğin, hem Material 3'ün TopAppBar yerleşik korumasını hem de özel bir korumayı kullanmayın.

Temel gezinme çubuğu tasarımıyla ilgili yönergeler için Android Sistem Çubukları'na bakın. Aşağıdaki bölümde, ek gezinme çubuğu hususları yer almaktadır.

Kaydırılan içerik

Kaydırma sırasında alt uygulama çubukları daraltılmalıdır.

Yapılması gerekenler

Alt uygulama çubuğu animasyonla kaybolduğunda üç düğmeli gezinme için sistem çubuğu karartması ekleyin.

Yapılması gerekenler

Hareketle gezinme özelliğini şeffaf tutun ve ek bir scrim eklemeyin.

Ekran kesimleri

Ekran kesikleri, kullanıcı arayüzünüzün görünümünü etkileyebilir. Uygulamalar, kullanıcı arayüzünün önemli kısımlarının ekran kesiğinin altında çizilmemesi için ekran kesiği yerleştirmelerini yönetmelidir.

Yapılması gerekenler

Ekran kesme yerleşimlerini kullanarak önemli kullanıcı arayüzünü yerleştirin.

Yapılmaması gerekenler

Önemli kullanıcı arayüzünü ekranın en kenarına yerleştirin.

Ancak, düz renkli uygulama çubuğu arka planları, aşağıdaki resimde gösterildiği gibi ekran kesme alanına çizilmelidir.

Şekil 5. Düz renkli uygulama çubuğu arka planları, ekran kesimini kaplarken önemli kullanıcı arayüzü öğeleri iç kısımda yer alır.

Yatay kaydırma bantlarının ekran kesimine çizildiğinden emin olun.

Şekil 6. Bantın, ekran kesiminin içinden kaydırıldığı, uçtan uca yatay ekran.

Compose ve Views'da ekran kesimlerinin nasıl destekleneceği hakkında bilgi edinin.

Diğer bilgiler

Genel olarak, arka planlar ve ayırıcı çizgiler de kenardan kenara çizilmelidir. Metin ve düğme gibi içerikler ise sistem kullanıcı arayüzü ve donanım öğelerinden kaçınmak için içe yerleştirilmelidir.