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