Uçtan uca tasarım

Kenardan kenara uygulama, sistem çubuklarının altına kullanıcı arayüzü çizerek ekranın tamamından yararlanır.

Şekil 1. Sol. Ekranı kaplamayan uygulamalar Sağ. Uçtan uca ekrana sahip bir uygulama.

Çıkarımlar

  • Kenardan kenara bir deneyim için sistem çubuklarının altına arka plan ve kaydırılabilir içerik çizin.
  • Sistem içe yerleştirilmelerinin altına dokunma hareketleri veya sürükleme hedefleri eklemekten kaçının. Bunlar, kenardan kenara ve hareketle gezinmeyle çakışır.
Şekil 2. Hareket eklemelerinin yeşil renkle vurgulandığı bir uygulama.

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

Kenardan kenara özelliği, kullanıcı arayüzünü sistem çubuklarının altına çizerek sürükleyici bir deneyim yaşamanızı sağlar.

Uygulamalar, eklemelere tepki vererek içeriklerdeki çakışmalarla ilgili sorunları giderebilir. İçeriğiniz, sistem çubuklarıyla veya ekran kesikleri gibi fiziksel cihaz özellikleriyle örtüşmemesi için ne kadar boşluk bırakılması gerektiğini belirtir. Oluşturma ve Görünümler'de kenardan kenara desteği nasıl sağlayacağınız ve içe yerleştirilen öğeleri nasıl yöneteceğiniz hakkında bilgi edinin.

Kenardan kenara kullanım alanları tasarlarken aşağıdaki iç içe ekleme türlerini göz önünde bulundurun:

  • Sistem çubuğu iç içe yerleştirilmeleri, hem dokunulabilir hem de sistem çubukları tarafından görsel olarak gizlenmemesi gereken kullanıcı arayüzleri için geçerlidir.
  • Sistem hareketi iç içe yerleştirilmeleri, işletim sistemi tarafından kullanılan ve uygulamanıza göre öncelikli olan hareketle gezinme alanları için geçerlidir.
  • Ekran kesme içi eklemeleri, kamera kesmesi gibi ekran yüzeyine uzanan cihaz alanları için geçerlidir.

Durum çubuğuyla ilgili dikkat edilmesi gereken noktalar

Temel sistem çubuğu tasarımı ile ilgili bilgi için Android sistem çubukları başlıklı makaleyi inceleyin. Aşağıdaki bölümde, durum çubuğuyla ilgili diğer noktalar ele alınmaktadır.

Kaydırılabilir içerik

Üst uygulama çubukları kaydırırken daraltılmalıdır. Material 3 TopAppBar'ı nasıl daraltacağınızı öğrenin.

Yapılması gerekenler

Uygulama çubuğu yapışkansa üst uygulama çubuğunu durum çubuğu yüksekliğine daraltın.

Yapılması gerekenler

Üst uygulama çubuğu yapışkan değilse eşleşen bir arka plan rengi gradyanı ekleyin.

Kullanıcı arayüzü aşağı kaydırıldığında durum çubuğu simgeleri dağınık görünmemesi için durum çubukları yarı saydam olmalıdır. Bunu yapmak için önce LazyColumn veya RecyclerView dokümanlarında yer alan adımları uygulayarak uçtan uca 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:

  • Uygun olduğunda kaydırırken Material 3 TopAppBar otomatik korumasından yararlanın.
  • %60 alfa değeriyle özel bir kompozisyon oluşturun veya Görünümler için GradientProtection'ı kullanın.
Şekil 3. Hareket eklemelerinin yeşil renkle vurgulandığı bir uygulama.

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

Yapmamanız gerekenler

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

Yapılması gerekenler

Her bölmenin arka planıyla eşleşen degrade koruması kullanın.

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, uygulama için değil, gezinme çekmecesi için durum çubuğu koruması gösterilmektedir.

Örneğin, hem Material 3 TopAppBar yerleşik korumasını hem de özel bir korumayı kullanarak durum çubuğu korumalarını yığmayın.

Temel gezinme çubuğu tasarımı ile ilgili yardım için Android Sistem Çubukları başlıklı makaleyi inceleyin. Aşağıdaki bölümde, gezinme çubuğuyla ilgili dikkat edilmesi gereken diğer noktalar açıklanmaktadır.

Kaydırılabilir içerik

Alt uygulama çubukları kaydırırken 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 şeffaf kalsın 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 bölümlerinin ekran kesme noktasının altına çizilmemesi için ekran kesme noktası iç içe yerleştirilmelerini işlemelidir.

Yapılması gerekenler

Ekrandaki kesiklerin içe yerleştirilmesini kullanarak kritik kullanıcı arayüzünü yerleştirin.

Yapmamanız gerekenler

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

Bununla birlikte, düz uygulama çubuğu arka planları aşağıdaki resimde gösterildiği gibi ekran kesme bölümüne çekilmelidir.

Şekil 5. Önemli kullanıcı arayüzü içe yerleştirilirken katı uygulama çubuğu arka planları ekran kesme yerine çekilir.

Yatay bantların ekrandaki boşluğa çekildiğinden emin olun.

Şekil 6. Bantın ekrandaki boşlukta kaydırıldığı, kenardan kenara yatay ekran.

Oluşturma ve Görünümler'de ekran kesimlerini nasıl destekleyeceğiniz hakkında bilgi edinin.

Diğer bilgiler

Genel olarak arka planlar ve bölme çizgileri de uçtan uca çizilmelidir. Metin ve düğmeler gibi içerikler ise sistem kullanıcı arayüzü ve donanım öğelerinin önüne geçmemek için içe yerleştirilmelidir.