Uçtan uca tasarım

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

Şekil 1. Sol. Uçtan uca olmayan bir uygulama. Doğru. Uçtan uca ekranlı bir uygulama.

Çıkarımlar

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

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

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

Uygulamalar, iç kısımlara tepki vererek içerikteki çakışmaları giderebilir. Ekler, uygulamanızın içeriğinin sistem çubuklarıyla veya ekran kesikleri gibi fiziksel cihaz özellikleriyle çakışmaması için ne kadar dolgu yapılması gerektiğini açıklar. Compose ve Görünümler'de uçtan uca ekranı destekleme ve içe yerleştirmeleri işleme hakkında bilgi edinin.

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

  • Sistem çubuğu eklemeleri, hem dokunulabilir olan hem de sistem çubukları tarafından görsel olarak engellenmemesi gereken kullanıcı arayüzü için geçerlidir.
  • Sistem hareketi ekleri, OS tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanları için geçerlidir.
  • Ekran kesme iç kısımları, kamera kesmesi gibi ekran yüzeyine uzanan cihaz alanları için geçerlidir.

Durum çubuğuyla ilgili dikkat edilmesi gerekenler

Temel sistem çubuğu tasarım kılavuzu için Android Sistem Çubukları bölümüne bakın. Aşağıdaki bölümde, durum çubuğuyla ilgili diğer konular ele alınmaktadır.

Kaydırılabilir içerik

Üst uygulama çubukları, kaydırma sırasında 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 üst uygulama çubukları daha küçük bir uygulama çubuğuna daraltılabilir. [Materyal kılavuzunu][10] inceleyin.

Yapılması gerekenler

Uygulama çubuğu yapışkansa 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 renk gradyanı ekleyin.

Kullanıcı arayüzü altından kaydırıldığında durum çubukları yarı saydam olmalıdır. Böylece durum çubuğu simgeleri karmaşı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ünü uçtan uca yapın. Ardından, aşağıdakilerden birini yaparak sistem çubuğunun yarı saydam olmasını sağlayın:

  • Mümkünse kaydırma sırasında Material 3 TopAppBar otomatik korumasını kullanın.
  • Özel bir gradyan composable oluşturun veya görünümler için GradientProtection'ı kullanın. Bu işlemi Compose'da yapma hakkında daha fazla bilgi için Sistem çubuğu koruması başlıklı makaleyi inceleyin.
Şekil 3. Hareket iç kısımları yeşil renkle vurgulanmış bir uygulama.

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

Yapılmaması gerekenler

Her bölmenin arka planıyla eşleşmeyen gradyan koruması olmalıdır.

Yapılması gerekenler

Her bölmenin arka planıyla eşleşen gradyan koruması vardı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 bir 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 eklemeyin. Örneğin, hem Material 3 TopAppBar yerleşik korumasını hem de özel bir korumayı kullanmayın.

Temel gezinme çubuğu tasarım kılavuzu için Android Sistem Çubukları'na bakın. Aşağıdaki bölümde, gezinme çubuğuyla ilgili dikkat edilmesi gereken diğer noktalar yer almaktadır.

Kaydırılabilir içerik

[BottomAppBar][10], scrollBehavior parametresi kullanılarak kaydırma yaparken daraltılmalıdır.

Yapılması gerekenler

Alt uygulama çubuğu animasyonla kaybolduğunda üç düğmeli gezinme için sistem çubuğu gölgesi ekleyin.

Yapılması gerekenler

Hareketle gezinmeyi şeffaf tutun ve ek bir perde eklemeyin.

Ancak scrollBehavior parametresi olmadığı için kaydırma sırasında [NavigationBar]11 görünür kalır.

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 kesmesinin altında kalmaması için ekran kesmesi eklerini işlemelidir.

Yapılması gerekenler

Ekran kesmesi iç kısımlarını kullanarak kritik kullanıcı arayüzünü iç kısma yerleştirin.

Yapılmaması gerekenler

Kritik kullanıcı arayüzü öğelerini ekranın en kenarına yerleştirmeyin.

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

Şekil 5. Düz uygulama çubuğu arka planları, ekran kesintisine doğru uzanırken önemli kullanıcı arayüzü öğeleri içe yerleştirilir.

Yatay bantların ekran kesmesine çizildiğinden emin olun.

Şekil 6. Kenardan kenara yatay ekran. Bu ekranda, bant ekran kesiminden geçer.

Compose'da ekran kesimlerini nasıl destekleyeceğiniz hakkında bilgi edinin.

Diğer yönergeler

Genel olarak, arka planlar ve ayırıcı çizgiler de uçtan uca çizilmeli, metin ve düğmeler gibi içerikler ise sistem kullanıcı arayüzü ve donanım öğelerinden kaçınmak için içe yerleştirilmelidir.