طرحبندیهای کانونیکال، طرحبندیهای اثباتشده و همهکارهای هستند که تجربه کاربری بهینهای را در انواع فرمفکتورها ارائه میدهند.
طرحبندیهای متعارف از تلفنهای صفحه نمایش کوچک و همچنین تبلتها، دستگاههای تاشو و دستگاههای ChromeOS پشتیبانی میکنند. این طرحبندیها که از دستورالعملهای طراحی متریال گرفته شدهاند، هم زیبا و هم کاربردی هستند.
چارچوب اندروید شامل اجزای تخصصی است که پیادهسازی طرحبندیها را ساده و قابل اعتماد میکند.
طرحبندیهای متعارف، رابطهای کاربری جذاب و افزایشدهندهی بهرهوری ایجاد میکنند که پایه و اساس برنامههای عالی را تشکیل میدهند.
جزئیات فهرست
طرحبندی فهرست-جزئیات به کاربران این امکان را میدهد که فهرستهایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.
این طرحبندی، پنجره برنامه را به دو پنل کنار هم تقسیم میکند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتمهایی را از فهرست انتخاب میکنند تا جزئیات آیتم نمایش داده شود. لینکهای عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار میکنند.
نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای میدهند. انتخاب یک مورد از لیست، پنجره جزئیات را بهروزرسانی میکند تا محتوای مرتبط با مورد انتخابشده را نشان دهد.
نمایشگرهای با عرض متوسط و جمعوجور، بسته به تعامل کاربر با برنامه، یا لیست یا جزئیات را نشان میدهند. وقتی فقط لیست قابل مشاهده است، انتخاب یک مورد از لیست، جزئیات را به جای لیست نمایش میدهد. وقتی فقط جزئیات قابل مشاهده است، فشردن دکمه بازگشت، لیست را دوباره نمایش میدهد.
تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه میتواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرحبندی list-detail بر این اساس واکنش نشان میدهد و حالت برنامه را حفظ میکند:
- اگر یک نمایشگر با عرض گسترده که هم فهرست و هم بخشهای جزئیات را نشان میدهد، به اندازه متوسط یا فشرده باریک شود، بخش جزئیات قابل مشاهده باقی میماند و بخش فهرست پنهان میشود.
- اگر در یک نمایشگر با عرض متوسط یا جمعوجور، فقط بخش جزئیات قابل مشاهده باشد و کلاس اندازه پنجره به بخش باز تبدیل شود، فهرست و جزئیات با هم نمایش داده میشوند و فهرست نشان میدهد که آیتم مربوط به محتوای موجود در بخش جزئیات انتخاب شده است.
- اگر در یک نمایشگر با عرض متوسط یا کم، فقط پنجره فهرست قابل مشاهده باشد و قابلیت باز شدن و گسترش داشته باشد، فهرست و پنجره جزئیات جایگذاری با هم نمایش داده میشوند.
List-detail برای برنامههای پیامرسان ، مدیریت تماسها ، مرورگرهای رسانههای تعاملی یا هر برنامهای که در آن محتوا را میتوان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان میدهند، سازماندهی کرد، ایدهآل است.
پیادهسازی
پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط است). یا فشرده).
برای اطمینان از جریان دادههای یکطرفه، همه حالتها، از جمله کلاس اندازه پنجره فعلی و جزئیات مورد فهرست انتخابشده (در صورت وجود) را بالا ببرید ، تا همه ترکیبکنندهها به دادهها دسترسی داشته باشند و بتوانند به درستی ارائه شوند.
هنگامی که فقط پنجره جزئیات را در اندازههای کوچک پنجره نشان میدهید، یک BackHandler اضافه کنید تا پنجره جزئیات حذف شود و فقط صفحه فهرست نمایش داده شود. BackHandler بخشی از ناوبری کلی برنامه نیست زیرا کنترل کننده به کلاس اندازه پنجره و وضعیت جزئیات انتخاب شده وابسته است.
برای اجرای نمونه، لیست جزئیات با نمونه نوشتن را ببینید.
،پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط است). یا فشرده).
برای اطمینان از جریان دادههای یکطرفه، همه حالتها، از جمله کلاس اندازه پنجره فعلی و جزئیات مورد فهرست انتخابشده (در صورت وجود) را بالا ببرید ، تا همه ترکیبکنندهها به دادهها دسترسی داشته باشند و بتوانند به درستی ارائه شوند.
هنگامی که فقط پنجره جزئیات را در اندازههای کوچک پنجره نشان میدهید، یک BackHandler اضافه کنید تا پنجره جزئیات حذف شود و فقط صفحه فهرست نمایش داده شود. BackHandler بخشی از ناوبری کلی برنامه نیست زیرا کنترل کننده به کلاس اندازه پنجره و وضعیت جزئیات انتخاب شده وابسته است.
برای اجرای نمونه، لیست جزئیات با نمونه نوشتن را ببینید.
خوراک
طرحبندی فید، عناصر محتوای معادل را در یک شبکه قابل تنظیم برای مشاهده سریع و راحت حجم زیادی از محتوا، مرتب میکند.
اندازه و موقعیت، روابط بین عناصر محتوا را برقرار میکنند.
گروههای محتوا با ایجاد عناصر با اندازه یکسان و قرار دادن آنها در کنار هم ایجاد میشوند. با بزرگتر کردن عناصر نسبت به عناصر مجاور، توجه به آنها جلب میشود.
کارتها و لیستها اجزای رایج طرحبندی فید هستند.
طرحبندی فید تقریباً از هر اندازهای برای نمایش پشتیبانی میکند، زیرا شبکه میتواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.
فیدها به ویژه برای برنامههای خبری و رسانههای اجتماعی مناسب هستند.
پیادهسازی
A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.
Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.
For section headers, dividers, or other items designed to occupy the full width
of the feed, use maxLineSpan to take up the full width of the layout.
On compact-width displays that don't have enough space to show more than one
column, LazyVerticalGrid behaves just like a LazyColumn.
For an example implementation, see the Feed with Compose sample.
صفحه پشتیبانی
پشتیبانی از طرحبندی صفحه، محتوای برنامه را در قسمتهای نمایش اصلی و فرعی سازماندهی میکند.
ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال میکند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحهای است که بقیه پنجره برنامه را اشغال میکند و محتوایی را ارائه میدهد که از محتوای اصلی پشتیبانی میکند.
طرحبندیهای پشتیبانیشدهی پنجرهها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازهی پنجره » مراجعه کنید) در جهت افقی به خوبی کار میکنند. نمایشگرهای با عرض متوسط یا فشرده، در صورتی که محتوا با فضاهای نمایش باریکتر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحهی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیهی نمایش اصلی و فرعی پشتیبانی میکنند.
طرحبندی صفحه پشتیبان با طرحبندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بیربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرحبندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.
موارد استفاده برای قاب پشتیبان عبارتند از:
- برنامههای بهرهوری: یک سند یا صفحه گسترده همراه با نظرات بررسیکنندگان در یک پنل پشتیبانی
- برنامههای رسانهای: یک ویدیوی استریمینگ که با فهرستی از ویدیوهای مرتبط در یک صفحه پشتیبانی تکمیل میشود ، یا نمایش یک آلبوم موسیقی که با یک لیست پخش تکمیل شده است.
- ابزارها و تنظیمات: یک ابزار ویرایش رسانه با پالتها، جلوهها و سایر تنظیمات در یک پنل پشتیبانی
پیادهسازی
Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.
Hoist all state, including current window size class and information related to the data in the main content and supporting content.
For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.
For an example implementation, see the Supporting pane with Compose sample.
منابع اضافی
- طراحی متریال - طرحبندیهای متعارف
طرحبندیهای کانونیکال، طرحبندیهای اثباتشده و همهکارهای هستند که تجربه کاربری بهینهای را در انواع فرمفکتورها ارائه میدهند.
طرحبندیهای متعارف از تلفنهای صفحه نمایش کوچک و همچنین تبلتها، دستگاههای تاشو و دستگاههای ChromeOS پشتیبانی میکنند. این طرحبندیها که از دستورالعملهای طراحی متریال گرفته شدهاند، هم زیبا و هم کاربردی هستند.
چارچوب اندروید شامل اجزای تخصصی است که پیادهسازی طرحبندیها را ساده و قابل اعتماد میکند.
طرحبندیهای متعارف، رابطهای کاربری جذاب و افزایشدهندهی بهرهوری ایجاد میکنند که پایه و اساس برنامههای عالی را تشکیل میدهند.
جزئیات فهرست
طرحبندی فهرست-جزئیات به کاربران این امکان را میدهد که فهرستهایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.
این طرحبندی، پنجره برنامه را به دو پنل کنار هم تقسیم میکند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتمهایی را از فهرست انتخاب میکنند تا جزئیات آیتم نمایش داده شود. لینکهای عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار میکنند.
نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای میدهند. انتخاب یک مورد از لیست، پنجره جزئیات را بهروزرسانی میکند تا محتوای مرتبط با مورد انتخابشده را نشان دهد.
نمایشگرهای با عرض متوسط و جمعوجور، بسته به تعامل کاربر با برنامه، یا لیست یا جزئیات را نشان میدهند. وقتی فقط لیست قابل مشاهده است، انتخاب یک مورد از لیست، جزئیات را به جای لیست نمایش میدهد. وقتی فقط جزئیات قابل مشاهده است، فشردن دکمه بازگشت، لیست را دوباره نمایش میدهد.
تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه میتواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرحبندی list-detail بر این اساس واکنش نشان میدهد و حالت برنامه را حفظ میکند:
- اگر یک نمایشگر با عرض گسترده که هم فهرست و هم بخشهای جزئیات را نشان میدهد، به اندازه متوسط یا فشرده باریک شود، بخش جزئیات قابل مشاهده باقی میماند و بخش فهرست پنهان میشود.
- اگر در یک نمایشگر با عرض متوسط یا جمعوجور، فقط بخش جزئیات قابل مشاهده باشد و کلاس اندازه پنجره به بخش باز تبدیل شود، فهرست و جزئیات با هم نمایش داده میشوند و فهرست نشان میدهد که آیتم مربوط به محتوای موجود در بخش جزئیات انتخاب شده است.
- اگر در یک نمایشگر با عرض متوسط یا کم، فقط پنجره فهرست قابل مشاهده باشد و قابلیت باز شدن و گسترش داشته باشد، فهرست و پنجره جزئیات جایگذاری با هم نمایش داده میشوند.
List-detail برای برنامههای پیامرسان ، مدیریت تماسها ، مرورگرهای رسانههای تعاملی یا هر برنامهای که در آن محتوا را میتوان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان میدهند، سازماندهی کرد، ایدهآل است.
پیادهسازی
پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط است). یا فشرده).
برای اطمینان از جریان دادههای یکطرفه، همه حالتها، از جمله کلاس اندازه پنجره فعلی و جزئیات مورد فهرست انتخابشده (در صورت وجود) را بالا ببرید ، تا همه ترکیبکنندهها به دادهها دسترسی داشته باشند و بتوانند به درستی ارائه شوند.
هنگامی که فقط پنجره جزئیات را در اندازههای کوچک پنجره نشان میدهید، یک BackHandler اضافه کنید تا پنجره جزئیات حذف شود و فقط صفحه فهرست نمایش داده شود. BackHandler بخشی از ناوبری کلی برنامه نیست زیرا کنترل کننده به کلاس اندازه پنجره و وضعیت جزئیات انتخاب شده وابسته است.
برای اجرای نمونه، لیست جزئیات با نمونه نوشتن را ببینید.
،پارادایم اعلامی Compose از منطق کلاس اندازه پنجره پشتیبانی می کند که تعیین می کند آیا لیست و پنجره های جزئیات به طور همزمان نمایش داده شوند (زمانی که کلاس اندازه پنجره عرض گسترش می یابد) یا فقط فهرست یا صفحه جزئیات (زمانی که کلاس اندازه پنجره عرض متوسط است). یا فشرده).
برای اطمینان از جریان دادههای یکطرفه، همه حالتها، از جمله کلاس اندازه پنجره فعلی و جزئیات مورد فهرست انتخابشده (در صورت وجود) را بالا ببرید ، تا همه ترکیبکنندهها به دادهها دسترسی داشته باشند و بتوانند به درستی ارائه شوند.
هنگامی که فقط پنجره جزئیات را در اندازههای کوچک پنجره نشان میدهید، یک BackHandler اضافه کنید تا پنجره جزئیات حذف شود و فقط صفحه فهرست نمایش داده شود. BackHandler بخشی از ناوبری کلی برنامه نیست زیرا کنترل کننده به کلاس اندازه پنجره و وضعیت جزئیات انتخاب شده وابسته است.
برای اجرای نمونه، لیست جزئیات با نمونه نوشتن را ببینید.
خوراک
طرحبندی فید، عناصر محتوای معادل را در یک شبکه قابل تنظیم برای مشاهده سریع و راحت حجم زیادی از محتوا، مرتب میکند.
اندازه و موقعیت، روابط بین عناصر محتوا را برقرار میکنند.
گروههای محتوا با ایجاد عناصر با اندازه یکسان و قرار دادن آنها در کنار هم ایجاد میشوند. با بزرگتر کردن عناصر نسبت به عناصر مجاور، توجه به آنها جلب میشود.
کارتها و لیستها اجزای رایج طرحبندی فید هستند.
طرحبندی فید تقریباً از هر اندازهای برای نمایش پشتیبانی میکند، زیرا شبکه میتواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.
فیدها به ویژه برای برنامههای خبری و رسانههای اجتماعی مناسب هستند.
پیادهسازی
A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.
Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.
For section headers, dividers, or other items designed to occupy the full width
of the feed, use maxLineSpan to take up the full width of the layout.
On compact-width displays that don't have enough space to show more than one
column, LazyVerticalGrid behaves just like a LazyColumn.
For an example implementation, see the Feed with Compose sample.
صفحه پشتیبانی
پشتیبانی از طرحبندی صفحه، محتوای برنامه را در قسمتهای نمایش اصلی و فرعی سازماندهی میکند.
ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال میکند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحهای است که بقیه پنجره برنامه را اشغال میکند و محتوایی را ارائه میدهد که از محتوای اصلی پشتیبانی میکند.
طرحبندیهای پشتیبانیشدهی پنجرهها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازهی پنجره » مراجعه کنید) در جهت افقی به خوبی کار میکنند. نمایشگرهای با عرض متوسط یا فشرده، در صورتی که محتوا با فضاهای نمایش باریکتر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحهی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیهی نمایش اصلی و فرعی پشتیبانی میکنند.
طرحبندی صفحه پشتیبان با طرحبندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بیربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرحبندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.
موارد استفاده برای قاب پشتیبان عبارتند از:
- برنامههای بهرهوری: یک سند یا صفحه گسترده همراه با نظرات بررسیکنندگان در یک پنل پشتیبانی
- برنامههای رسانهای: یک ویدیوی استریمینگ که با فهرستی از ویدیوهای مرتبط در یک صفحه پشتیبانی تکمیل میشود ، یا نمایش یک آلبوم موسیقی که با یک لیست پخش تکمیل شده است.
- ابزارها و تنظیمات: یک ابزار ویرایش رسانه با پالتها، جلوهها و سایر تنظیمات در یک پنل پشتیبانی
پیادهسازی
Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.
Hoist all state, including current window size class and information related to the data in the main content and supporting content.
For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.
For an example implementation, see the Supporting pane with Compose sample.
منابع اضافی
- طراحی متریال - طرحبندیهای متعارف