أخبار المنتجات

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

قراءة لمدة 7 دقائق
عرض الملف الشخصي لـ "فرانشيسكو رومانو"
Francesco Romano مهندس علاقات المطوّرين، Android

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

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

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

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

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

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

materialDisplay.gif

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

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

materialDisplay2.gif

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

ما أهمية ذلك؟

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


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

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

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

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

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

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

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

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

في ما يلي النقاط الفاصلة الجديدة للعرض:

  • كبيرة: للعروض بين 1200dp و1600dp
  • كبيرة جدًا: للعروض ≥1600dp
windowClasses.png

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

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

لتضمين فئات أحجام النوافذ الجديدة في مشروعك، ما عليك سوى استدعاء الدالة من مجموعة 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.

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

adaptivepane.gif

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

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

Written by:
Continue reading