أجهزة Android تتصل بسلاسة بالشاشات المتصلة

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

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

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

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

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

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

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

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

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

ما أهمية ذلك؟

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

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

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

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

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

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

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

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

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

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

• كبير: للعروض التي تتراوح بين 1200 بكسل مستقل الكثافة و1600 بكسل مستقل الكثافة
• كبير جدًا: للعروض التي تزيد عن 1600 بكسل مستقل الكثافة

فئات أحجام النوافذ المختلفة استنادًا إلى عرض الشاشة

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

لتضمين فئات حجم النافذة الجديدة في مشروعك، ما عليك سوى استدعاء الدالة من مجموعة 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, which just reached its first stable release, is a powerful navigation library designed to work with Compose.

Navigation 3 is also a great tool for building adaptive layouts by allowing multiple destinations to be displayed at the same time and allowing seamless switching between those layouts.

This system for managing your app's UI flow is based on Scenes. المشهد هو تنسيق يعرض وجهة واحدة أو أكثر في الوقت نفسه. تحدّد SceneStrategy ما إذا كان بإمكانها إنشاء مشهد. يتيح لك ربط نُسخ SceneStrategy معًا إنشاء مَشاهد مختلفة وعرضها لأحجام شاشات وإعدادات أجهزة مختلفة.

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

في هذا السيناريو، يمكنك تحديد 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 Adaptive في إنشاء واجهات مستخدم تكيُّفية، مثل تنسيقات قائمة التفاصيل واللوحة الداعمة التي تتكيّف مع إعدادات النوافذ تلقائيًا استنادًا إلى فئات حجم النافذة أو أوضاع الجهاز. 

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

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

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

الملاحظات

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

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

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