توسيع شاشة أجهزة Android بسلاسة لتشمل شاشات العرض المتصلة

يسرّنا الإعلان عن إنجاز كبير في تقريب تجربة الحوسبة على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبية على 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، سنوسّع نطاق هذه الإرشادات ليشمل الشاشات التي تتجاوز حجم الأجهزة اللوحية العادية.

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

• كبير: للعروض بين 1200 وحدة بكسل مستقلة الكثافة و1600 وحدة بكسل مستقلة الكثافة
• كبير جدًا: للعروض ≥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.
}

إنشاء تنسيقات تكيُّفية باستخدام الإصدار 3 من Jetpack Navigation

Navigation 3 هي أحدث إضافة إلى مجموعة Jetpack. ‫Navigation 3، الذي تم إطلاق أول إصدار ثابت منه مؤخرًا، هو مكتبة تنقّل فعّالة مصمَّمة للعمل مع Compose.

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

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

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

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

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. 

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

تطبيق متكيّف يعرض شريط تنقّل بثلاثة أقسام على الشاشات العريضة

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

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

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

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

ما عليك سوى الموافقة على استخدام نقاط التوقّف الجديدة من خلال الإشارة في ملف تصميم Gradle إلى أنّك تريد استخدامها:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

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

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

الملاحظات

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

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

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