امروزه بیش از ۳۰۰ میلیون دستگاه اندرویدی با صفحه نمایش بزرگ، شامل تبلت‌ها، گوشی‌های تاشو، دستگاه‌های ChromeOS، نمایشگرهای خودرو و تلویزیون‌ها، در حال استفاده هستند و تعداد بیشتری نیز به طور مداوم در حال عرضه هستند. برای ارائه یک تجربه کاربری بهینه در تعداد و تنوع رو به رشد دستگاه‌های صفحه نمایش بزرگ - و همچنین در تلفن‌های استاندارد - برنامه‌های تطبیقی بسازید .
برنامه‌های تطبیقی چیستند؟
برنامه‌های تطبیقی طرح‌بندی‌ها را بر اساس تغییرات در نمایش برنامه، در درجه اول اندازه پنجره برنامه، تغییر می‌دهند. اما برنامه‌های تطبیقی همچنین تغییرات در وضعیت دستگاه‌های تاشو، مانند وضعیت روی میز یا کتاب، و تغییرات در تراکم صفحه و اندازه فونت را نیز در خود جای می‌دهند.
برنامه‌های تطبیقی به جای اینکه فقط عناصر رابط کاربری را در پاسخ به اندازه‌های مختلف پنجره، کشش یا کوچک کنند، اجزای طرح‌بندی را جایگزین می‌کنند و محتوا را نشان می‌دهند یا پنهان می‌کنند. به عنوان مثال، در تلفن‌های استاندارد، یک برنامه تطبیقی ممکن است یک نوار ناوبری پایین را نمایش دهد، اما در صفحه نمایش‌های بزرگ، یک ریل ناوبری. در صفحه نمایش‌های بزرگ، برنامه‌های تطبیقی محتوای بیشتری مانند یک طرح دو قسمتی و لیست-جزئیات را نمایش می‌دهند. در صفحه نمایش‌های کوچک، محتوای کمتری، چه لیست و چه جزئیات، نمایش می‌دهند.
در گذشته، برنامه‌ها معمولاً به صورت تمام صفحه اجرا می‌شدند. امروزه، برنامه‌ها در حالت چند پنجره‌ای و در پنجره‌هایی با اندازه دلخواه و مستقل از اندازه صفحه نمایش دستگاه اجرا می‌شوند. کاربران می‌توانند اندازه پنجره را در هر زمانی تغییر دهند. بنابراین، حتی در یک نوع دستگاه واحد، برنامه‌ها باید قابلیت تطبیق داشته باشند.
برنامه‌های تطبیقی عالی به نظر می‌رسند و روی هر دستگاهی با هر پیکربندی به خوبی کار می‌کنند.
چرا باید رابط‌های کاربری تطبیقی بسازیم؟
کاربران انتظار دارند برنامه شما در تمام دستگاه‌هایشان بی‌نقص عمل کند و قابلیت‌های پیشرفته‌ای را در صفحه نمایش‌های بزرگ ارائه دهد. کاربران برای تجربه بهتر برنامه و افزایش بهره‌وری، می‌توانند در حالت چند پنجره‌ای، چند کار را همزمان انجام دهند.
برنامه‌هایی که روی گوشی‌های استاندارد به تک‌عملکردی محدود می‌شوند، از دسترسی به طیف گسترده‌ای از امکانات متنوع کاربران محروم می‌مانند.
گوگل پلی
گوگل پلی مجموعه‌ها و پیشنهادهای مخصوص تبلت و گوشی‌های تاشو را ارائه می‌دهد که به کاربران امکان می‌دهد برنامه‌های با کیفیت بالا را کشف کنند.
پلی، برنامه‌ها و بازی‌های بهینه‌سازی‌شده برای صفحه نمایش‌های بزرگ را بالاتر از برنامه‌های بهینه‌سازی‌نشده رتبه‌بندی می‌کند. پلی رتبه‌بندی را بر اساس دستورالعمل‌های کیفیت برنامه‌های صفحه نمایش بزرگ انجام می‌دهد. رتبه‌بندی بالاتر با فراهم کردن امکان مشاهده رتبه‌بندی‌ها و نظرات مخصوص صفحه نمایش بزرگ توسط کاربران چند دستگاهی، قابلیت کشف شدن را افزایش می‌دهد.
برنامه‌هایی که استانداردهای کیفیت صفحه نمایش بزرگ فروشگاه Play را رعایت نمی‌کنند، در صفحه جزئیات برنامه هشداری نمایش می‌دهند. این هشدار به کاربران اطلاع می‌دهد که ممکن است برنامه روی دستگاه‌های صفحه نمایش بزرگ آنها عملکرد خوبی نداشته باشد.
برای گسترش قابلیت کشف در گوگل پلی و به حداکثر رساندن تعداد دستگاه‌هایی که می‌توانند برنامه شما را دانلود کنند، برنامه‌های تطبیقی بسازید.
چگونه شروع کنیم
در تمام مراحل توسعه اپلیکیشن، از برنامه‌ریزی تا استقرار، به طراحی تطبیقی فکر کنید. طراحان گرافیک را در مورد طراحی تطبیقی آگاه کنید. اپلیکیشن خود را طوری طراحی کنید که تطبیقی باشد، در این صورت اپلیکیشنی خواهید ساخت که قابل مدیریت، توسعه‌پذیر و آماده برای فرم‌فکتورها و حالت‌های پنجره‌ای آینده باشد.
برای ایجاد یک برنامه تطبیقی که از همه اندازه‌ها و پیکربندی‌های صفحه نمایش پشتیبانی می‌کند، موارد زیر را انجام دهید:
- استفاده از کلاس‌های اندازه پنجره برای تصمیم‌گیری در مورد طرح‌بندی
- با کتابخانه Compose Material 3 Adaptive بسازید
- پشتیبانی از ورودی فراتر از لمس
- تست روی انواع دستگاه‌ها
کلاس‌های اندازه پنجره
ابعاد پنجره برنامه می‌تواند در دستگاه‌های مختلف - یا در مورد دستگاه‌های تاشو - حتی زمانی که برنامه تمام صفحه است، متفاوت باشد. جهت‌های مختلف دستگاه، نسبت‌های ابعاد متفاوتی ایجاد می‌کنند. در حالت چند پنجره‌ای، اندازه پنجره برنامه، نسبت ابعاد و جهت آن می‌تواند با صفحه نمایش دستگاه متفاوت باشد.
برنامه‌های تطبیقی، با در نظر گرفتن تنها پنجره برنامه هنگام رندر کردن طرح‌بندی‌ها، مشکل تعیین و مدیریت اندازه پنجره، نسبت ابعاد و جهت‌گیری را ساده و عمومی می‌کنند، که این امر در صورت تمام صفحه بودن پنجره برنامه نیز صدق می‌کند.
کلاس‌های اندازه پنجره ، پنجره‌های برنامه‌ها را بر اساس عرض یا ارتفاع پنجره به صورت فشرده ، متوسط یا باز دسته‌بندی می‌کنند.
با استفاده از تابع سطح بالای currentWindowAdaptiveInfo() از کتابخانه Compose Material 3 Adaptive ، WindowSizeClass برنامه خود را محاسبه کنید. این تابع نمونه‌ای از WindowAdaptiveInfo را برمی‌گرداند که شامل windowSizeClass است. برنامه شما هر زمان که کلاس اندازه پنجره تغییر کند، به‌روزرسانی‌ها را دریافت می‌کند:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
پنل‌های محتوا
طرح‌بندی یک اکتیویتی گاهی اوقات به عنوان صفحه نمایش (screen) شناخته می‌شود. برای مثال، برنامه شما ممکن است دارای یک صفحه اصلی (home screen)، یک صفحه فهرست (list screen) و یک صفحه جزئیات آیتم (item screen) باشد. این اصطلاح به این معنی است که هر اکتیویتی صفحه دستگاه را پر می‌کند.
با این حال، در صفحه نمایش دستگاه‌هایی که به اندازه کافی بزرگ هستند تا از کلاس اندازه پنجره با عرض گسترش‌یافته پشتیبانی کنند، چندین صفحه فعالیت می‌توانند همزمان روی صفحه نمایش داده شوند. Pane اصطلاح دقیق‌تری برای نمایش محتوای فعالیت‌های منفرد است.
کلاس‌های اندازه پنجره به شما این امکان را می‌دهند که تعیین کنید چند پنجره محتوا در طرح‌بندی‌های چند پنجره‌ای نمایش داده شود، همانطور که در طراحی متریال مشخص شده است.
در کلاس‌های با اندازه پنجره فشرده و متوسط، برنامه‌ها یک پنجره واحد را نمایش می‌دهند و بنابراین، پیمایش به هر مقصدی، یک پنجره را نمایش می‌دهد.
در کلاس اندازه پنجره گسترش‌یافته، برنامه‌ها می‌توانند محتوای مرتبط را در چندین پنل نمایش دهند، مانند طرح‌بندی لیست-جزئیات. پیمایش به هر پنل، طرح‌بندی دو پنلی را نمایش می‌دهد. اگر اندازه پنجره به فشرده یا متوسط تغییر کند، برنامه‌های تطبیقی فقط یک پنل، مقصد پیمایش، یا لیست یا جزئیات را نشان می‌دهند.
نوشتن مطالب ۳ تطبیقی
Jetpack Compose رویکردی مدرن و اعلانی برای ساخت برنامه‌های تطبیقی بدون نیاز به تکرار و بار نگهداری فایل‌های طرح‌بندی چندگانه است.
کتابخانه Compose Material 3 Adaptive شامل کامپوننت‌هایی است که کلاس‌های اندازه پنجره، کامپوننت‌های ناوبری، طرح‌بندی‌های چندصفحه‌ای و حالت‌های تاشو و محل لولا را مدیریت می‌کنند، برای مثال:
NavigationSuiteScaffold: بسته به کلاس اندازه پنجره برنامه و وضعیت دستگاه، به طور خودکار بین نوار ناوبری و ریل ناوبری جابجا می‌شود.ListDetailPaneScaffold: طرح‌بندی استاندارد list-detail را پیاده‌سازی می‌کند.طرح‌بندی را با اندازه پنجره برنامه تطبیق می‌دهد. در کلاس اندازه پنجره گسترده، یک لیست و جزئیات یک آیتم لیست را در پنل‌های کنار هم ارائه می‌دهد، اما در کلاس‌های اندازه پنجره فشرده و متوسط، فقط لیست یا جزئیات را نمایش می‌دهد.
SupportingPaneScaffold: طرح‌بندی متعارف صفحه پشتیبان را پیاده‌سازی می‌کند.در کلاس اندازه پنجره باز، صفحه محتوای اصلی و یک صفحه پشتیبان را ارائه می‌دهد، اما در کلاس‌های اندازه پنجره فشرده و متوسط، فقط صفحه محتوای اصلی را نمایش می‌دهد.
کتابخانه Compose Material 3 Adaptive یک وابستگی کلیدی برای توسعه برنامه‌های تطبیقی است.
پیکربندی و تداوم
برنامه‌های تطبیقی در طول تغییرات پیکربندی، پیوستگی خود را حفظ می‌کنند.
تغییر پیکربندی زمانی رخ می‌دهد که اندازه پنجره برنامه تغییر کند، وضعیت یک دستگاه تاشو تغییر کند، یا تراکم صفحه نمایش یا فونت تغییر کند.
به طور پیش‌فرض، تغییرات پیکربندی، اکتیویتی برنامه را دوباره ایجاد می‌کند و تمام وضعیت فعالیت از بین می‌رود. برای حفظ پیوستگی، برنامه‌های تطبیقی، وضعیت را در متد onSaveInstanceState() مربوط به اکتیویتی یا در ViewModel ذخیره می‌کنند.
وضعیت بدن
اپلیکیشن‌های تطبیقی به تغییرات در وضعیت دستگاه‌های تاشو واکنش نشان می‌دهند. این وضعیت‌ها شامل وضعیت روی میز و کتاب می‌شود.
رابط WindowInfoTracker در Jetpack WindowManager به شما امکان می‌دهد لیستی از اشیاء DisplayFeature را برای دستگاه دریافت کنید. در میان ویژگی‌های نمایش، FoldingFeature.State وجود دارد که نشان می‌دهد دستگاه کاملاً باز است یا نیمه باز.
کتابخانه Compose Material 3 Adaptive تابع سطح بالای currentWindowAdaptiveInfo() را ارائه می‌دهد که نمونه‌ای از WindowAdaptiveInfo حاوی windowPosture برمی‌گرداند.
ورودی فراتر از لمس
کاربران اغلب کیبوردها، ترک‌پدها، ماوس‌ها و قلم‌های خارجی را به دستگاه‌های صفحه نمایش بزرگ متصل می‌کنند. این لوازم جانبی باعث افزایش بهره‌وری کاربر، دقت ورودی، بیان شخصی و دسترسی‌پذیری می‌شوند. اکثر دستگاه‌های ChromeOS دارای کیبورد و ترک‌پد داخلی هستند.
برنامه‌های تطبیقی از دستگاه‌های ورودی خارجی پشتیبانی می‌کنند، اما چارچوب اندروید بخش زیادی از کار را برای شما انجام می‌دهد:
Jetpack Compose 1.7 و بالاتر: پیمایش تب با صفحه‌کلید و کلیک، انتخاب و پیمایش با ماوس یا ترک‌پد به طور پیش‌فرض پشتیبانی می‌شوند.
کتابخانه‌ی Jetpack
androidx.compose.material3: کاربران را قادر می‌سازد تا با استفاده از قلم، در هر کامپوننتTextFieldبنویسند.کمک‌کننده‌ی میانبرهای صفحه‌کلید : میانبرهای صفحه‌کلید پلتفرم و برنامه‌ی اندروید را برای کاربران قابل کشف می‌کند. میانبرهای صفحه‌کلید برنامه‌ی خود را با لغو فراخوانی پنجره‌ی
onProvideKeyboardShortcuts()در کمک‌کننده‌ی میانبرهای صفحه‌کلید منتشر کنید.
برای پشتیبانی کامل از فرم‌فکتورها در همه اندازه‌ها، برنامه‌های تطبیقی از انواع ورودی پشتیبانی می‌کنند.
نحوه آزمایش برنامه‌های تطبیقی
اندازه‌های مختلف صفحه نمایش و پنجره و پیکربندی‌های مختلف دستگاه را آزمایش کنید . از اسکرین‌شات‌های سمت میزبان و پیش‌نمایش‌های Compose برای بررسی طرح‌بندی‌های برنامه خود استفاده کنید. برنامه خود را روی شبیه‌سازهای اندروید استودیو و دستگاه‌های اندروید از راه دور میزبانی شده در مراکز داده گوگل اجرا کنید.
دستورالعمل‌های کیفیت برنامه‌های صفحه بزرگ
دستورالعمل‌های کیفیت برنامه‌های صفحه بزرگ به شما کمک می‌کنند تا تأیید کنید که برنامه تطبیقی شما روی تبلت‌ها، دستگاه‌های تاشو و دستگاه‌های ChromeOS به خوبی کار می‌کند. این دستورالعمل‌ها شامل آزمایش‌هایی هستند که شما را قادر می‌سازند تا عملکرد برنامه را برای سفرهای حیاتی کاربر تأیید کنید. اگرچه این دستورالعمل‌ها بر روی صفحه‌های بزرگ تمرکز دارند، اما با همه اندازه‌های صفحه نمایش سازگار هستند.
پیکربندی‌های چندگانه
رابط کاربری DeviceConfigurationOverride در Compose 1.7 و بالاتر به شما امکان می‌دهد جنبه‌های مختلف پیکربندی دستگاه را نادیده بگیرید. این API پیکربندی‌های مختلف دستگاه را به صورت محلی برای هر محتوای قابل ترکیبی که می‌خواهید آزمایش کنید، شبیه‌سازی می‌کند. به عنوان مثال، می‌توانید چندین اندازه دلخواه رابط کاربری را در یک اجرای واحد از مجموعه تست خود بر روی یک دستگاه یا شبیه‌ساز واحد آزمایش کنید.
با تابع افزونه‌ی DeviceConfigurationOverride.then() ، می‌توانید چندین پارامتر پیکربندی، مانند اندازه فونت، زبان، تم و اندازه‌ی طرح‌بندی را به‌طور همزمان آزمایش کنید.
اسکرین‌شات‌های سمت میزبان
تست‌های اسکرین‌شات سمت میزبان، روشی سریع و مقیاس‌پذیر برای تأیید ظاهر بصری طرح‌بندی‌های برنامه شما هستند. از اسکرین‌شات‌های سمت میزبان برای آزمایش رابط کاربری خود برای اندازه‌های مختلف نمایشگر استفاده کنید.
برای اطلاعات بیشتر، به آزمایش پیش‌نمایش تصویر صفحه در بخش نوشتن مراجعه کنید.
پیش‌نمایش‌های نوشتن
پیش‌نمایش‌های نوشتن به شما امکان می‌دهند رابط کاربری برنامه خود را در نمای طراحی اندروید استودیو بررسی کنید. پیش‌نمایش‌ها از حاشیه‌نویسی‌هایی مانند @PreviewScreenSizes ، @PreviewFontScale و @PreviewLightDark استفاده می‌کنند تا به شما امکان دهند محتوای قابل نوشتن را در پیکربندی‌های مختلف مشاهده کنید. حتی می‌توانید با پیش‌نمایش‌ها تعامل داشته باشید.
اندروید استودیو همچنین مشکلات رایج کاربردپذیری را در پیش‌نمایش‌ها برجسته می‌کند، مانند دکمه‌ها یا فیلدهای متنی که خیلی عریض هستند.
برای اطلاعات بیشتر، به پیش‌نمایش رابط کاربری خود با پیش‌نمایش‌های قابل ترکیب مراجعه کنید.
شبیه‌سازها
اندروید استودیو انواع شبیه‌سازها را برای آزمایش اندازه‌های مختلف طرح‌بندی ارائه می‌دهد:
- شبیه‌ساز با قابلیت تغییر اندازه: یک تلفن، تبلت یا دستگاه تاشو را شبیه‌سازی می‌کند و به شما امکان می‌دهد در لحظه بین آنها جابجا شوید.
- شبیه‌ساز پیکسل فولد: گوشی تاشو با صفحه نمایش بزرگ پیکسل فولد را شبیه‌سازی می‌کند
- شبیه‌ساز تبلت پیکسل: دستگاه صفحه بزرگ تبلت پیکسل را شبیه‌سازی می‌کند
- شبیه‌ساز دسکتاپ: به شما امکان می‌دهد پنجره‌های آزاد، حرکت ماوس و میانبرهای صفحه کلید را آزمایش کنید
پخش جریانی دستگاه از راه دور
به طور ایمن به دستگاه‌های اندروید از راه دور که در مراکز داده گوگل میزبانی می‌شوند متصل شوید و برنامه خود را روی جدیدترین دستگاه‌های پیکسل و سامسونگ اجرا کنید. برنامه‌ها را نصب و اشکال‌زدایی کنید، دستورات ADB را اجرا کنید و دستگاه‌ها را بچرخانید و تا کنید تا تأیید کنید که برنامه شما روی انواع دستگاه‌های واقعی به خوبی کار می‌کند.
استریمینگ دستگاه از راه دور در اندروید استودیو ادغام شده است. برای اطلاعات بیشتر، به استریمینگ دستگاه اندروید، ارائه شده توسط فایربیس مراجعه کنید.
منابع اضافی
- ارائه ورودی/خروجی: ساخت برنامه‌های تطبیقی اندروید