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

Çıkarımlar

  • Uçtan uca deneyim için sistem çubuklarının altında arka plan ve kaydırılan içerik çizme.
  • Sistem yerleştirmelerinin 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, içerik yerleştirme işlemlerine 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 iç kısımları, 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 kesme yerleri, ekran yüzeyine uzanan cihaz alanlarına (ör. kamera kesme yeri) uygulanır.

Durum çubuğuyla ilgili dikkat edilmesi gerekenler

Temel sistem çubuğu tasarım yönergeleri 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 dışına kaydırılabilir. Orta ve büyük ü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.

Durum çubuğu simgelerinin dağınık görünmemesi için kullanıcı arayüzü altta kaydırıldığında durum çubukları yarı saydam olmalıdır. Bunu yapmak için öncelikle LazyColumn veya RecyclerView dokümanı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. 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 bir gradyan 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ı aynı anda kullanmayın.

Temel gezinme çubuğu tasarım yönergeleri 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

Alt uygulama çubukları kaydırma sırasında 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 gezinmeyi ş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 kesiminin altında çizilmemesi için ekran kesimi 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ü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 kesimine çizilmelidir.

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

Yatay kaydırma çubukları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'da ekran kesiklerini 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.