ما مفتخریم که از یک نقطه عطف مهم در نزدیک‌تر کردن محاسبات موبایل و دسکتاپ در اندروید خبر دهیم: پشتیبانی از نمایشگرهای متصل با انتشار اندروید ۱۶ QPR3 به طور عمومی در دسترس قرار گرفته است!

همانطور که در کنفرانس Google I/O 2025 نشان داده شد، نمایشگرهای متصل به کاربران این امکان را می‌دهند که دستگاه‌های اندرویدی خود را به یک مانیتور خارجی متصل کرده و فوراً به یک محیط پنجره‌بندی دسکتاپ دسترسی پیدا کنند. برنامه‌ها را می‌توان در پنجره‌های آزاد یا در حالت حداکثر استفاده کرد و کاربران می‌توانند درست مانند یک سیستم عامل دسکتاپ، چندوظیفگی را انجام دهند.

گوگل و سامسونگ با همکاری یکدیگر، یک تجربه یکپارچه و قدرتمند از کار با پنجره‌های دسکتاپ را برای دستگاه‌های سراسر اکوسیستم اندروید که از اندروید ۱۶ استفاده می‌کنند، در حالی که به یک نمایشگر خارجی متصل هستند، فراهم کرده‌اند.
این قابلیت اکنون به‌طور کلی در دستگاه‌های پشتیبانی‌شده* برای کاربرانی که می‌توانند تلفن‌های پیکسل و سامسونگ پشتیبانی‌شده خود را به مانیتورهای خارجی متصل کنند، در دسترس است و فرصت‌های جدیدی را برای ساخت تجربیات برنامه‌ای جذاب‌تر و پربارتر که با فرم‌فاکتورهای مختلف سازگار هستند، فراهم می‌کند.

چگونه کار می‌کند؟

وقتی یک تلفن یا تبلت تاشوی اندروید پشتیبانی‌شده به یک نمایشگر خارجی متصل می‌شود، یک جلسه دسکتاپ جدید روی نمایشگر متصل شروع می‌شود.

تجربه کار روی نمایشگر متصل مشابه تجربه کار روی دسکتاپ است، از جمله یک نوار وظیفه که برنامه‌های فعال را نشان می‌دهد و به کاربران امکان می‌دهد برنامه‌ها را برای دسترسی سریع پین کنند. کاربران می‌توانند چندین برنامه را همزمان در کنار هم در پنجره‌های قابل تغییر اندازه آزادانه روی نمایشگر متصل اجرا کنند.

تلفن به یک نمایشگر خارجی متصل است و یک صفحه دسکتاپ روی صفحه نمایش دارد در حالی که تلفن وضعیت خود را حفظ می‌کند.

وقتی دستگاهی که از پنجره‌بندی دسکتاپ پشتیبانی می‌کند (مانند تبلتی مانند Samsung Galaxy Tab S11) به یک نمایشگر خارجی متصل می‌شود، جلسه دسکتاپ در هر دو نمایشگر گسترش می‌یابد و فضای کاری حتی گسترده‌تری را باز می‌کند. سپس دو نمایشگر به عنوان یک سیستم پیوسته عمل می‌کنند و به پنجره‌های برنامه‌ها، محتوا و مکان‌نما اجازه می‌دهند آزادانه بین نمایشگرها حرکت کنند.

تبلت به یک نمایشگر خارجی متصل شده و صفحه دسکتاپ را در هر دو نمایشگر گسترش می‌دهد.

چرا اهمیت دارد؟

در نسخه اندروید ۱۶ QPR3، ما رفتارهای پنجره‌بندی، تعاملات نوار وظیفه و سازگاری ورودی (ماوس و صفحه‌کلید) را که تجربه نمایشگر متصل را تعریف می‌کنند، نهایی کردیم. همچنین روش‌های سازگاری را برای مقیاس‌بندی پنجره‌ها و جلوگیری از راه‌اندازی مجدد برنامه هنگام تغییر نمایشگرها در نظر گرفتیم.

اگر برنامه شما با اصول طراحی تطبیقی ​​ساخته شده باشد، به طور خودکار ظاهر و حس دسکتاپ را خواهد داشت و کاربران احساس راحتی خواهند کرد. اگر برنامه به صورت عمودی قفل شده است یا رابط کاربری آن فقط لمسی است، اکنون زمان مدرن‌سازی آن فرا رسیده است.

