Pencere içe eklemelerini ayarlama

Etkinliğiniz tüm iç içe yerleştirmeleri işleme kontrolünü ele aldıktan sonra, içeriğin gizlenmediğini ve etkileşimli öğelerin sistem kullanıcı arayüzüyle çakışmadığını doğrulamak için Compose API'lerini kullanabilirsiniz. Bu API'ler, uygulamanızın düzenini iç boşluk değişiklikleriyle de senkronize eder.

Dolgu veya boyut değiştiricileri kullanarak içe yerleştirmeleri işleme

Örneğin, içe yerleştirmeleri uygulamanızın tüm içeriğine uygulamanın en temel yöntemi şudur:

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

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}

Bu snippet, uygulamanın tüm içeriğinin etrafına dolgu olarak safeDrawing pencere eklerini uygular. Bu sayede, etkileşimli öğelerin sistem kullanıcı arayüzüyle çakışmaması sağlanır ancak uygulamanın hiçbir bölümü, uçtan uca efekt elde etmek için sistem kullanıcı arayüzünün arkasında çizilmez. Pencerenin tamamından tam olarak yararlanmak için iç kısımların uygulandığı yerleri ekran ekran veya bileşen bileşen hassas bir şekilde ayarlamanız gerekir.

Bu iç metin türlerinin tümü, API 21'e geri taşınan IME animasyonlarıyla otomatik olarak animasyonlu hale getirilir. Dolayısıyla, bu iç boşlukları kullanan tüm düzenleriniz de iç boşluk değerleri değiştikçe otomatik olarak animasyonlu hale gelir.

Oluşturulabilir düzenlerinizi ayarlamak için içe yerleştirmeleri üç şekilde işleyebilirsiniz:

Dolgu değiştiriciler

Modifier.windowInsetsPadding(windowInsets: WindowInsets), verilen pencere iç kısımlarını dolgu olarak uygular ve Modifier.padding gibi davranır. Örneğin, Modifier.windowInsetsPadding(WindowInsets.safeDrawing), güvenli çizim iç kısımlarını 4 tarafta da dolgu olarak uygular.

En yaygın içe yerleştirme türleri için çeşitli yerleşik yardımcı yöntemler de vardır. Modifier.safeDrawingPadding(), Modifier.windowInsetsPadding(WindowInsets.safeDrawing) ile eşdeğer olan bu yöntemlerden biridir. Aşağıdaki tabloda, yerleşik dolgu değiştiriciler ve her birinin uyguladığı WindowInsets türü listelenmiştir:

Modifier.safeDrawingPadding()

WindowInsets.safeDrawing

Modifier.safeGesturesPadding()

WindowInsets.safeGestures

Modifier.safeContentPadding()

WindowInsets.safeContent

Modifier.statusBarsPadding()

WindowInsets.statusBars

Modifier.navigationBarsPadding()

WindowInsets.navigationBars

Modifier.captionBarPadding()

WindowInsets.captionBar

Modifier.systemBarsPadding()

WindowInsets.systemBars

Modifier.imePadding()

WindowInsets.ime

Modifier.systemGesturesPadding()

WindowInsets.systemGestures

Modifier.mandatorySystemGesturesPadding()

WindowInsets.mandatorySystemGestures

Modifier.displayCutoutPadding()

WindowInsets.displayCutout

Modifier.waterfallPadding()

WindowInsets.waterfall

Her bir iç metin türünün neleri kapsadığını öğrenmek için Pencere iç metinleri hakkında başlıklı makaleyi inceleyin.

İç içe yerleştirilmiş boyut değiştiriciler

Aşağıdaki değiştiriciler, bileşenin boyutunu iç kısımların boyutuna ayarlayarak bir miktar pencere iç kısmı uygular:

Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)

windowInsets'in başlangıç tarafını genişlik olarak uygular (Modifier.width gibi)

Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)

windowInsets'in bitiş tarafını genişlik olarak uygular (Modifier.width gibi)

Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)

windowInsets'in üst tarafını yükseklik olarak uygular (ör. Modifier.height)

Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)

windowInsets'in alt tarafını yükseklik olarak uygular (ör. Modifier.height)

Bu değiştiriciler, özellikle iç kısımların alanını kaplayan bir Spacer boyutlandırmak için kullanışlıdır:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}

Ek tüketim

İç dolgu değiştiriciler (windowInsetsPadding ve safeDrawingPadding gibi yardımcılar), dolgu olarak uygulanan iç kısımları otomatik olarak kullanır. Oluşturma ağacının daha derinlerine indikçe iç içe yerleştirilmiş iç dolgu değiştiriciler ve iç boyut değiştiriciler, iç kısımların bir kısmının dış iç dolgu değiştiriciler tarafından zaten kullanıldığını bilir ve iç kısımların aynı kısmını birden fazla kez kullanmaktan kaçınır. Bu da çok fazla ek alan oluşmasına neden olur.

