طرحبندیهای کانونیکال، طرحبندیهای اثباتشده و همهکارهای هستند که تجربه کاربری بهینهای را در انواع فرمفکتورها ارائه میدهند.
طرحبندیهای متعارف از تلفنهای صفحه نمایش کوچک و همچنین تبلتها، دستگاههای تاشو و دستگاههای ChromeOS پشتیبانی میکنند. این طرحبندیها که از دستورالعملهای طراحی متریال گرفته شدهاند، هم زیبا و هم کاربردی هستند.
چارچوب اندروید شامل اجزای تخصصی است که پیادهسازی طرحبندیها را ساده و قابل اعتماد میکند.
طرحبندیهای متعارف، رابطهای کاربری جذاب و افزایشدهندهی بهرهوری ایجاد میکنند که پایه و اساس برنامههای عالی را تشکیل میدهند.
جزئیات فهرست
طرحبندی فهرست-جزئیات به کاربران این امکان را میدهد که فهرستهایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.
این طرحبندی، پنجره برنامه را به دو پنل کنار هم تقسیم میکند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتمهایی را از فهرست انتخاب میکنند تا جزئیات آیتم نمایش داده شود. لینکهای عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار میکنند.
نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای میدهند. انتخاب یک مورد از لیست، پنجره جزئیات را بهروزرسانی میکند تا محتوای مرتبط با مورد انتخابشده را نشان دهد.
نمایشگرهای با عرض متوسط و جمعوجور، بسته به تعامل کاربر با برنامه، یا لیست یا جزئیات را نشان میدهند. وقتی فقط لیست قابل مشاهده است، انتخاب یک مورد از لیست، جزئیات را به جای لیست نمایش میدهد. وقتی فقط جزئیات قابل مشاهده است، فشردن دکمه بازگشت، لیست را دوباره نمایش میدهد.
تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه میتواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرحبندی list-detail بر این اساس واکنش نشان میدهد و حالت برنامه را حفظ میکند:
- اگر یک نمایشگر با عرض گسترده که هم فهرست و هم بخشهای جزئیات را نشان میدهد، به اندازه متوسط یا فشرده باریک شود، بخش جزئیات قابل مشاهده باقی میماند و بخش فهرست پنهان میشود.
- اگر در یک نمایشگر با عرض متوسط یا جمعوجور، فقط بخش جزئیات قابل مشاهده باشد و کلاس اندازه پنجره به بخش باز تبدیل شود، فهرست و جزئیات با هم نمایش داده میشوند و فهرست نشان میدهد که آیتم مربوط به محتوای موجود در بخش جزئیات انتخاب شده است.
- اگر در یک نمایشگر با عرض متوسط یا کم، فقط پنجره فهرست قابل مشاهده باشد و قابلیت باز شدن و گسترش داشته باشد، فهرست و پنجره جزئیات جایگذاری با هم نمایش داده میشوند.
List-detail برای برنامههای پیامرسان ، مدیریت تماسها ، مرورگرهای رسانههای تعاملی یا هر برنامهای که در آن محتوا را میتوان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان میدهند، سازماندهی کرد، ایدهآل است.
پیادهسازی
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 Compose 构建列表详情示例。
خوراک
طرحبندی فید، عناصر محتوای معادل را در یک شبکه قابل تنظیم برای مشاهده سریع و راحت حجم زیادی از محتوا، مرتب میکند.
اندازه و موقعیت، روابط بین عناصر محتوا را برقرار میکنند.
گروههای محتوا با ایجاد عناصر با اندازه یکسان و قرار دادن آنها در کنار هم ایجاد میشوند. با بزرگتر کردن عناصر نسبت به عناصر مجاور، توجه به آنها جلب میشود.
کارتها و لیستها اجزای رایج طرحبندی فید هستند.
طرحبندی فید تقریباً از هر اندازهای برای نمایش پشتیبانی میکند، زیرا شبکه میتواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.
فیدها به ویژه برای برنامههای خبری و رسانههای اجتماعی مناسب هستند.
پیادهسازی
یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکههای تنبل آیتمها را در شبکهها ارائه میکنند و از پیکربندی اندازهها و دهانههای آیتم پشتیبانی میکنند.
ستون های طرح شبکه را بر اساس ناحیه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز را برای موارد شبکه تنظیم کنید. هنگام تعریف آیتم های شبکه، دهانه ستون ها را تنظیم کنید تا بر برخی از موارد بر موارد دیگر تأکید شود.
برای سرصفحههای بخش، تقسیمکنندهها یا موارد دیگری که برای اشغال تمام عرض فید طراحی شدهاند، از maxLineSpan استفاده کنید تا تمام عرض طرحبندی را اشغال کند.
در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.
برای اجرای نمونه، نمونه Feed with Compose را ببینید.
،یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکههای تنبل آیتمها را در شبکهها ارائه میکنند و از پیکربندی اندازهها و دهانههای آیتم پشتیبانی میکنند.
ستون های طرح شبکه را بر اساس ناحیه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز را برای موارد شبکه تنظیم کنید. هنگام تعریف آیتم های شبکه، دهانه ستون ها را تنظیم کنید تا بر برخی از موارد بر موارد دیگر تأکید شود.
برای سرصفحههای بخش، تقسیمکنندهها یا موارد دیگری که برای اشغال تمام عرض فید طراحی شدهاند، از maxLineSpan استفاده کنید تا تمام عرض طرحبندی را اشغال کند.
در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.
برای اجرای نمونه، نمونه Feed with Compose را ببینید.
صفحه پشتیبانی
پشتیبانی از طرحبندی صفحه، محتوای برنامه را در قسمتهای نمایش اصلی و فرعی سازماندهی میکند.
ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال میکند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحهای است که بقیه پنجره برنامه را اشغال میکند و محتوایی را ارائه میدهد که از محتوای اصلی پشتیبانی میکند.
طرحبندیهای پشتیبانیشدهی پنجرهها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازهی پنجره » مراجعه کنید) در جهت افقی به خوبی کار میکنند. نمایشگرهای با عرض متوسط یا فشرده، در صورتی که محتوا با فضاهای نمایش باریکتر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحهی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیهی نمایش اصلی و فرعی پشتیبانی میکنند.
طرحبندی صفحه پشتیبان با طرحبندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بیربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرحبندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.
موارد استفاده برای قاب پشتیبان عبارتند از:
- برنامههای بهرهوری: یک سند یا صفحه گسترده همراه با نظرات بررسیکنندگان در یک پنل پشتیبانی
- برنامههای رسانهای: یک ویدیوی استریمینگ که با فهرستی از ویدیوهای مرتبط در یک صفحه پشتیبانی تکمیل میشود ، یا نمایش یک آلبوم موسیقی که با یک لیست پخش تکمیل شده است.
- ابزارها و تنظیمات: یک ابزار ویرایش رسانه با پالتها، جلوهها و سایر تنظیمات در یک پنل پشتیبانی
پیادهسازی
Compose 支持窗口大小类别逻辑，借助该逻辑，您可以确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。
提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。
对于较小宽度的显示屏，请将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和较大宽度的显示屏，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度，请在主要内容和辅助内容之间平均分配显示空间。对于较大宽度的显示屏，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。
如需查看示例实现，请参阅使用 Compose 构建辅助窗格示例。
منابع اضافی
- طراحی متریال - طرحبندیهای متعارف
طرحبندیهای کانونیکال، طرحبندیهای اثباتشده و همهکارهای هستند که تجربه کاربری بهینهای را در انواع فرمفکتورها ارائه میدهند.
طرحبندیهای متعارف از تلفنهای صفحه نمایش کوچک و همچنین تبلتها، دستگاههای تاشو و دستگاههای ChromeOS پشتیبانی میکنند. این طرحبندیها که از دستورالعملهای طراحی متریال گرفته شدهاند، هم زیبا و هم کاربردی هستند.
چارچوب اندروید شامل اجزای تخصصی است که پیادهسازی طرحبندیها را ساده و قابل اعتماد میکند.
طرحبندیهای متعارف، رابطهای کاربری جذاب و افزایشدهندهی بهرهوری ایجاد میکنند که پایه و اساس برنامههای عالی را تشکیل میدهند.
جزئیات فهرست
طرحبندی فهرست-جزئیات به کاربران این امکان را میدهد که فهرستهایی از اقلام را که دارای اطلاعات توصیفی، توضیحی یا سایر اطلاعات تکمیلی هستند - جزئیات کالا - بررسی کنند.
این طرحبندی، پنجره برنامه را به دو پنل کنار هم تقسیم میکند: یکی برای فهرست و دیگری برای جزئیات. کاربران آیتمهایی را از فهرست انتخاب میکنند تا جزئیات آیتم نمایش داده شود. لینکهای عمیق در جزئیات، محتوای اضافی را در پنل جزئیات آشکار میکنند.
نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازه پنجره » مراجعه کنید) هم لیست و هم جزئیات را همزمان در خود جای میدهند. انتخاب یک مورد از لیست، پنجره جزئیات را بهروزرسانی میکند تا محتوای مرتبط با مورد انتخابشده را نشان دهد.
نمایشگرهای با عرض متوسط و جمعوجور، بسته به تعامل کاربر با برنامه، یا لیست یا جزئیات را نشان میدهند. وقتی فقط لیست قابل مشاهده است، انتخاب یک مورد از لیست، جزئیات را به جای لیست نمایش میدهد. وقتی فقط جزئیات قابل مشاهده است، فشردن دکمه بازگشت، لیست را دوباره نمایش میدهد.
تغییرات پیکربندی مانند تغییر جهت دستگاه یا تغییر اندازه پنجره برنامه میتواند کلاس اندازه پنجره نمایشگر را تغییر دهد. یک طرحبندی list-detail بر این اساس واکنش نشان میدهد و حالت برنامه را حفظ میکند:
- اگر یک نمایشگر با عرض گسترده که هم فهرست و هم بخشهای جزئیات را نشان میدهد، به اندازه متوسط یا فشرده باریک شود، بخش جزئیات قابل مشاهده باقی میماند و بخش فهرست پنهان میشود.
- اگر در یک نمایشگر با عرض متوسط یا جمعوجور، فقط بخش جزئیات قابل مشاهده باشد و کلاس اندازه پنجره به بخش باز تبدیل شود، فهرست و جزئیات با هم نمایش داده میشوند و فهرست نشان میدهد که آیتم مربوط به محتوای موجود در بخش جزئیات انتخاب شده است.
- اگر در یک نمایشگر با عرض متوسط یا کم، فقط پنجره فهرست قابل مشاهده باشد و قابلیت باز شدن و گسترش داشته باشد، فهرست و پنجره جزئیات جایگذاری با هم نمایش داده میشوند.
List-detail برای برنامههای پیامرسان ، مدیریت تماسها ، مرورگرهای رسانههای تعاملی یا هر برنامهای که در آن محتوا را میتوان به صورت فهرستی از مواردی که اطلاعات اضافی را نشان میدهند، سازماندهی کرد، ایدهآل است.
پیادهسازی
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 Compose 构建列表详情示例。
خوراک
طرحبندی فید، عناصر محتوای معادل را در یک شبکه قابل تنظیم برای مشاهده سریع و راحت حجم زیادی از محتوا، مرتب میکند.
اندازه و موقعیت، روابط بین عناصر محتوا را برقرار میکنند.
گروههای محتوا با ایجاد عناصر با اندازه یکسان و قرار دادن آنها در کنار هم ایجاد میشوند. با بزرگتر کردن عناصر نسبت به عناصر مجاور، توجه به آنها جلب میشود.
کارتها و لیستها اجزای رایج طرحبندی فید هستند.
طرحبندی فید تقریباً از هر اندازهای برای نمایش پشتیبانی میکند، زیرا شبکه میتواند از یک ستون اسکرول شونده تا یک فید محتوای چند ستونی با قابلیت اسکرول شدن، سازگار شود.
فیدها به ویژه برای برنامههای خبری و رسانههای اجتماعی مناسب هستند.
پیادهسازی
یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکههای تنبل آیتمها را در شبکهها ارائه میکنند و از پیکربندی اندازهها و دهانههای آیتم پشتیبانی میکنند.
ستون های طرح شبکه را بر اساس ناحیه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز را برای موارد شبکه تنظیم کنید. هنگام تعریف آیتم های شبکه، دهانه ستون ها را تنظیم کنید تا بر برخی از موارد بر موارد دیگر تأکید شود.
برای سرصفحههای بخش، تقسیمکنندهها یا موارد دیگری که برای اشغال تمام عرض فید طراحی شدهاند، از maxLineSpan استفاده کنید تا تمام عرض طرحبندی را اشغال کند.
در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.
برای اجرای نمونه، نمونه Feed with Compose را ببینید.
،یک فید شامل تعداد زیادی عنصر محتوا در یک ظرف پیمایش عمودی است که در یک شبکه چیده شده است. لیست های تنبل به طور موثر تعداد زیادی از موارد را در ستون ها یا ردیف ها ارائه می دهند. شبکههای تنبل آیتمها را در شبکهها ارائه میکنند و از پیکربندی اندازهها و دهانههای آیتم پشتیبانی میکنند.
ستون های طرح شبکه را بر اساس ناحیه نمایش موجود پیکربندی کنید تا حداقل عرض مجاز را برای موارد شبکه تنظیم کنید. هنگام تعریف آیتم های شبکه، دهانه ستون ها را تنظیم کنید تا بر برخی از موارد بر موارد دیگر تأکید شود.
برای سرصفحههای بخش، تقسیمکنندهها یا موارد دیگری که برای اشغال تمام عرض فید طراحی شدهاند، از maxLineSpan استفاده کنید تا تمام عرض طرحبندی را اشغال کند.
در نمایشگرهایی با پهنای فشرده که فضای کافی برای نمایش بیش از یک ستون ندارند، LazyVerticalGrid دقیقاً مانند LazyColumn رفتار می کند.
برای اجرای نمونه، نمونه Feed with Compose را ببینید.
صفحه پشتیبانی
پشتیبانی از طرحبندی صفحه، محتوای برنامه را در قسمتهای نمایش اصلی و فرعی سازماندهی میکند.
ناحیه نمایش اصلی، بخش عمده پنجره برنامه (معمولاً حدود دو سوم) را اشغال میکند و شامل محتوای اصلی است. ناحیه نمایش ثانویه، صفحهای است که بقیه پنجره برنامه را اشغال میکند و محتوایی را ارائه میدهد که از محتوای اصلی پشتیبانی میکند.
طرحبندیهای پشتیبانیشدهی پنجرهها در نمایشگرهای با عرض گسترده (به بخش «استفاده از کلاسهای اندازهی پنجره » مراجعه کنید) در جهت افقی به خوبی کار میکنند. نمایشگرهای با عرض متوسط یا فشرده، در صورتی که محتوا با فضاهای نمایش باریکتر سازگار باشد، یا اگر محتوای اضافی بتواند در ابتدا در یک صفحهی پایین یا کناری که از طریق کنترلی مانند منو یا دکمه قابل دسترسی است، پنهان شود، از نمایش هر دو ناحیهی نمایش اصلی و فرعی پشتیبانی میکنند.
طرحبندی صفحه پشتیبان با طرحبندی فهرست-جزئیات در رابطه بین محتوای اصلی و فرعی متفاوت است. محتوای صفحه ثانویه فقط در رابطه با محتوای اصلی معنادار است؛ برای مثال، یک پنجره ابزار صفحه پشتیبان به خودی خود بیربط است. با این حال، محتوای تکمیلی در صفحه جزئیات طرحبندی فهرست-جزئیات، حتی بدون محتوای اصلی نیز معنادار است، برای مثال، توضیحات یک محصول از فهرست محصولات.
موارد استفاده برای قاب پشتیبان عبارتند از:
- برنامههای بهرهوری: یک سند یا صفحه گسترده همراه با نظرات بررسیکنندگان در یک پنل پشتیبانی
- برنامههای رسانهای: یک ویدیوی استریمینگ که با فهرستی از ویدیوهای مرتبط در یک صفحه پشتیبانی تکمیل میشود ، یا نمایش یک آلبوم موسیقی که با یک لیست پخش تکمیل شده است.
- ابزارها و تنظیمات: یک ابزار ویرایش رسانه با پالتها، جلوهها و سایر تنظیمات در یک پنل پشتیبانی
پیادهسازی
Compose 支持窗口大小类别逻辑，借助该逻辑，您可以确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。
提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。
对于较小宽度的显示屏，请将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和较大宽度的显示屏，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度，请在主要内容和辅助内容之间平均分配显示空间。对于较大宽度的显示屏，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。
如需查看示例实现，请参阅使用 Compose 构建辅助窗格示例。
منابع اضافی
- طراحی متریال - طرحبندیهای متعارف