تمتد أجهزة Android بسلاسة إلى شاشات العرض المتصلة

أكبر تحديث في Jetpack WindowManager 1.5.0 هو إضافة فئتين جديدتين لحجم نافذة العرض: كبير وكبير جدًا.

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

فيما يلي نقاط توقف العرض الجديدة:

• كبير: للعروض التي تتراوح بين 1200dp و1600dp
• كبير جدًا: للعروض ≥1600dp

فئات حجم النافذة المختلفة بناءً على عرض العرض.

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

لتضمين فئات حجم النافذة الجديدة في مشروعك، ما عليك سوى استدعاء الوظيفة من ملف WindowSizeClass.BREAKPOINTS_V2 تعيين بدلا من WindowSizeClass.BREAKPOINTS_V1:

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

أنشئ تخطيطات قابلة للتكيف باستخدام Jetpack Navigation 3

يعد Navigation 3 أحدث إضافة إلى مجموعة Jetpack. إن Navigation 3، الذي وصل للتو إلى أول إصدار مستقر له، عبارة عن مكتبة تنقل قوية مصممة للعمل مع Compose.

يعد التنقل 3 أيضًا أداة رائعة لإنشاء تخطيطات قابلة للتكيف من خلال السماح بعرض وجهات متعددة في نفس الوقت والسماح بالتبديل السلس بين تلك التخطيطات.

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

بالنسبة للتخطيطات الأساسية الجاهزة، مثل تفاصيل القائمة وجزء الدعم، يمكنك استخدام Scenes من مكتبة Compose Material 3 Adaptive (المتوفرة في الإصدار 1.3 وما فوق).

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

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

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

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

يمكنك استخدام استراتيجية ThreePaneSceneStrategy الخاصة بك مع استراتيجيات أخرى عند إنشاء ملفك نافديسبلاي. على سبيل المثال، يمكننا أيضًا إضافة TwoPaneStrategy لعرض جزأين جنبًا إلى جنب عندما لا تكون هناك مساحة كافية لعرض ثلاثة أجزاء.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

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

باستخدام المشاهد والاستراتيجيات، يمكنك إضافة تخطيطات جزء واحد أو اثنين أو ثلاثة أجزاء إلى تطبيقك!

تطبيق قابل للتكيف يعرض التنقل ثلاثي الأجزاء على شاشات عريضة.

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)