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

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

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

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

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

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

جزئیات فهرست

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

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

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

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

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

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

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

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

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

پیاده‌سازی

پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط ​​است). یا فشرده).

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

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

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

،

پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط ​​است). یا فشرده).

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

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

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

خوراک

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

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

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

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

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

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

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

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

پیاده‌سازی

یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکه‌های تنبل آیتم‌ها را در شبکه‌ها ارائه می‌کنند و از پیکربندی اندازه‌ها و دهانه‌های آیتم پشتیبانی می‌کنند.

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

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

در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.

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

،

یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکه‌های تنبل آیتم‌ها را در شبکه‌ها ارائه می‌کنند و از پیکربندی اندازه‌ها و دهانه‌های آیتم پشتیبانی می‌کنند.

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

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

در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.

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

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

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

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

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

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

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

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

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

پیاده‌سازی

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

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

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

برای اجرای نمونه، به صفحه پشتیبانی با نمونه نوشتن مراجعه کنید.

،

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

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

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

برای اجرای نمونه، به صفحه پشتیبانی با نمونه نوشتن مراجعه کنید.

منابع اضافی

،

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

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

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

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

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

جزئیات فهرست

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

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

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

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

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

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

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

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

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

پیاده‌سازی

پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط ​​است). یا فشرده).

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

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

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

،

پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط ​​است). یا فشرده).

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

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

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

خوراک

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

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

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

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

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

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

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

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

پیاده‌سازی

یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکه‌های تنبل آیتم‌ها را در شبکه‌ها ارائه می‌کنند و از پیکربندی اندازه‌ها و دهانه‌های آیتم پشتیبانی می‌کنند.

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

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

در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.

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

،

یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکه‌های تنبل آیتم‌ها را در شبکه‌ها ارائه می‌کنند و از پیکربندی اندازه‌ها و دهانه‌های آیتم پشتیبانی می‌کنند.

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

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

در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.

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

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

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

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

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

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

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

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

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

پیاده‌سازی

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

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

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

برای اجرای نمونه، به صفحه پشتیبانی با نمونه نوشتن مراجعه کنید.

،

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

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

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

برای اجرای نمونه، به صفحه پشتیبانی با نمونه نوشتن مراجعه کنید.

منابع اضافی