إعداد مساحات النافذة

بعد أن يتولّى نشاطك معالجة جميع العناصر الداخلية، يمكنك استخدام واجهات برمجة تطبيقات Compose للتأكّد من أنّ المحتوى غير محجوب وأنّ العناصر القابلة للتفاعل لا تتداخل مع واجهة مستخدم النظام. وتعمل واجهات برمجة التطبيقات هذه أيضًا على مزامنة تنسيق تطبيقك مع تغييرات الإدراج.

التعامل مع العناصر المضمّنة باستخدام عناصر تعديل الحشو أو الحجم

على سبيل المثال، هذه هي الطريقة الأساسية لتطبيق الأجزاء المقتطعة على محتوى تطبيقك بالكامل:

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

    enableEdgeToEdge()

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

يطبّق هذا المقتطف المساحات الداخلية للنافذة safeDrawing كحشو حول محتوى التطبيق بالكامل. يضمن ذلك عدم تداخل العناصر التفاعلية مع واجهة مستخدم النظام، ولكنه يعني أيضًا أنّه لن يتم رسم أي جزء من التطبيق خلف واجهة مستخدم النظام لتحقيق تأثير العرض على كامل الشاشة. للاستفادة من النافذة بأكملها، عليك ضبط مكان تطبيق الأجزاء المقتطعة بدقة على أساس كل شاشة أو كل مكوّن.

يتم تحريك جميع أنواع الإطارات هذه تلقائيًا باستخدام حركات IME التي تم نقلها إلى واجهة برمجة التطبيقات 21. وبالتالي، فإنّ جميع التنسيقات التي تستخدم هذه الإطارات تتحرك أيضًا تلقائيًا مع تغيُّر قيم الإطارات.

هناك ثلاث طرق للتعامل مع المساحات المتروكة لضبط تنسيقات الدوال المركّبة:

معدِّلات المساحة المتروكة

تطبّق الدالة Modifier.windowInsetsPadding(windowInsets: WindowInsets) مجموعة النوافذ المحدّدة كحشو، تمامًا مثل الدالة Modifier.padding. على سبيل المثال، يطبّق Modifier.windowInsetsPadding(WindowInsets.safeDrawing) المنطقة الآمنة للرسم كمسافة بادئة على الجوانب الأربعة.

تتوفّر أيضًا عدة طرق خدمات مدمجة لأنواع الإطارات الأكثر شيوعًا. Modifier.safeDrawingPadding() هي إحدى هذه الطرق، وهي تعادل Modifier.windowInsetsPadding(WindowInsets.safeDrawing). يسرد الجدول التالي معدِّلات المساحة المتروكة المضمّنة ونوع WindowInsets الذي يطبّقه كلّ منها:

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

لمعرفة ما يغطّيه كل نوع من أنواع الإطارات، يُرجى الاطّلاع على لمحة عن إطارات النوافذ.

معدِّلات حجم الإدراج

تطبّق المُعدِّلات التالية مقدارًا من هوامش النافذة من خلال ضبط حجم المكوّن ليكون بحجم الهوامش:

Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)

يتم تطبيق جانب البداية من windowInsets كعرض (مثل Modifier.width)

Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)

يتم تطبيق الجانب النهائي من windowInsets كالعرض (مثل Modifier.width)

Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)

يتم تطبيق الجانب العلوي من windowInsets كارتفاع (مثل Modifier.height)

Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)

يتم تطبيق الجانب السفلي من windowInsets كارتفاع (مثل Modifier.height)

تكون هذه المُعدِّلات مفيدة بشكل خاص لتحديد حجم Spacer يشغل مساحة الهوامش:

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

استهلاك المساحة الداخلية

تستهلك معدِّلات المساحة المتروكة الداخلية (windowInsetsPadding والمساعدات مثل safeDrawingPadding) تلقائيًا جزءًا من المساحات الداخلية التي يتم تطبيقها كمساحة متروكة. عند التعمّق في شجرة التركيب، تدرك معدِّلات المساحة المتروكة المضمّنة ومعدِّلات حجم المساحة المتروكة أنّ جزءًا من المساحة المتروكة قد تم استخدامه بالفعل بواسطة معدِّلات المساحة المتروكة الخارجية، وتتجنّب استخدام الجزء نفسه من المساحة المتروكة أكثر من مرة، ما قد يؤدي إلى توفير مساحة إضافية كبيرة.

تتجنّب معدِّلات حجم الأجزاء الداخلية أيضًا استخدام الجزء نفسه من الأجزاء الداخلية أكثر من مرة إذا سبق استخدام الأجزاء الداخلية. ومع ذلك، بما أنّها تغيّر حجمها مباشرةً، فهي لا تستهلك المساحات المتروكة بنفسها.