İç metin boyutu değiştiriciler, iç metinler zaten kullanılmışsa iç metinlerin aynı bölümünün birden fazla kez kullanılmasını da önler. Ancak boyutlarını doğrudan değiştirdikleri için içe yerleştirme alanlarını kendileri kullanmazlar.

Sonuç olarak, iç içe yerleştirilmiş dolgu değiştiriciler, her bir composable'a uygulanan dolgu miktarını otomatik olarak değiştirir.

Önceki LazyColumn örneğine bakarsak LazyColumn, imePadding değiştiricisi tarafından yeniden boyutlandırılıyor. LazyColumn içinde, son öğe sistem çubuklarının alt kısmının yüksekliğinde olacak şekilde boyutlandırılır:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}

IME kapalıyken imePadding() dolgu uygulamaz. Bu nedenle, hiçbir iç boşluk kullanılmaz ve Spacer yüksekliği, alt sistem çubuklarıyla eşleşir.

IME açıldığında IME ekleri, IME'nin boyutuna uyacak şekilde animasyonlu olarak gösterilir ve imePadding() değiştirici, IME açıldığında LazyColumn öğesini yeniden boyutlandırmak için alt dolgu uygulamaya başlar. imePadding() değiştiricisi alt dolguyu uygulamaya başladığında bu miktarda iç boşluk kullanmaya da başlar. Bu nedenle, sistem çubukları için boşluğun bir kısmı imePadding() değiştirici tarafından uygulandığından Spacer yüksekliği azalmaya başlar. imePadding() değiştiricisi, sistem çubuklarından daha büyük bir alt dolgu miktarı uyguladığında Spacer yüksekliği sıfır olur.

IME kapandığında değişiklikler tersine gerçekleşir: imePadding(), alt sistem çubuklarından daha az uygulandığından Spacer sıfır yükseklikten genişler. Son olarak, IME tamamen animasyonla kaybolduğunda Spacer yüksekliği sistem çubuklarıyla eşleşir.

Şekil 2. TextField ile uçtan uca geçişli sütun.

Bu davranış, tüm windowInsetsPadding değiştiriciler arasındaki iletişimle sağlanır ve başka birkaç yöntemle de etkilenebilir.

Modifier.consumeWindowInsets(insets: WindowInsets), içe yerleştirmeleri Modifier.windowInsetsPadding ile aynı şekilde kullanır ancak kullanılan içe yerleştirmeleri dolgu olarak uygulamaz. Bu, kardeşlere belirli bir miktar iç boşluğun zaten kullanıldığını belirtmek için iç boşluk boyutu değiştiricilerle birlikte kullanıldığında faydalıdır:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}

Modifier.consumeWindowInsets(paddingValues: PaddingValues), WindowInsets bağımsız değişkenine sahip sürüme çok benzer şekilde davranır ancak tüketmek için rastgele bir PaddingValues alır. Bu, dolgu veya boşluk, iç dolgu değiştiriciler dışında bir mekanizma (ör. sıradan bir Modifier.padding veya sabit yükseklikteki boşluklar) tarafından sağlandığında alt öğeleri bilgilendirmek için kullanışlıdır:

Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}

Ham pencere iç boşluklarının kullanılmadan gerekli olduğu durumlarda doğrudan WindowInsets değerlerini kullanın veya WindowInsets.asPaddingValues() kullanarak kullanımdan etkilenmeyen iç boşlukların PaddingValues değerini döndürün. Ancak aşağıdaki uyarılar nedeniyle, mümkün olduğunda pencere iç boşlukları dolgu değiştiricilerini ve pencere iç boşlukları boyut değiştiricilerini kullanmayı tercih edin.

İç boşluklar ve Jetpack Compose aşamaları

Compose, iç kısımları yöneten temel platform API'lerini kullanan iç kısımları güncellemek ve animasyon eklemek için temel AndroidX temel API'lerini kullanır. Bu platform davranışı nedeniyle iç kısımların Jetpack Compose aşamaları ile özel bir ilişkisi vardır.

İç boşlukların değeri, oluşturma aşamasından sonra ancak düzen aşamasından önce güncellenir. Bu, oluşturma sırasında iç boşlukların değerini okumanın genellikle bir kare geç olan iç boşluk değerini kullandığı anlamına gelir. Bu sayfada açıklanan yerleşik değiştiriciler, içe yerleştirme değerlerinin kullanımını düzen aşamasına kadar geciktirecek şekilde tasarlanmıştır. Bu sayede, içe yerleştirme değerleri güncellendikleri karede kullanılır.

Önceki
Pencere iç içe eklemeleri hakkında
Sonraki
Klavye IME animasyonları kullanma