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 Doğru. Uçtan uca bir uygulama.

Çıkarımlar

  • Uçtan uca deneyim için sistem çubuklarının altındaki arka planı ve kaydırma içeriğini ç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 sürükleyici bir deneyim sunar.

Bir uygulama, yerleştirmelere tepki vererek içerikteki çakışmaları giderebilir. İç boşluklar, 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 ekleri, hem dokunulabilir olan 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ına (ör. kamera kesimi) uygulanır.

Durum çubuğuyla ilgili dikkat edilmesi gerekenler

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

Ü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ın dışına kaydırılabilir. Orta ve büyük boyutlu üst uygulama çubukları daha küçük bir uygulama çubuğuna 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 uçtan uca 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 işleminde 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 bölmeler 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 TopAppBar'ın 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ğuyla ilgili dikkat edilmesi gereken noktalar 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 scrim'i 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ştirmelerini kullanarak önemli kullanıcı arayüzünü yerleştirin.

Yapılmaması gerekenler

Önemli kullanıcı arayüzlerini 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 kesimine çizilmelidir.

Şekil 5. Düz renkli uygulama çubuğu arka planları, ekran kesimini kaplarken önemli kullanıcı arayüzü yerleştirilir.

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 kesimlerini destekleme 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.