صفحه با منوی ثابت در پایین
در بسیاری از اپلیکیشنها، لازم است یک منوی ثابت در پایین صفحه داشته باشید و در بخش اصلی صفحه، محتوای هر بخش نمایش داده شود.
این ساختار برای صفحههایی مثل صفحه اصلی، فروشگاه، پروفایل، تنظیمات یا داشبورد بسیار رایج است.
در اپادیتور، برای ساخت این نوع صفحه باید چیدمان ویجتها را طوری تنظیم کنید که:
- محتوای اصلی، بخش مرکزی و اصلی صفحه را اشغال کند
- منوی پایین همیشه در انتهای صفحه باقی بماند
- با تغییر یا اسکرول محتوای وسط، جای منوی پایین تغییر نکند
در این آموزش، با استفاده از مفاهیم ویجت گروه و چیدمان صفحه، این ساختار را مرحلهبهمرحله میسازیم.
ساختار کلی صفحه
برای رسیدن به این طراحی، بهتر است کل صفحه را به دو بخش اصلی تقسیم کنید:
- بخش محتوای اصلی
- بخش منوی پایین
مناسبترین روش برای این کار، استفاده از یک ویجت گروه با چیدمان عمودی است.
چون در این حالت میتوانید عناصر را از بالا به پایین زیر هم قرار دهید.
ساختار کلی به این شکل است:
صفحه
└── گروه اصلی (چیدمان عمودی)
├── گروه محتوا
└── گروه منوی پایین
در این ساختار:
گروه اصلیکل ارتفاع صفحه را میگیردگروه محتوافضای اصلی و باقیمانده صفحه را اشغال میکندگروه منوی پایینبعد از محتوا و در انتهای گروه اصلی قرار میگیرد
ایده اصلی چیدمان
نکته مهم این است که بخش محتوا باید فضای باقیمانده صفحه را پر کند و منوی پایین فقط به اندازه مورد نیاز خودش فضا بگیرد.
یعنی:
- محتوای وسط: قابل گسترش
- منوی پایین: با ارتفاع ثابت یا متناسب با محتوای خودش
اگر این ساختار درست تنظیم شود، منوی پایین در جای خود باقی میماند و محتوای اصلی در بالا یا وسط آن نمایش داده میشود.
چیدمان پیشنهادی
مرحله 1: ایجاد گروه اصلی صفحه
ابتدا یک ویجت گروه بهعنوان ریشه صفحه قرار دهید و نوع چیدمان آن را روی عمودی بگذارید.
این گروه باید کل فضای صفحه را بگیرد، چون قرار است تمام اجزای صفحه داخل آن قرار بگیرند.
ساختار:
گروه اصلی
- چیدمان: عمودی
- ارتفاع: کل صفحه
- عرض: کل صفحه
در این مرحله هنوز لازم نیست منوی پایین را بسازید؛ فقط مطمئن شوید گروه اصلی قرار است نقش ظرف کل صفحه را داشته باشد.
مرحله 2: افزودن بخش محتوا
داخل گروه اصلی، یک گروه دیگر برای محتوای صفحه قرار دهید.
این بخش باید طوری تنظیم شود که فضای باقیمانده صفحه را پر کند.
در این قسمت میتوانید هر نوع محتوایی قرار دهید، مثل:
- متن
- لیست
- فرم
- کارتها
- تصاویر
- محتوای هر تب یا هر بخش
اگر محتوای این بخش زیاد است، میتوانید آن را بهصورت اسکرولپذیر طراحی کنید تا فقط همین قسمت اسکرول شود و منوی پایین ثابت بماند.
ساختار تقریبی:
گروه محتوا
- داخل گروه اصلی
- اشغال فضای اصلی صفحه
- در صورت نیاز: اسکرولپذیر
نکته مهم این است که اگر محتوا طولانی شد، اسکرول را روی همین گروه محتوا تنظیم کنید؛ نه روی کل صفحه یا گروه اصلی.
مرحله 3: افزودن منوی پایین
بعد از گروه محتوا، یک گروه دیگر برای منوی پایین قرار دهید.
این گروه همان بخشی است که قرار است همیشه در پایین صفحه دیده شود.
چیدمان این بخش معمولاً افقی است، چون آیتمهای منو معمولاً کنار هم قرار میگیرند.
مثلاً:
گروه منوی پایین
- چیدمان: افقی
- شامل چند دکمه یا آیتم منو
نمونه ساختار:
گروه منوی پایین
├── آیتم خانه
├── آیتم جستجو
├── آیتم علاقهمندیها
└── آیتم پروفایل
برای هر آیتم میتوانید از ترکیب دکمه، آیکون یا متن استفاده کنید. اگر منو قرار است کاربر را بین صفحههای اصلی جابهجا کند، برای هر آیتم عملکرد مناسب مثل باز کردن صفحه را در رویداد کلیک همان دکمه تنظیم کنید.
چرا این روش باعث فیکس شدن منوی پایین میشود؟
چون کل صفحه با یک گروه عمودی ساخته شده است و در آن:
- بخش محتوا فضای قابل گسترش را میگیرد
- منوی پایین در انتهای چینش قرار دارد
وقتی گروه محتوا فضای باقیمانده را پر کند، منوی پایین بهطور طبیعی در پایین صفحه میایستد.
اگر اسکرول هم فقط داخل بخش محتوا باشد، منوی پایین جابهجا نمیشود و ثابت میماند.
الگوی پیشنهادی برای ساخت
یک الگوی ساده و کاربردی میتواند این باشد:
صفحه
└── گروه اصلی (عمودی)
├── گروه محتوا (گسترشپذیر / اسکرولپذیر)
│ ├── عنوان
│ ├── لیست یا محتوای اصلی
│ └── بخشهای دیگر
└── گروه منوی پایین (افقی)
├── دکمه خانه
├── دکمه دستهبندی
├── دکمه سبد
└── دکمه پروفایل
اگر بخواهید محتوای وسط اسکرول شود
در بسیاری از صفحهها، محتوای اصلی ممکن است طولانی باشد.
در این حالت، بهتر است فقط گروه محتوا اسکرولپذیر باشد، نه کل صفحه.
این کار دو مزیت مهم دارد:
- منوی پایین همیشه قابل مشاهده باقی میماند
- فقط محتوای اصلی جابهجا میشود
اگر کل صفحه اسکرولپذیر باشد، منوی پایین هم همراه محتوا حرکت میکند و دیگر حالت ثابت نخواهد داشت.
نکته مهم درباره ارتفاع بخشها
برای اینکه این ساختار درست کار کند، بهتر است:
- گروه اصلی تمام ارتفاع صفحه را بگیرد
- گروه محتوا طوری تنظیم شود که فضای باقیمانده را پر کند
- گروه منوی پایین فقط به اندازه محتوای خودش ارتفاع داشته باشد
اگر گروه محتوا ارتفاع مناسب نگیرد، ممکن است منوی پایین بالا بیاید یا فضای خالی ناخواسته در صفحه ایجاد شود.
پخش فضا در منوی پایین
برای اینکه آیتمهای منوی پایین ظاهر منظمتری داشته باشند، میتوانید در گروه افقی منو از پخش مناسب فضا استفاده کنید تا دکمهها در عرض صفحه بهصورت یکدست پخش شوند.
این کار مخصوصاً وقتی مفید است که:
- تعداد آیتمها بیشتر از دو یا سه مورد باشد
- بخواهید فاصله بین آیتمها یکسان باشد
- ظاهر منو متقارن و منظم باشد
مثال ساده از ساختار نهایی
گروه اصلی (عمودی)
├── گروه محتوا
│ ├── هدر یا عنوان
│ ├── محتوای صفحه
│ └── لیستها یا کارتها
└── گروه منوی پایین (افقی)
├── خانه
├── جستجو
├── سبد خرید
└── حساب کاربری
اشتباهات رایج
1. اسکرولپذیر کردن کل صفحه
اگر کل صفحه اسکرولپذیر باشد، منوی پایین هم همراه محتوا حرکت میکند.
در این حالت، منو دیگر ثابت نخواهد بود.
2. ندادن فضای کافی به بخش محتوا
اگر بخش محتوا بهدرستی تنظیم نشود تا فضای اصلی صفحه را بگیرد، ممکن است منوی پایین در محل مناسب قرار نگیرد.
3. ساخت منو داخل بخش محتوای اسکرولپذیر
اگر منوی پایین را داخل همان بخشی قرار دهید که اسکرول میشود، منو هم جابهجا خواهد شد.
برای ثابت ماندن منو، باید آن را بهعنوان یک بخش جداگانه در پایین گروه اصلی قرار دهید.
4. استفاده نکردن از چیدمان افقی برای آیتمهای منو
اگر آیتمهای منوی پایین را بدون یک ساختار منظم قرار دهید، فاصلهها و تراز آنها بههم میریزد.
معمولاً یک گروه افقی بهترین انتخاب برای این بخش است.
چه زمانی این ساختار مناسب است؟
این الگو برای این صفحهها بسیار مناسب است:
- صفحه اصلی اپ
- پنل کاربری
- فروشگاه
- صفحات دارای تب یا بخشهای اصلی
- اپهایی که ناوبری اصلی آنها در پایین صفحه قرار دارد
جمعبندی
برای ساخت صفحهای که منوی پایین ثابت داشته باشد و محتوای اصلی در بخش میانی نمایش داده شود، یک ساختار ساده و مؤثر این است:
- یک گروه اصلی با چیدمان عمودی بسازید
- در بالای آن، گروه محتوا را قرار دهید
- در پایین آن، گروه منوی پایین را بگذارید
- اگر لازم است محتوا اسکرول شود، فقط بخش محتوا را اسکرولپذیر کنید
این روش باعث میشود منوی پایین در جای خود ثابت بماند و محتوای صفحه بهشکل منظم و قابل کنترل نمایش داده شود.