Oluşturma sırasında kesmeler

Ekran kesimi, bazı cihazlarda ekrana kadar uzanan bir alandır teşekkür ederiz. Uçtan uca deneyime olanak tanırken aynı zamanda cihazın ön tarafında bulunan önemli sensörlere dokunun.

Dikey modda kesme örneği
Şekil 1. Dikey modda kesme örneği
'nı inceleyin.
Yatay modda kesme örneği
Şekil 2. Yatay modda kesme örneği
'nı inceleyin.

Android, Android 9 (API düzeyi 28) yüklü cihazlarda ekran kesimlerini ve daha yüksek. Ancak cihaz üreticileri, Android 8.1 veya önceki sürümleri çalıştıran cihazlar.

Bu sayfada, aşağıda kesmelere sahip cihazlar için desteğin nasıl uygulanacağı açıklanmaktadır: Kesme alanıyla (uçtan uca) nasıl çalışılacağı da dahil olmak üzere kompozisyon oluşturun kesmeyi içeren ekran yüzeyinde 3-3 kare olacak şekilde.

Varsayılan büyük/küçük harf

Ekran kesimleri, varsayılan olarak pencere içlerine eklenir. Bu nedenle, takip ettiğinizde uygulamanız ekran kesimi alanlarını çizmez kılavuzumuza gidin.

Örneğin, Modifier.windowInsetsPadding(WindowInsets.safeContent) veya Modifier.windowInsetsPadding(WindowInsets.safeDrawing), uygulamanız kesmenin yerleştirildiği alanlarda otomatik olarak çizim yapılmaz. WindowInsets.safeContent ve WindowInsets.safeDrawing Her ikisi de ekran kesimi bilgilerini içerir ve cihazın kesildiği yere çizim yapmaz. düşünülebilir.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}

Bu davranışı daha da özelleştirmek için kesim bilgilerini işlemeniz gerekir. kendiniz.

Kesme bilgilerini manuel olarak işleme

Kesme işlemlerini aşağıdaki yöntemlerden biriyle yapabilirsiniz:

Compose için windowLayoutInDisplayCutoutMode öğesinin default ve ardından WindowInsets.displayCutout avantajlarından yararlanın inset'leri işlemek için aşağıdaki adımları uygulayın:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

Bu yaklaşım, gerektiğinde displayCutout dolgusunu dikkate almanıza olanak tanır. veya gerekmediğinde göz ardı edebilirsiniz.

Alternatif olarak, Görünümler Kesimi ile aynı ayarları uygulayabilirsiniz. belgelerinde veya android:windowLayoutInDisplayCutoutMode etkinlik temasını seçeneğini kullanabilir veya window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Ancak kesme modu uygulanır. ve bağımsız composable bazında kontrol edilemez.

Belirli composable'larda ekran kesimine saygı göstermek (diğerlerinde değil) için WindowInset.displayCutout Bu API, kesmeye erişmenizi sağlar. isteyebilirsiniz.

En iyi uygulamalar

Ekran kesimleriyle çalışırken aşağıdakileri göz önünde bulundurun:

  • Kullanıcı arayüzündeki önemli öğelerin yerleşimine dikkat edin. URL'nin kesme alanı önemli metinlerin, kontrollerin veya diğer bilgilerin görünmesini engeller.
  • Hassas dokunuş gerektiren etkileşimli öğeleri yerleştirmeyin veya genişletmeyin. kesme alanına da dâhildir. Dokunma hassasiyeti kesme alanından yararlanın.
  • Uçtan uca kılavuzu uygularken kesme bilgileri safeDrawing / safeContent ekleri
  • Mümkünse Modifier.windowInsetsPadding(WindowInsets.safeDrawing) kullan uygun dolguyu belirlemenizi öneririz. Kullanılmasın durum çubuğu yüksekliğini sabit kodlayın, çünkü bu, çakışmaya veya kesilmelere yol açabilir içerik.

Kesitlerle içeriğinizin nasıl oluşturulduğunu test edin

Uygulamanızın tüm ekranlarını ve deneyimlerini test ettiğinizden emin olun. Şu cihazlarda test edin: farklı kesme türlerini kullanın. herhangi bir cihaz veya emülatörde genel kesim yapılandırmalarını simüle edebilirsiniz. Android 9 veya sonraki bir sürümü çalıştıran aşağıdaki adımları uygulayın:

  1. Geliştirici seçeneklerini etkinleştirin.
  2. Geliştirici seçenekleri ekranında Çizim bölümüne gidin Kesim içeren bir ekranı simüle et'i seçin.
  3. Kesme türünü seçin.
    emülatörde ekran kesimi simülasyonu
    Şekil 3. İçeriğinizin nasıl oluşturulduğunu test etmek için Geliştirici seçeneklerini kullanın.
ziyaret edin. ziyaret edin.