يسرّنا الإعلان عن إنجاز كبير في تقريب الحوسبة على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبية على Android، فقد أصبحت ميزة دعم الشاشات المتصلة متاحة للجميع مع إصدار Android 16 QPR3!

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

تعاونت Google وSamsung لتقديم تجربة سلسة وقوية للعرض في نافذة على سطح المكتب على الأجهزة التي تعمل بنظام Android 16 في المنظومة المتكاملة لنظام Android عند توصيلها بشاشة خارجية.
أصبحت هذه الميزة متاحة الآن للجميع على الأجهزة المتوافقة* للمستخدمين الذين يمكنهم توصيل هواتف Pixel وSamsung المتوافقة بشاشات خارجية، ما يتيح فرصًا جديدة لإنشاء تجارب تطبيقات أكثر جاذبية وإنتاجية تتكيّف مع مختلف أشكال الأجهزة.

كيف تعمل هذه الميزة؟

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

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

هاتف متصل بشاشة خارجية مع جلسة سطح مكتب على الشاشة بينما يحافظ الهاتف على حالته الخاصة

عند توصيل جهاز يدعم العرض في نافذة (مثل جهاز لوحي مثل Samsung Galaxy Tab S11) بشاشة خارجية، يتم توسيع جلسة سطح المكتب على كلتا الشاشتين، ما يتيح مساحة عمل أكبر. تعمل الشاشتان بعد ذلك كنظام واحد مستمر، ما يسمح بنقل نوافذ التطبيقات والمحتوى والمؤشر بحرية بين الشاشتين.

جهاز لوحي متصل بشاشة خارجية، ما يؤدي إلى توسيع جلسة سطح المكتب على كلتا الشاشتين

ما أهمية ذلك؟

في إصدار Android 16 QPR3، وضعنا اللمسات الأخيرة على سلوكيات عرض النوافذ وتفاعلات شريط المهام وتوافق أساليب الإدخال (الماوس ولوحة المفاتيح) التي تحدّد تجربة الشاشة المتصلة. أدرجنا أيضًا إجراءات التوافق لتغيير حجم النوافذ وتجنُّب إعادة تشغيل التطبيقات عند التبديل بين الشاشات.

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

على وجه الخصوص، انتبه إلى أفضل الممارسات الرئيسية التالية للحصول على أفضل تجارب التطبيقات على الشاشات المتصلة:

• لا تفترض وجود عنصر Display ثابت: يمكن أن يتغيّر عنصر Display المرتبط بسياق تطبيقك عند نقل نافذة التطبيق إلى شاشة خارجية أو إذا تغيّر إعداد الشاشة. يجب أن يتعامل تطبيقك بسلاسة مع أحداث تغيير الإعدادات وأن يستعلم عن مقاييس الشاشة بشكلٍ ديناميكي بدلاً من تخزينها مؤقتًا.
• ضع في الاعتبار تغييرات إعداد الكثافة: يمكن أن يكون للشاشات الخارجية كثافات بكسل مختلفة تمامًا عن شاشة الجهاز الأساسية. تأكَّد من أنّ تنسيقاتك ومواردك تتكيّف بشكلٍ صحيح مع هذه التغييرات للحفاظ على وضوح واجهة المستخدم وسهولة استخدامها. استخدِم وحدات البكسل غير المرتبطة بالكثافة (dp) للتنسيقات، وقدِّم موارد خاصة بالكثافة، وتأكَّد من أنّ واجهة المستخدم تتغيّر حجمها بشكلٍ مناسب.
• يمكنك دعم الأجهزة الطرفية الخارجية بشكلٍ صحيح: عندما يتصل المستخدمون بشاشة خارجية، غالبًا ما ينشئون بيئة تشبه سطح المكتب أكثر. يتضمّن ذلك غالبًا استخدام لوحات مفاتيح خارجية وأجهزة ماوس ولوحات تتبّع وكاميرات ويب وميكروفونات ومكبّرات صوت. حسِّن دعم تفاعلات لوحة المفاتيح و الماوس.

الاستعداد لمستقبل سطح المكتب باستخدام أدوات حديثة

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

فئات جديدة لأحجام النوافذ: كبيرة وكبيرة جدًا

أهم تعديل في 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.

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

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

بالنسبة إلى التنسيقات الأساسية الجاهزة، مثل عرض على شكل قائمة مع تفاصيل واللوحة الداعمة، يمكنك استخدام المشاهد من مكتبة Compose Material 3 التكيّفية (المتاحة في الإصدار 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()
            }
        }
    }

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

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 مع استراتيجيات أخرى عند إنشاء NavDisplay. على سبيل المثال، يمكننا أيضًا إضافة TwoPaneStrategy لعرض لوحتَين جنبًا إلى جنب عندما لا تكون هناك مساحة كافية لعرض ثلاث لوحات.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

إذا لم تكن هناك مساحة كافية لعرض ثلاث لوحات أو لوحتَين، ستعرض كلتا استراتيجيتَي المشهد المخصّصتَين null.في هذه الحالة، يعود NavDisplay إلى عرض آخر إدخال في الأنشطة السابقة في لوحة واحدة باستخدام SinglePaneScene.

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

تطبيق تكيّفي يعرض تنقلاً ثلاثي اللوحات على الشاشات الكبيرة

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

تنسيقات تكيّفية مستقلة

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

الخبر السار هو أنّ المكتبة محدّثة بالفعل بأحدث نقاط التوقف. بدءًا من الإصدار 1.2، تتوافق وظائف توجيهات السقالة التلقائية للوحة مع فئات أحجام النوافذ الكبيرة والكبيرة جدًا.

ما عليك سوى الموافقة من خلال الإعلان في ملف تصميم Gradle عن رغبتك في استخدام نقاط التوقف الجديدة:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

الخطوات الأولى

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

تعمّق في المستندات المعدَّلة حول دعم الشاشات المتعددة و إدارة النوافذ لمعرفة المزيد عن تنفيذ أفضل الممارسات هذه.

الملاحظات

ملاحظاتك ضرورية بينما نواصل تحسين تجربة سطح المكتب على الشاشة المتصلة. شارِكنا أفكارك وأبلِغ عن أي مشاكل من خلال قنوات الملاحظات الرسمية.

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

*ملاحظة: في وقت كتابة المقالة، تتوفّر ميزة الشاشات المتصلة على هواتف Pixel 8 و9 و10 وسلسلة هواتف Samsung، بما في ذلك S26 وFold7 وFlip7 وTab S11.