چیدمان های متعارف

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

نمایش دستگاه‌های صفحه نمایش بزرگ که طرح‌بندی‌های متعارف را نشان می‌دهند.

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

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

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

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

جزئیات فهرست

طرح کلی طرح لیست-جزئیات.

طرح‌بندی فهرست-جزئیات به کاربران این امکان را می‌دهد که فهرست‌هایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.

این طرح‌بندی، پنجره برنامه را به دو پنل کنار هم تقسیم می‌کند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتم‌هایی را از فهرست انتخاب می‌کنند تا جزئیات آیتم نمایش داده شود. لینک‌های عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار می‌کنند.

نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاس‌های اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای می‌دهند. انتخاب یک مورد از لیست، پنجره جزئیات را به‌روزرسانی می‌کند تا محتوای مرتبط با مورد انتخاب‌شده را نشان دهد.

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

تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه می‌تواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرح‌بندی list-detail بر این اساس واکنش نشان می‌دهد و حالت برنامه را حفظ می‌کند:

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

List-detail برای برنامه‌های پیام‌رسان ، مدیریت تماس‌ها ، مرورگرهای رسانه‌های تعاملی یا هر برنامه‌ای که در آن محتوا را می‌توان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان می‌دهند، سازماندهی کرد، ایده‌آل است.

شکل ۱. برنامه پیام‌رسان که فهرستی از مکالمات و جزئیات مکالمه انتخاب‌شده را نشان می‌دهد.

پیاده‌سازی

طرح‌بندی جزئیات فهرست را می‌توان با انواع فناوری‌ها، از جمله نوشتن، نماها، و جاسازی فعالیت (برای برنامه‌های قدیمی) ایجاد کرد. برای کمک به تصمیم گیری در مورد اینکه کدام فناوری برای برنامه شما مناسب تر است، به بخش کاربردپذیری مراجعه کنید.

کتابخانه SlidingPaneLayout برای اجرای طرح‌بندی‌های جزئیات فهرست بر اساس نماها یا قطعات طراحی شده است.

ابتدا یک SlidingPaneLayout به عنوان عنصر اصلی طرح XML خود اعلام کنید. در مرحله بعد، دو عنصر فرزند - نماها یا قطعات - را اضافه کنید که فهرست و محتوای جزئیات را نشان می دهد.

یک متدولوژی ارتباطی را برای انتقال داده ها بین نماها یا قطعات فهرست با جزئیات پیاده سازی کنید. ViewModel به دلیل توانایی آن در ذخیره منطق تجاری و حفظ تغییرات پیکربندی توصیه می شود.

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

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

تعبیه فعالیت

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

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

جاسازی فعالیت در Android 12L (سطح API 32) و بالاتر پشتیبانی می‌شود، اما اگر توسط سازندگان دستگاه اجرا شود، ممکن است در سطوح پایین‌تر API نیز در دسترس باشد. وقتی جاسازی فعالیت در دستگاهی در دسترس نیست، رفتار بازگشتی منجر به فعالیت لیست یا فعالیت جزئیاتی می شود که کل پنجره برنامه را بر اساس تعامل کاربر با برنامه اشغال می کند.

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

برای اجرای نمونه، به لیست جزئیات با نمونه تعبیه فعالیت مراجعه کنید.

،

تعبیه فعالیت

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

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

جاسازی فعالیت در Android 12L (سطح API 32) و بالاتر پشتیبانی می‌شود، اما اگر توسط سازندگان دستگاه اجرا شود، ممکن است در سطوح پایین‌تر API نیز در دسترس باشد. وقتی جاسازی فعالیت در دستگاهی در دسترس نیست، رفتار بازگشتی منجر به فعالیت لیست یا فعالیت جزئیاتی می شود که کل پنجره برنامه را بر اساس تعامل کاربر با برنامه اشغال می کند.

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

برای اجرای نمونه، به لیست جزئیات با نمونه تعبیه فعالیت مراجعه کنید.

خوراک

قاب سیمی طرح بندی فید.

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

اندازه و موقعیت، روابط بین عناصر محتوا را برقرار می‌کنند.

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

کارت‌ها و لیست‌ها اجزای رایج طرح‌بندی فید هستند.

طرح‌بندی فید تقریباً از هر اندازه‌ای برای نمایش پشتیبانی می‌کند، زیرا شبکه می‌تواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.

فیدها به ویژه برای برنامه‌های خبری و رسانه‌های اجتماعی مناسب هستند.

شکل ۲. برنامه رسانه اجتماعی که پست‌ها را در کارت‌هایی با اندازه‌های مختلف نشان می‌دهد.

پیاده‌سازی