نتيجةً لذلك، يؤدي تداخل معدِّلات المساحة المتروكة إلى تغيير مقدار المساحة المتروكة المطبَّقة على كل دالة مركّبة تلقائيًا.

بالنظر إلى مثال LazyColumn نفسه كما في السابق، يتم تغيير حجم LazyColumn بواسطة المُعدِّل imePadding. داخل LazyColumn، يتم تحديد حجم العنصر الأخير ليكون ارتفاع الجزء السفلي من أشرطة النظام:

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

عند إغلاق محرِّر أسلوب الإدخال، لا يطبِّق imePadding() أي مساحة متروكة. نتيجةً لذلك، لا يتم استخدام أيّ هوامش، ويتطابق ارتفاع Spacer مع أشرطة النظام السفلية.

عند فتح أداة IME، تتحرّك العناصر الداخلية للأداة لتتطابق مع حجمها، ويبدأ المُعدِّل imePadding() في تطبيق مساحة متروكة سفلية لتغيير حجم LazyColumn عند فتح أداة IME. عندما يبدأ المُعدِّل imePadding() في تطبيق الحشو السفلي، يبدأ أيضًا في استهلاك هذا المقدار من المساحات المتروكة. لذلك، يبدأ ارتفاع Spacer في الانخفاض، لأنّ جزءًا من المسافة المخصّصة لأشرطة النظام قد تم تطبيقه من خلال المُعدِّل imePadding(). عندما يطبّق المُعدِّل imePadding() مقدارًا من المساحة المتروكة السفلية أكبر من أشرطة النظام، يكون ارتفاع Spacer صفرًا.

عند إغلاق أداة IME، تحدث التغييرات بشكل عكسي: يتوسّع Spacer من الارتفاع صفر لأنّ imePadding() يطبّق أقل من أشرطة النظام السفلية. أخيرًا، يتطابق ارتفاع Spacer مع أشرطة النظام بعد اكتمال حركة محرِّر أسلوب الإدخال (IME).

الشكل 2. عمود LazyColumn يملأ الشاشة مع TextField.

يتم تحقيق هذا السلوك من خلال التواصل بين جميع معدِّلات windowInsetsPadding، ويمكن التأثير فيه بطريقتين أخريين.

يستهلك Modifier.consumeWindowInsets(insets: WindowInsets) أيضًا العناصر الداخلية بالطريقة نفسها التي يستهلكها Modifier.windowInsetsPadding، ولكنّه لا يطبّق العناصر الداخلية المستهلكة كحشو. ويكون ذلك مفيدًا عند استخدامه مع مفاتيح تعديل حجم المساحة المتروكة، للإشارة إلى العناصر المجاورة بأنّه تم استخدام قدر معيّن من المساحات المتروكة:

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، ولكنّها تستخدم PaddingValues عشوائيًا. ويُعدّ ذلك مفيدًا لإعلام العناصر الفرعية عندما يتم توفير المساحة المتروكة أو التباعد من خلال آلية أخرى غير معدِّلات المساحة المتروكة الداخلية، مثل Modifier.padding العادي أو الفواصل ذات الارتفاع الثابت:

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

في الحالات التي تكون فيها هوامش النافذة الأولية مطلوبة بدون استهلاك، استخدِم قيم WindowInsets مباشرةً، أو استخدِم WindowInsets.asPaddingValues() لعرض PaddingValues من الهوامش التي لا تتأثر بالاستهلاك. ومع ذلك، بسبب التحذيرات التالية، يُفضّل استخدام معدِّلات المساحة المتروكة لمجموعات النوافذ ومعدِّلات حجم مجموعات النوافذ حيثما أمكن ذلك.

مراحل Insets وJetpack Compose

تستخدم أداة Compose واجهات برمجة التطبيقات الأساسية في AndroidX لتعديل الإطارات وتحريكها، والتي تستخدم واجهات برمجة التطبيقات الأساسية للنظام الأساسي التي تدير الإطارات. بسبب سلوك النظام الأساسي هذا، ترتبط الأجزاء المقتطعة بعلاقة خاصة مع مراحل Jetpack Compose.

يتم تعديل قيمة الأجزاء المقتطعة بعد مرحلة التركيب، ولكن قبل مرحلة التنسيق. وهذا يعني أنّ قراءة قيمة الأجزاء الداخلية في التركيب تستخدم بشكل عام قيمة الأجزاء الداخلية التي تتأخر بمقدار لقطة واحدة. تم تصميم المعدِّلات المضمّنة الموضّحة في هذه الصفحة لتأخير استخدام قيم الهوامش حتى مرحلة التنسيق، ما يضمن استخدام قيم الهوامش في الإطار نفسه الذي يتم تعديلها فيه.

السابق
لمحة عن الأجزاء المُدمَجة في النوافذ
التالي
استخدام الصور المتحركة لطريقة إدخال نص على لوحة المفاتيح