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

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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

،

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

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

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

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

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

،

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

،

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

،

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

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

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

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

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

تعبیه فعالیت

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

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

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

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

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

،

تعبیه فعالیت

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

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

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

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

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

خوراک

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

،

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

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

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

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

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

قاب پشتیبان

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

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

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

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

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

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

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

پیاده سازی

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

،

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

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

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

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

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

• صفحه پشتیبانی با نماها
• پشتیبان صفحه با قطعات

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

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

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

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

،

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

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

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

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

منابع اضافی

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