به طور خاص، به این بهترین شیوه‌های کلیدی برای تجربه بهینه برنامه در نمایشگرهای متصل توجه کنید:

• شیء Display را ثابت فرض نکنید : شیء Display مرتبط با زمینه برنامه شما می‌تواند هنگام انتقال پنجره برنامه به یک نمایشگر خارجی یا تغییر پیکربندی نمایشگر تغییر کند. برنامه شما باید به طور مناسب رویدادهای تغییر پیکربندی را مدیریت کند و معیارهای نمایش را به صورت پویا جستجو کند، نه اینکه آنها را در حافظه پنهان ذخیره کند.
• تغییرات پیکربندی تراکم پیکسل را در نظر بگیرید : نمایشگرهای خارجی می‌توانند تراکم پیکسلی بسیار متفاوتی نسبت به صفحه نمایش دستگاه اصلی داشته باشند. اطمینان حاصل کنید که طرح‌بندی‌ها و منابع شما به درستی با این تغییرات سازگار می‌شوند تا وضوح و قابلیت استفاده رابط کاربری حفظ شود. از پیکسل‌های مستقل از تراکم (dp) برای طرح‌بندی‌ها استفاده کنید، منابع متناسب با تراکم پیکسلی ارائه دهید و مطمئن شوید که مقیاس رابط کاربری شما به طور مناسب تغییر می‌کند.
• پشتیبانی صحیح از لوازم جانبی خارجی : وقتی کاربران به یک مانیتور خارجی متصل می‌شوند، اغلب محیطی شبیه به دسکتاپ ایجاد می‌کنند. این امر اغلب شامل استفاده از صفحه کلید، ماوس، ترک پد، وب کم، میکروفون و بلندگوهای خارجی است. پشتیبانی از تعاملات صفحه کلید و ماوس را بهبود بخشید.

ساختن برای آینده دسکتاپ با ابزارهای مدرن

ما ابزارهای مختلفی را برای کمک به شما در ساخت تجربه دسکتاپ ارائه می‌دهیم. بیایید خلاصه‌ای از آخرین به‌روزرسانی‌های کتابخانه‌های تطبیقی ​​اصلی خود را ارائه دهیم!

کلاس‌های جدید اندازه پنجره: بزرگ و خیلی بزرگ

بزرگترین به‌روزرسانی در Jetpack WindowManager 1.5.0، اضافه شدن دو کلاس جدید برای اندازه پنجره با عرض زیاد است: بزرگ (Large) و خیلی بزرگ (Extra-large).

کلاس‌های اندازه پنجره، مجموعه رسمی و مورد نظر ما از نقاط توقف نمای صفحه هستند که به شما در طراحی و توسعه طرح‌بندی‌های تطبیقی ​​کمک می‌کنند. با نسخه ۱.۵.۰، ما این راهنما را برای صفحات نمایشی که فراتر از اندازه تبلت‌های معمولی هستند، گسترش می‌دهیم.

نقاط شکست عرض جدید به شرح زیر هستند:

• بزرگ: برای عرض‌های بین ۱۲۰۰dp و ۱۶۰۰dp
• خیلی بزرگ: برای عرض‌های ≥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.
}

ساخت طرح‌بندی‌های تطبیقی ​​با Jetpack Navigation 3

Navigation 3 جدیدترین نسخه از مجموعه Jetpack است. Navigation 3 که به تازگی اولین نسخه پایدار خود را منتشر کرده است، یک کتابخانه ناوبری قدرتمند است که برای کار با Compose طراحی شده است.

ناوبری ۳ همچنین ابزاری عالی برای ساخت طرح‌بندی‌های تطبیقی ​​است که امکان نمایش چندین مقصد را به طور همزمان و امکان جابجایی یکپارچه بین این طرح‌بندی‌ها فراهم می‌کند.

این سیستم برای مدیریت جریان رابط کاربری برنامه شما مبتنی بر صحنه‌ها (Scenes) است. یک صحنه (Scene) یک طرح‌بندی است که یک یا چند مقصد را همزمان نمایش می‌دهد. یک SceneStrategy تعیین می‌کند که آیا می‌تواند یک صحنه (Scene) ایجاد کند یا خیر. زنجیره‌سازی نمونه‌های SceneStrategy با یکدیگر به شما امکان می‌دهد صحنه‌های مختلفی را برای اندازه‌های مختلف صفحه نمایش و پیکربندی‌های دستگاه ایجاد و نمایش دهید.

