توسيع شاشة أجهزة 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. 

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

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

راجِع المستندات لمعرفة المزيد حول كيفية إنشاء تنسيقات مخصّصة باستخدام "المشاهد" في Navigation 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.