WindowInsetsRulers hakkında

WindowInsets, ekranın sistem kullanıcı arayüzü tarafından kısmen veya tamamen gizlenen alanlarını işlemek için Jetpack Compose'daki standart API'dir. Bu alanlar arasında durum çubuğu, gezinme çubuğu ve dokunmatik klavye yer alır. Alternatif olarak, içeriğinizi sistem çubukları ve ekran kesmesiyle hizalamak için Modifier.fitInside veya Modifier.fitOutside'e SafeDrawing gibi önceden tanımlanmış WindowInsetsRulers iletebilir ya da özel WindowInsetsRulers oluşturabilirsiniz.

WindowInsetsRulers avantajları

• Tüketim karmaşıklığını önler: Düzenin yerleştirme aşamasında çalışır. Bu, içe yerleştirme tüketim zincirini tamamen atladığı ve üst yerleşimlerin ne yaptığına bakılmaksızın sistem çubuklarının ve ekran kesintilerinin doğru ve mutlak konumlarını her zaman sağlayabileceği anlamına gelir. Modifier.fitInside veya Modifier.fitOutside yöntemlerini kullanmak, üst öğe composable'lar iç kısımları yanlış kullandığında sorunları düzeltmeye yardımcı olur.
• Sistem çubuklarından kolayca kaçınma: Uygulama içeriğinizin sistem çubuklarından ve ekran kesiminden kaçınmasına yardımcı olur ve doğrudan WindowInsets kullanmaktan daha kolay olabilir.
• Yüksek düzeyde özelleştirilebilir: Geliştiriciler, içerikleri özel cetvellere göre hizalayabilir ve özel düzenlerle düzenleri üzerinde hassas kontrol sahibi olabilir.

WindowInsetsRulers uygulamasının dezavantajları

• Ölçüm için kullanılamaz: Yerleştirme aşamasında çalıştığı için sağladığı konum bilgileri, önceki ölçüm aşamasında kullanılamaz.

İçeriğinizi değiştirici yöntemleriyle hizalama

Modifier.fitInside, uygulamaların içeriği sistem çubukları ve ekran kesintileriyle hizalamasına olanak tanır. WindowInsets yerine kullanılabilir. Modifier.fitOutside genellikle Modifier.fitInside değerinin tersidir.

Örneğin, uygulama içeriğinin sistem çubuklarından ve ekran kesintisinden kaçındığını doğrulamak için fitInside(WindowInsetsRulers.safeDrawing.current) kullanabilirsiniz.

@Composable
fun FitInsideDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            // Or DisplayCutout, Ime, NavigationBars, StatusBar, etc...
            .fitInside(WindowInsetsRulers.SafeDrawing.current)
    )
}
InsetsSnippets.kt

Aşağıdaki tabloda, uygulama içeriğinizin Modifier.fitInside veya Modifier.fitOutside ile önceden tanımlanmış cetvellerle nasıl görüneceği gösterilmektedir.

Önceden tanımlanmış cetvel türü	Modifier.fitInside	Modifier.fitOutside
DisplayCutout
Ime		Yok
NavigationBars
SafeDrawing		Geçerli değil (bunun yerine StatusBar, CaptionBar, NavigationBar kullanın)
StatusBar

Modifier.fitInside ve Modifier.fitOutside kullanmak için composable'ların kısıtlanması gerekir. Yani Modifier.size veya Modifier.fillMaxSize gibi değiştiriciler tanımlamanız gerekir.

SafeDrawing ve SystemBars üzerindeki Modifier.fitOutside gibi bazı cetveller birden fazla cetvel döndürür. Bu durumda Android, oluşturulabilir öğeyi soldan, üstten, sağdan ve alttan bir cetvel kullanarak yerleştirir.

Modifier.fitInside ile IME'den kaçınma

Modifier.fitInside ile IME'ye sahip alt öğeleri işlemek için NavigationBar ve Ime'nin en içteki değerini alan bir RectRuler iletin.

@Composable
fun FitInsideWithImeDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.NavigationBars.current,
                    WindowInsetsRulers.Ime.current
                )
            )
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier.align(Alignment.BottomStart).fillMaxWidth()
        )
    }
}
InsetsSnippets.kt

