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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

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

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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 پشتیبانی می‌کنند. برگرفته از راهنمای طراحی متریال ، چیدمان ها زیبایی شناختی و همچنین کاربردی هستند.

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

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

فهرست-جزئیات

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

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

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

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

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

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

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

پیاده سازی

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

خوراک

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

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

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

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

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

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

پیاده سازی

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.

منابع اضافی

• طراحی متریال - طرح‌بندی متعارف