برای طرح‌بندی‌های متعارف آماده، مانند list-detail و پنل پشتیبانی، می‌توانید از Scenes از کتابخانه Compose Material 3 Adaptive (موجود در نسخه ۱.۳ و بالاتر ) استفاده کنید.

همچنین ساخت صحنه‌های سفارشی خودتان با تغییر دستورالعمل‌های صحنه یا شروع از ابتدا آسان است. برای مثال، صحنه‌ای را در نظر بگیرید که سه پنل را در کنار هم نمایش می‌دهد:

  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 تعریف کنید تا اگر عرض پنجره به اندازه کافی زیاد است و ورودی‌های موجود در back stack شما اعلام کرده‌اند که از نمایش در یک صحنه سه‌صفحه‌ای پشتیبانی می‌کنند، سه پنجره نمایش داده شوند.

  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
    }
}

شما می‌توانید هنگام ایجاد NavDisplay از ThreePaneSceneStrategy خود به همراه سایر استراتژی‌ها استفاده کنید. برای مثال، می‌توانیم یک 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 آخرین ورودی در پشته پشتی را در یک پنل واحد نمایش می‌دهد.

با استفاده از صحنه‌ها و استراتژی‌ها، می‌توانید طرح‌بندی‌های یک، دو و سه قسمتی را به برنامه خود اضافه کنید!

یک برنامه تطبیقی ​​که ناوبری سه‌صفحه‌ای را روی صفحات عریض نشان می‌دهد.

برای کسب اطلاعات بیشتر در مورد نحوه ایجاد طرح‌بندی‌های سفارشی با استفاده از صحنه‌ها در ناوبری ۳، مستندات را بررسی کنید.

طرح‌بندی‌های تطبیقی ​​مستقل

اگر به یک طرح‌بندی مستقل نیاز دارید، کتابخانه Compose Material 3 Adaptive به شما کمک می‌کند تا رابط‌های کاربری تطبیقی ​​مانند list-detail و طرح‌بندی‌های پشتیبانی از pane ایجاد کنید که خود را به طور خودکار بر اساس کلاس‌های اندازه پنجره یا موقعیت دستگاه با پیکربندی‌های پنجره تطبیق می‌دهند.

خبر خوب این است که این کتابخانه از قبل با نقاط شکست جدید به‌روز شده است! از نسخه ۱.۲ به بعد، توابع پیش‌فرض دستورالعمل pane scaffold از کلاس‌های اندازه پنجره با عرض بزرگ (Large) و خیلی بزرگ (Extra-large) پشتیبانی می‌کنند.

شما فقط باید با اعلام اینکه می‌خواهید از نقاط شکست جدید استفاده کنید، در فایل ساخت Gradle خود، این گزینه را انتخاب کنید:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

شروع به کار

ویژگی نمایشگر متصل را در آخرین نسخه اندروید بررسی کنید. اندروید ۱۶ QPR3 را روی یک دستگاه پشتیبانی‌شده دریافت کنید، سپس آن را به یک مانیتور خارجی متصل کنید تا همین امروز تست برنامه خود را شروع کنید!

برای کسب اطلاعات بیشتر در مورد پیاده‌سازی این بهترین شیوه‌ها، به مستندات به‌روز شده در مورد پشتیبانی از چند نمایشگر و مدیریت پنجره مراجعه کنید.

بازخورد

بازخورد شما بسیار مهم است زیرا ما همچنان به بهبود تجربه دسکتاپ با نمایشگر متصل ادامه می‌دهیم. نظرات خود را به اشتراک بگذارید و هرگونه مشکل را از طریق کانال‌های بازخورد رسمی ما گزارش دهید.

ما متعهد هستیم که اندروید را به یک پلتفرم همه‌کاره تبدیل کنیم که با روش‌های مختلفی که کاربران می‌خواهند با برنامه‌ها و دستگاه‌های خود تعامل داشته باشند، سازگار شود. بهبود پشتیبانی از نمایشگرهای متصل، گام دیگری در این مسیر است و ما فکر می‌کنیم کاربران شما عاشق تجربیات دسکتاپی که ایجاد خواهید کرد، خواهند شد!

*توجه: در زمان نگارش این مقاله، نمایشگرهای متصل در سری‌های Pixel 8، 9، 10 و طیف وسیعی از دستگاه‌های سامسونگ، از جمله S26، Fold7، Flip7 و Tab S11 پشتیبانی می‌شوند.