Modifier.fitInside ile durum çubuğundan ve başlık çubuğundan kaçınma

Benzer şekilde, üstteki öğelerin durum çubuğundan ve başlık çubuğundan kaçındığını doğrulamak için Modifier.fitInside ile birlikte StatusBars ve CaptionBar'nin en içteki değerini alan bir RectRuler iletin.

@Composable
fun FitInsideWithStatusAndCaptionBarDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.StatusBars.current,
                    WindowInsetsRulers.CaptionBar.current
                )
            )
    )
}
InsetsSnippets.kt

Özel WindowInsetsRulers oluşturun

İçeriği özel cetvellerle hizalayabilirsiniz. Örneğin, bir üst composable'ın ekleri yanlış şekilde işlemesi nedeniyle alt bileşende dolgu sorunları yaşandığı bir kullanım alanını ele alalım. Bu sorun, Modifier.fitInside kullanarak çözülebilir. Ancak aşağıdaki örnekte ve videoda gösterildiği gibi, üst akıştaki sorunu düzeltmek zorunda kalmadan alt composable'ı tam olarak hizalamak için özel bir cetvel de oluşturabilirsiniz:

@Composable
fun WindowInsetsRulersDemo(modifier: Modifier) {
    Box(
        contentAlignment = BottomCenter,
        modifier = modifier
            .fillMaxSize()
            // The mistake that causes issues downstream, as .padding doesn't consume insets.
            // While it's correct to instead use .windowInsetsPadding(WindowInsets.navigationBars),
            // assume it's difficult to identify this issue to see how WindowInsetsRulers can help.
            .padding(WindowInsets.navigationBars.asPaddingValues())
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier
                // Use alignToSafeDrawing() instead of .imePadding() to precisely place this child
                // Composable without having to fix the parent upstream.
                .alignToSafeDrawing()

            // .imePadding()
            // .fillMaxWidth()
        )
    }
}

fun Modifier.alignToSafeDrawing(): Modifier {
    return layout { measurable, constraints ->
        if (constraints.hasBoundedWidth && constraints.hasBoundedHeight) {
            val placeable = measurable.measure(constraints)
            val width = placeable.width
            val height = placeable.height
            layout(width, height) {
                val bottom = WindowInsetsRulers.SafeDrawing.current.bottom
                    .current(0f).roundToInt() - height
                val right = WindowInsetsRulers.SafeDrawing.current.right
                    .current(0f).roundToInt()
                val left = WindowInsetsRulers.SafeDrawing.current.left
                    .current(0f).roundToInt()
                measurable.measure(Constraints.fixed(right - left, height))
                    .place(left, bottom)
            }
        } else {
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        }
    }
}
InsetsSnippets.kt

Aşağıdaki videoda, soldaki resimde üst öğeden kaynaklanan sorunlu IME iç metin tüketimi ve sağdaki sorunu düzeltmek için özel cetvellerin kullanılması gösterilmektedir. Gezinme çubuğu dolgusu üst öğe tarafından kullanılmadığı için TextField bileşeninin altında ekstra dolgu gösterilir. Önceki kod örneğinde görüldüğü gibi, özel bir cetvel kullanılarak çocuk, sağdaki resimde doğru konuma yerleştirilir.

Üst öğelerin kısıtlandığını doğrulama

WindowInsetsRulers öğesini güvenli bir şekilde kullanmak için üst öğenin geçerli kısıtlamalar sağladığından emin olun. Üst öğelerin belirli bir boyutu olmalıdır ve WindowInsetsRulers kullanan bir alt öğenin boyutuna bağlı olamaz. Üst düzey birleştirilebilir öğelerde fillMaxSize veya diğer boyut değiştiricileri kullanın.

Benzer şekilde, WindowInsetsRulers kullanan bir composable'ı verticalScroll gibi kaydırılabilir bir kapsayıcıya yerleştirmek, kaydırılabilir kapsayıcı cetvelin mantığıyla uyumlu olmayan sınırsız yükseklik kısıtlamaları sağladığından beklenmedik davranışlara neden olabilir.