یک RecyclerView به طور موثر تعداد زیادی از آیتم ها را در یک ستون رندر می کند. یک GridLayoutManager آیتم ها را در یک شبکه قرار می دهد و امکان پیکربندی اندازه و گستره آیتم ها را فراهم می کند.

ستون های شبکه را بر اساس اندازه منطقه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز برای موارد را تنظیم کنید.

استراتژی فراگیر پیش‌فرض GridLayoutManager ، که یک بازه برای هر مورد است، می‌تواند با ایجاد یک SpanSizeLookup سفارشی لغو شود. دهانه را طوری تنظیم کنید که بر برخی موارد بر موارد دیگر تأکید شود.

در نمایشگرهایی با عرض فشرده که فضای کافی برای یک ستون دارند، به جای GridLayoutManager از LinearLayoutManager استفاده کنید.

برای اجرای نمونه، نمونه Feed with views را ببینید.

،

یک RecyclerView به طور موثر تعداد زیادی از آیتم ها را در یک ستون رندر می کند. یک GridLayoutManager آیتم ها را در یک شبکه قرار می دهد و امکان پیکربندی اندازه و گستره آیتم ها را فراهم می کند.

ستون های شبکه را بر اساس اندازه منطقه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز برای موارد را تنظیم کنید.

استراتژی فراگیر پیش‌فرض GridLayoutManager ، که یک بازه برای هر مورد است، می‌تواند با ایجاد یک SpanSizeLookup سفارشی لغو شود. دهانه را طوری تنظیم کنید که بر برخی موارد بر موارد دیگر تأکید شود.

در نمایشگرهایی با عرض فشرده که فضای کافی برای یک ستون دارند، به جای GridLayoutManager از LinearLayoutManager استفاده کنید.

برای اجرای نمونه، نمونه Feed with views را ببینید.

صفحه پشتیبانی

قاب سیمی طرح‌بندی صفحه پشتیبانی.

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

ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال می‌کند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحه‌ای است که بقیه پنجره برنامه را اشغال می‌کند و محتوایی را ارائه می‌دهد که از محتوای اصلی پشتیبانی می‌کند.

طرح‌بندی‌های پشتیبانی‌شده‌ی پنجره‌ها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاس‌های اندازه‌ی پنجره » مراجعه کنید) در جهت افقی به خوبی کار می‌کنند. نمایشگرهای با عرض متوسط ​​یا فشرده، در صورتی که محتوا با فضاهای نمایش باریک‌تر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحه‌ی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیه‌ی نمایش اصلی و فرعی پشتیبانی می‌کنند.

طرح‌بندی صفحه پشتیبان با طرح‌بندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بی‌ربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرح‌بندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.

موارد استفاده برای قاب پشتیبان عبارتند از:

شکل ۳. اپلیکیشن خرید با توضیحات محصول در یک پنل پشتیبانی.

پیاده‌سازی

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

قابلیت کاربرد

طرح‌بندی‌های متعارف، ارائه‌های چندوجهی از محتوا را برای دسترسی آسان و کاوش عمیق ایجاد می‌کنند. از فلوچارت زیر برای تعیین اینکه کدام طرح و استراتژی پیاده سازی برای موارد استفاده برنامه شما بهترین است استفاده کنید.

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

شکل 4. درخت تصمیم گیری طرح بندی متعارف صفحه نمایش بزرگ.
،

قابلیت کاربرد

طرح‌بندی‌های متعارف، ارائه‌های چندوجهی از محتوا را برای دسترسی آسان و کاوش عمیق ایجاد می‌کنند. از فلوچارت زیر برای تعیین اینکه کدام طرح و استراتژی پیاده سازی برای موارد استفاده برنامه شما بهترین است استفاده کنید.

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

شکل 4. درخت تصمیم گیری طرح بندی متعارف صفحه نمایش بزرگ.

منابع اضافی

،

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

نمایش دستگاه‌های صفحه نمایش بزرگ که طرح‌بندی‌های متعارف را نشان می‌دهند.

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

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

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

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

،

اگر قبلاً با طرح‌بندی‌های متعارف برنامه‌های تطبیقی ​​آشنا هستید، اما مطمئن نیستید که از کدام API Android استفاده کنید، برای کمک به تعیین طرح‌بندی مناسب برای موارد استفاده برنامه‌تان، به بخش Applicability بروید.

جزئیات فهرست

طرح کلی طرح لیست-جزئیات.

طرح‌بندی فهرست-جزئیات به کاربران این امکان را می‌دهد که فهرست‌هایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.

این طرح‌بندی، پنجره برنامه را به دو پنل کنار هم تقسیم می‌کند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتم‌هایی را از فهرست انتخاب می‌کنند تا جزئیات آیتم نمایش داده شود. لینک‌های عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار می‌کنند.

نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاس‌های اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای می‌دهند. انتخاب یک مورد از لیست، پنجره جزئیات را به‌روزرسانی می‌کند تا محتوای مرتبط با مورد انتخاب‌شده را نشان دهد.

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

تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه می‌تواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرح‌بندی list-detail بر این اساس واکنش نشان می‌دهد و حالت برنامه را حفظ می‌کند:

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

List-detail برای برنامه‌های پیام‌رسان ، مدیریت تماس‌ها ، مرورگرهای رسانه‌های تعاملی یا هر برنامه‌ای که در آن محتوا را می‌توان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان می‌دهند، سازماندهی کرد، ایده‌آل است.

شکل ۱. برنامه پیام‌رسان که فهرستی از مکالمات و جزئیات مکالمه انتخاب‌شده را نشان می‌دهد.

پیاده‌سازی

طرح‌بندی جزئیات فهرست را می‌توان با انواع فناوری‌ها، از جمله نوشتن، نماها، و جاسازی فعالیت (برای برنامه‌های قدیمی) ایجاد کرد. برای کمک به تصمیم گیری در مورد اینکه کدام فناوری برای برنامه شما مناسب تر است، به بخش کاربردپذیری مراجعه کنید.

کتابخانه SlidingPaneLayout برای اجرای طرح‌بندی‌های جزئیات فهرست بر اساس نماها یا قطعات طراحی شده است.

ابتدا یک SlidingPaneLayout به عنوان عنصر اصلی طرح XML خود اعلام کنید. در مرحله بعد، دو عنصر فرزند - نماها یا قطعات - را اضافه کنید که فهرست و محتوای جزئیات را نشان می دهد.

یک متدولوژی ارتباطی را برای انتقال داده ها بین نماها یا قطعات فهرست با جزئیات پیاده سازی کنید. ViewModel به دلیل توانایی آن در ذخیره منطق تجاری و حفظ تغییرات پیکربندی توصیه می شود.

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

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

تعبیه فعالیت

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

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

جاسازی فعالیت در Android 12L (سطح API 32) و بالاتر پشتیبانی می‌شود، اما اگر توسط سازندگان دستگاه اجرا شود، ممکن است در سطوح پایین‌تر API نیز در دسترس باشد. وقتی جاسازی فعالیت در دستگاهی در دسترس نیست، رفتار بازگشتی منجر به فعالیت لیست یا فعالیت جزئیاتی می شود که کل پنجره برنامه را بر اساس تعامل کاربر با برنامه اشغال می کند.

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

برای اجرای نمونه، به لیست جزئیات با نمونه تعبیه فعالیت مراجعه کنید.

،

تعبیه فعالیت

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

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

جاسازی فعالیت در Android 12L (سطح API 32) و بالاتر پشتیبانی می‌شود، اما اگر توسط سازندگان دستگاه اجرا شود، ممکن است در سطوح پایین‌تر API نیز در دسترس باشد. وقتی جاسازی فعالیت در دستگاهی در دسترس نیست، رفتار بازگشتی منجر به فعالیت لیست یا فعالیت جزئیاتی می شود که کل پنجره برنامه را بر اساس تعامل کاربر با برنامه اشغال می کند.

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

برای اجرای نمونه، به لیست جزئیات با نمونه تعبیه فعالیت مراجعه کنید.

خوراک

قاب سیمی طرح بندی فید.

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

اندازه و موقعیت، روابط بین عناصر محتوا را برقرار می‌کنند.

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

کارت‌ها و لیست‌ها اجزای رایج طرح‌بندی فید هستند.

طرح‌بندی فید تقریباً از هر اندازه‌ای برای نمایش پشتیبانی می‌کند، زیرا شبکه می‌تواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.

فیدها به ویژه برای برنامه‌های خبری و رسانه‌های اجتماعی مناسب هستند.

شکل ۲. برنامه رسانه اجتماعی که پست‌ها را در کارت‌هایی با اندازه‌های مختلف نشان می‌دهد.

پیاده‌سازی

یک RecyclerView به طور موثر تعداد زیادی از آیتم ها را در یک ستون رندر می کند. یک GridLayoutManager آیتم ها را در یک شبکه قرار می دهد و امکان پیکربندی اندازه و گستره آیتم ها را فراهم می کند.

ستون های شبکه را بر اساس اندازه منطقه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز برای موارد را تنظیم کنید.

استراتژی فراگیر پیش‌فرض GridLayoutManager ، که یک بازه برای هر مورد است، می‌تواند با ایجاد یک SpanSizeLookup سفارشی لغو شود. دهانه را طوری تنظیم کنید که بر برخی موارد بر موارد دیگر تأکید شود.

در نمایشگرهایی با عرض فشرده که فضای کافی برای یک ستون دارند، به جای GridLayoutManager از LinearLayoutManager استفاده کنید.

