با ساختار و روش‌های مهار محتوا، جریان و ریتم انعطاف‌پذیری برای محتوایتان ایجاد کنید. با طراحی محفظه‌های طرح‌بندی شروع کنید، سپس محتوا را اضافه کنید.
۱. ساختار پایه: شبکه چیدمان برای راهنمایی محتوا
برای شروع ایجاد ساختاری محکم با حفاظ‌های ثابت، حاشیه‌ها و ستون‌ها را به چیدمان‌هایتان اضافه کنید.
حاشیه‌ها فاصله‌گذاری را در لبه‌های چپ و راست صفحه و محتوا فراهم می‌کنند. مقدار حاشیه استاندارد برای اندازه‌بندی فشرده ۱۶ dp است، اما حاشیه‌ها باید با صفحه‌نمایش‌های بزرگ‌تر سازگار شوند. محتوای اصلی و کنش‌های برنامه‌تان باید در این حاشیه‌ها قرار بگیرد و با آن‌ها تراز باشد.
در این مرحله، می‌توانید از مناطق امن درج‌شده یا درج‌ها نیز مطمئن شوید. درج‌های نوار سیستم از قرار گرفتن کنش‌های مهم در زیر نوارهای سیستم جلوگیری می‌کند. باید محتوایتان را در پشت نوارهای سیستم رسم کنید.
از ستون‌ها برای ساختن ساختار شبکه‌ای انعطاف‌پذیر برای تراز کردن یکسان و برای ارائه تعریف عمودی به چیدمان با تقسیم کردن محتوا در ناحیه بدنه استفاده کنید. محتوا در قسمت‌هایی از صفحه که حاوی ستون است قرار می‌گیرد. این ستون‌ها به چیدمان شما ساختار می‌دهند و ساختار مناسبی برای چیدن عناصر فراهم می‌کنند.
اهمیت محتوا، یا سلسله‌مراتب، می‌تواند به تعیین نوع شبکه چیدمان برای ایجاد ساختار بیشتر کمک کند. اگر محتوایتان سلسله‌مراتب واضحی دارد، شبکه چیدمان سلسله‌مراتبی مناسب است؛ برای مثال، چیدمان سرمقاله یا صفحه جزئیات با سرصفحه بزرگ و هنر کلیدی.
شبکه مدولار برای محتوا و چیدمان بسیار ساختاریافته اما با اهمیت یکسان، مانند گالری عکس، به‌خوبی کار می‌کند.
برای چیدمان‌های یک‌جهته با واکنش‌گرایی یکنواخت، یا زمانی که به انعطاف‌پذیری بیشتری نیاز دارید، شبکه ستونی را انتخاب کنید.
صرف‌نظر از نوع، شبکه چیدمان باید با اندازه‌ها و عوامل شکل مختلف نیز سازگار شود.
این نمونه از شبکه ستونی برای تراز کردن محتوا با شبکه زیرین استفاده می‌کند درحالی‌که اندازه‌بندی انعطاف‌پذیر را حفظ می‌کند. برای تطبیق با ابعاد مختلف، شبکه ستونی اندازه ستون و تعداد ستون‌ها را براساس اندازه صفحه‌نمایش تغییر می‌دهد، که این کار همچنین امکان مقیاس‌بندی محتوا را فراهم می‌کند. از ریزدانه کردن بیش‌ازحد شبکه چیدمان اجتناب کنید. درعوض، از شبکه مبنا برای ارائه واحدهای فاصله‌گذاری سازگار استفاده کنید.
شروع به افزودن نسخه به ساختار چیدمان. حاشیه‌ها از محتوا دربرابر لبه‌های صفحه‌نمایش محافظت می‌کنند. ستون‌ها ساختار تراز و فاصله‌گذاری هماهنگی را ارائه می‌دهند.
یا اینکه از شبکه چیدمان سلسله‌مراتبی استفاده کنید تا صفحه جزئیات را مرتب نگه دارید.
با شبکه چیدمان هماهنگ شروع کنید. اگر محتوایتان نیاز دارد، شبکه را بشکنید. حتی در این صورت، ممکن است متوجه شوید که شبکه دیگری همچنان با نیازهای محتوای شما همسو است.
درباره محفظه‌های چیدمان، مثل ورق‌زن‌ها و چیدمان جاری، بیشتر بدانید.
نسخه خطی و بنایی انواع دیگر شبکه‌های چیدمان هستند.
هر شبکه چیدمانی که انتخاب کنید می‌تواند از مفهوم دربرگیری قاب‌ها نیز برای گروه‌بندی محتوا برای چیدمان‌های تطبیقی استفاده کند. برای مثال، نمونه استفاده‌شده یک صفحه جزئیات است، یک قاب که می‌تواند در چیدمان فهرست-جزئیات نشان داده شود.
۲. اعمال مهار
از محفظه برای گروه‌بندی بصری عناصر استفاده کنید.
دربرگیری به استفاده از فضای سفید و عناصر نمایان باهم برای ایجاد گروه‌بندی بصری اشاره دارد. ظرف شکلی است که نشان‌دهنده یک ناحیه محصور است. در یک چیدمان، می‌توانید عناصری را که محتوا یا عملکرد مشابهی دارند گروه‌بندی کنید و آن‌ها را بااستفاده از فضای باز، تایپوگرافی، و تقسیم‌کننده‌ها از عناصر دیگر جدا کنید.
Android از ردیف‌ها، ستون‌ها، و چارگوش‌ها به‌عنوان واحدهای سازنده استفاده می‌کند، بنابراین می‌توانید محتویات را به روشی مشابه طراحی کنید. موارد مشابه را با فاصله سفید یا تقسیم‌بندی قابل‌مشاهده گروه‌بندی کنید تا به شما کمک کند در محتوا راهنمایی شوید.
محدودسازی ضمنی از فضای خالی برای گروه‌بندی بصری محتوا برای ایجاد مرزهای نگهدارنده استفاده می‌کند، درحالی‌که محدودسازی صریح از اشیایی مانند خطوط تقسیم‌کننده و کارت‌ها برای گروه‌بندی محتوا استفاده می‌کند.
شکل زیر نمونه‌ای از استفاده از دربرگیری ضمنی برای دربرگرفتن سرصفحه و نسخه اصلی را نشان می‌دهد. از شبکه ستونی برای تراز کردن و ایجاد گروه‌بندی‌ها استفاده می‌شود. نکات برجسته به‌طور صریح در کارت‌ها گنجانده شده است. استفاده از نمادنگاری و سلسله‌مراتب نوشتاری برای جداسازی بصری بیشتر.
۳. جایگاه محتوا
با انتخاب شبکه چیدمان و محتوا در ظرف‌ها، Android روش‌های مختلفی برای مدیریت عناصر محتوا و موقعیت‌یابی آن‌ها دارد، با واحدهای سازنده پایه و اصلاح‌کننده‌ها یا ظرف‌های چیدمان مانند شبکه و flexbox.
درنظر بگیرید که محتوایتان یک‌بعدی است یا دوبعدی. برای مثال، محتوا می‌تواند به‌صورت افقی، عمودی، یا در هر دو جهت جریان داشته باشد.
همان‌طور که در شکل زیر نشان داده شده است، چیدمان اصالت‌سنجی می‌تواند از چیدمان شبکه‌ای دوبعدی استفاده کند.
عناصر میانای کاربر همچنین می‌توانند در یک بعد انعطاف‌پذیر و جاری باشند، مانند فیلترها یا برچسب‌های محتوا. درباره flexbox بیشتر بدانید.
چیدمان‌ها همچنین می‌توانند از ترکیبی از انواع چیدمان استفاده کنند. برای مثال، می‌توانید گردونه یا پیمایش افقی را با کارت‌های عمودی جفت کنید. یا می‌توانید نمودار سفارشی با داده‌های فهرست عمودی ارائه دهید.
می‌توانید محتوا را در ردیف‌ها یا ستون‌های پیمایشی با ردیف‌های تنبل و ستون‌های تنبل ارائه دهید.
تراز کردن
مشابه با تراز و جریان چیدمان خودکار، می‌توانید ترتیب و تراز عناصر میانای کاربر را مشخص کنید.
از AlignmentLine برای ایجاد خطوط تراز سفارشی استفاده کنید که چیدمان‌های ولی
می‌توانند از آن‌ها برای تراز کردن و موقعیت‌یابی فرزندانشان استفاده کنند.
انجام دهید
نبایدها
۴. مقیاس‌بندی و برش محتوا
مقیاس‌بندی برای تطبیق محتوای پویا، جهت دستگاه، و اندازه صفحه‌نمایش بسیار مهم است. عناصر می‌توانند ثابت بمانند یا مقیاس‌بندی شوند.
مشخص کنید که تصاویر چگونه در کانتینرهایشان مقیاس‌بندی و جای‌گذاری شوند تا مطمئن شوید که در هر دستگاهی به‌درستی نمایش داده می‌شوند. درغیراین‌صورت، ممکن است تمرکز اصلی تصویر قطع شود، یا تصویر برای چیدمان خیلی کوچک یا خیلی بزرگ باشد.
با مقیاس‌بندی و برش مناسب، نسبت‌های ابعادی و جهت‌های مختلف دستگاه را تطبیق دهید. چون نسبت‌های ابعادی می‌توانند به‌طور قابل‌توجهی متفاوت باشند، مشخص کنید که محتوای شما چگونه این سناریوها را مدیریت می‌کند.
برای مثال، نگاره اصلی تمام‌عرض کل صفحه‌نمایش تلفن را در جهت افقی اشغال می‌کند.
انجام دهید
نبایدها
اگر محتوا باید نسبت ابعادی را حفظ کند، مثل ویدیوهای فقط عمودی، نسبت ابعادی را محدود کنید و فضای خالی را متعادل کنید.
نبایدها
محتوای سنجاق‌شده
بسیاری از مؤلفه‌ها دارای تعاملات، پیمایش، و موقعیت‌یابی داخلی با شکاف‌ها یا داربست‌ها هستند، مانند نوارهای برنامه. برخی‌از عناصر را می‌توان به‌گونه‌ای اصلاح کرد که به‌جای واکنش به پیمایش، ثابت بمانند، برای مثال دکمه‌های کنش شناور (FAB) که کنش‌های مهم را در خود جای می‌دهند. سنجاق کردن عناصر برای تمرکز بهتر در موارد استفاده خاص، برای مثال، سنجاق کردن ورودی نوشتاری به صفحه‌کلید برای جلوگیری از ورودی‌های پنهان.
برای ورودی نوشتاری، مانند پیام‌رسانی و اصالت‌سنجی، ورودی به صفحه‌کلید پیوست می‌شود و تمرکز فقط به آن داده می‌شود.
عناصر در چیدمان
مؤلفه‌های Material 3 پیکربندی‌ها و حالت‌های خود را برای تعامل و محتوا ارائه می‌دهند.
Compose چیدمان‌های مناسبی برای ترکیب «اجزای Material» در الگوهای رایج صفحه‌نمایش ارائه می‌دهد. ترکیب‌پذیرهایی مانند Scaffold جایگاه‌هایی برای اجزای مختلف و سایر عناصر صفحه ارائه می‌دهند. درباره مؤلفه‌ها و چیدمان Material بیشتر بخوانید.