برای اجرای نمونه، نمونه Feed with views را ببینید.

،

یک RecyclerView به طور موثر تعداد زیادی از آیتم ها را در یک ستون رندر می کند. یک GridLayoutManager آیتم ها را در یک شبکه قرار می دهد و امکان پیکربندی اندازه و گستره آیتم ها را فراهم می کند.

ستون های شبکه را بر اساس اندازه منطقه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز برای موارد را تنظیم کنید.

استراتژی فراگیر پیش‌فرض GridLayoutManager ، که یک بازه برای هر مورد است، می‌تواند با ایجاد یک SpanSizeLookup سفارشی لغو شود. دهانه را طوری تنظیم کنید که بر برخی موارد بر موارد دیگر تأکید شود.

در نمایشگرهایی با عرض فشرده که فضای کافی برای یک ستون دارند، به جای GridLayoutManager از LinearLayoutManager استفاده کنید.

برای اجرای نمونه، نمونه Feed with views را ببینید.

صفحه پشتیبانی

قاب سیمی طرح‌بندی صفحه پشتیبانی.

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

ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال می‌کند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحه‌ای است که بقیه پنجره برنامه را اشغال می‌کند و محتوایی را ارائه می‌دهد که از محتوای اصلی پشتیبانی می‌کند.

طرح‌بندی‌های پشتیبانی‌شده‌ی پنجره‌ها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاس‌های اندازه‌ی پنجره » مراجعه کنید) در جهت افقی به خوبی کار می‌کنند. نمایشگرهای با عرض متوسط ​​یا فشرده، در صورتی که محتوا با فضاهای نمایش باریک‌تر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحه‌ی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیه‌ی نمایش اصلی و فرعی پشتیبانی می‌کنند.

طرح‌بندی صفحه پشتیبان با طرح‌بندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بی‌ربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرح‌بندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.

موارد استفاده برای قاب پشتیبان عبارتند از:

شکل ۳. اپلیکیشن خرید با توضیحات محصول در یک پنل پشتیبانی.

پیاده‌سازی

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

،

یک طرح بندی پنجره پشتیبانی با استفاده از یک طرح کمکی مانند LinearLayout یا ConstraintLayout پیاده سازی می شود. کلاس های اندازه پنجره را ایجاد کنید که مقدار فضای نمایش افقی موجود برای برنامه شما را به سه دسته تقسیم می کند: فشرده (< 600dp)، متوسط ​​(>= 600dp) و گسترش یافته (>= 840dp).

برای هر کلاس اندازه پنجره، layout ها را به صورت زیر تعریف کنید:

  • فشرده: در پوشه layout منابع برنامه، محتوایی را قرار دهید که صفحه پشتیبانی را در زیر محتوای اصلی یا داخل یک صفحه پایین ارائه می‌کند.
  • Medium: در پوشه layout-w600dp ، محتوای صفحه پشتیبانی را ارائه دهید که منجر به محتوای اصلی و پشتیبانی از رندر صفحه در کنار هم می شود و فضای نمایش افقی را به طور مساوی تقسیم می کند.
  • Expanded: در پوشه layout-w840dp ، محتوای صفحه را پشتیبانی می‌کند که منجر به محتوای اصلی می‌شود و پشتیبانی از رندر پانل در کنار هم. با این حال، قاب پشتیبان تنها 30 درصد از فضای افقی را اشغال می کند و 70 درصد باقی مانده را برای محتوای اصلی باقی می گذارد.

از ViewModel برای برقراری ارتباط بین محتوای اصلی و صفحه پشتیبانی، چه با استفاده از نماها، قطعات، یا ترکیبی استفاده کنید.

برای نمونه های پیاده سازی، نمونه های زیر را ببینید:

قابلیت کاربرد

طرح‌بندی‌های متعارف، ارائه‌های چندوجهی از محتوا را برای دسترسی آسان و کاوش عمیق ایجاد می‌کنند. از فلوچارت زیر برای تعیین اینکه کدام طرح و استراتژی پیاده سازی برای موارد استفاده برنامه شما بهترین است استفاده کنید.

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

شکل 4. درخت تصمیم گیری طرح بندی متعارف صفحه نمایش بزرگ.
،

قابلیت کاربرد

طرح‌بندی‌های متعارف، ارائه‌های چندوجهی از محتوا را برای دسترسی آسان و کاوش عمیق ایجاد می‌کنند. از فلوچارت زیر برای تعیین اینکه کدام طرح و استراتژی پیاده سازی برای موارد استفاده برنامه شما بهترین است استفاده کنید.

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

شکل 4. درخت تصمیم گیری طرح بندی متعارف صفحه نمایش بزرگ.

منابع اضافی