ویجت گروه اسلیور
«گروه اسلیور» یک نوع خاص از ویجت گروه است که همه محتوای داخلش با یک اسکرول مشترک حرکت میکند. تفاوت اصلی آن با گروه معمولی این است که بخشهای بالای صفحه میتوانند هنگام اسکرول جمع شوند، سنجاق بمانند یا محو شوند.
با این ویجت میتوانید همان رفتاری را بسازید که در اپهای حرفهای میبینید: تصویر بزرگ بالای صفحه محصول که با اسکرول جمع میشود و در نهایت فقط یک نوار ابزار باریک با عنوان باقی میماند.
کاربردها
- صفحه محصول، خبر یا پروفایل با تصویر بزرگ بالای صفحه که با اسکرول جمع میشود
- نوار ابزاری که هنگام اسکرول به بالا محو میشود و با اسکرول به پایین دوباره برمیگردد
- هدر یا نوار فیلتری که هنگام رسیدن به بالای صفحه ثابت (سنجاق) میماند
- صفحههای بلند که باید همه محتوایشان با یک اسکرول یکپارچه دیده شود
اگر فقط به یک نوار ابزار ثابت نیاز دارید، ویجت نوار ابزار سادهتر است. گروه اسلیور زمانی ارزش دارد که میخواهید بالای صفحه با اسکرول تغییر کند.
ساخت گروه اسلیور
از فهرست ویجتها، در بخش گروهها گزینه اسلیور را انتخاب کنید.
هنگام ساخت، یک نمونه آماده بهصورت خودکار داخل آن قرار میگیرد تا نقطه شروع داشته باشید:
- یک گروه با نقش نوار ابزار که سنجاق شده است و یک متن بهعنوان عنوان دارد
- یک گروه با نقش لیست که سه آیتم متنی نمونه دارد
میتوانید این نمونهها را تغییر دهید یا حذف کنید.
نقش فرزندان
هر فرزند مستقیم گروه اسلیور باید یک گروه باشد و در تنظیماتش، در بخش تنظیمات اسلیور، یکی از این سه نقش را بگیرد:
| نقش | چه میکند |
|---|---|
| نوار ابزار | یک نوار ابزار جمعشونده در بالای اسکرول میسازد که آغازگر، عنوان، دکمهها و فضای منعطف را از فرزندان همین گروه میگیرد |
| مانا | یک هدر میسازد که با اسکرول کوچک میشود و میتواند در بالای صفحه سنجاق بماند؛ کل محتوای گروه بهعنوان بدنه هدر نمایش داده میشود |
| لیست | آیتمهای گروه را به ترتیب و بهصورت عمودی داخل بدنه اسکرول قرار میدهد |
هر تعداد از این نقشها، به هر ترتیبی، میتوانند کنار هم قرار بگیرند؛ مثلاً یک نوار ابزار، بعد یک لیست، بعد یک هدر مانا و بعد یک لیست دیگر. ترتیب نمایش همان ترتیب فرزندان در درخت ویجتها است.
اگر نقش یک فرزند نوار ابزار یا لیست باشد، خود آن گروه رندر نمیشود و فقط محتوایش استفاده میشود. به همین دلیل «تنظیمات چارچوب» (اندازه، حاشیه، فاصله، زمینه، قاب) و «نوع چیدمان» آن گروه پنهان میشود؛ چون هیچ اثری روی خروجی ندارد.
در نقش مانا کل گروه رندر میشود، پس همه این تنظیمات مثل یک گروه معمولی کار میکنند.
تنظیمات نقش نوار ابزار
| تنظیم | توضیح |
|---|---|
| رنگ زمینه | رنگ پسزمینه نوار ابزار |
| سایه | میزان برجستگی نوار ابزار؛ پیشفرض ۴ |
| ایجاد خودکار آغازگر | دکمه برگشت یا باز کردن منو را خودکار در ابتدای نوار میگذارد |
| رنگ آیکون برگشت/منو | رنگ همان آیکون خودکار |
| شناور بودن | نوار ابزار با اسکرول به پایین بلافاصله برمیگردد، بدون اینکه لازم باشد به ابتدای صفحه برسید |
| چسبنده | فقط وقتی «شناور بودن» فعال باشد؛ نوار ابزار به حرکت اسکرول میچسبد و کامل پایین میآید |
| سنجاق شده | نوار ابزار پس از جمع شدن، در بالای صفحه باقی میماند و از صفحه خارج نمیشود |
| حداکثر ارتفاع منعطف | ارتفاع نوار در حالت باز؛ پیشفرض ۱۶۰ |
ارتفاع خود نوار ابزار در حالت جمعشده ۵۶ پیکسل است. اگر «حداکثر ارتفاع منعطف» را بیشتر از ۵۶ نگذارید، فضایی برای نمایش فضای منعطف باقی نمیماند و جلوه جمع شدن دیده نمیشود.
اجزای نوار ابزار
فرزندان گروهی که نقش نوار ابزار دارد، هرکدام در بخش تنظیمات اجزای نوار یکی از این نقشها را میگیرند:
آغازگر
در ابتدای نوار ابزار قرار میگیرد. اگر «ایجاد خودکار آغازگر» فعال باشد، دکمه برگشت یا منو خودکار اضافه میشود.
عرض جایگاه آغازگر ثابت و برابر ۵۶ پیکسل است؛ ویجت پهنتر از این بریده میشود.
عنوان
بعد از آغازگر قرار میگیرد و تمام فضای باقیمانده تا دکمهها را میگیرد.
- چون عنوان تمام عرض باقیمانده را میگیرد، محل قرار گرفتن متن با تراز خود ویجت متن تعیین میشود، نه با موقعیت آیتمها.
- فاصله استاندارد عنوان از دو طرف ۱۶ پیکسل است. اگر «ایجاد خودکار آغازگر» خاموش باشد و آغازگری هم نگذاشته باشید، این فاصله صفر میشود.
- ارتفاع نوار ابزار ۵۶ پیکسل است، پس سایز متن حدود ۱۸ تا ۲۰ مناسب است؛ از ویجتهای بلند یا چندخطی استفاده نکنید.
- اگر «سنجاق شده» فعال باشد، عنوان هنگام جمع شدن نوار محو نمیشود و بالای صفحه میماند. در غیر این صورت کل نوار ابزار همراه عنوان با اسکرول از صفحه خارج میشود.
- فقط یک عنوان استفاده میشود؛ اگر چند آیتم را عنوان کنید، آخرین مورد اعمال میشود.
دکمه
به تعداد دلخواه، بعد از عنوان و در انتهای نوار قرار میگیرند.
فضای منعطف
زمینه نوار ابزار است و پشت آغازگر، عنوان و دکمهها کشیده میشود. معمولاً برای قرار دادن یک تصویر بزرگ که با اسکرول جمع میشود استفاده میشود.
- فقط وقتی دیده میشود که «حداکثر ارتفاع منعطف» بیشتر از ۵۶ باشد.
- اندازه آن خودکار است: همیشه تمام عرض و به اندازه «حداکثر ارتفاع منعطف» کشیده میشود، پس تنظیم عرض و ارتفاع روی آن بیاثر است. برای تصویر، نوع پرشدن را روی پوششی (cover) بگذارید.
- با اسکرول به سمت بالا بهتدریج محو میشود و در نهایت رنگ زمینه نوار ابزار جای آن را میگیرد. این محو شدن حتی در حالت سنجاقشده هم اتفاق میافتد.
- حرکت آن نسبت به اسکرول کندتر است تا جلوه عمق (پارالاکس) ایجاد شود.
- اگر روی تصویر متن دارید، یک لایه تیره نیمهشفاف روی آن بگذارید تا متن خوانا بماند.
- فقط یک فضای منعطف استفاده میشود؛ اگر چند آیتم را از این نوع کنید، آخرین مورد اعمال میشود.
- سایز آیکون: ۲۴ پیکسل — مقدار پیشفرض ویجت دکمه ۴۸ است و حتماً باید به ۲۴ تغییر کند، وگرنه دکمه نسبت به نوار ابزار بزرگ دیده میشود.
- حاشیه: ۱۲ پیکسل از چپ و راست — با این مقدار ناحیه لمسی دکمه ۴۸×۴۸ میشود که حداقل اندازه استاندارد برای لمس راحت است و فاصله مناسب بین چند دکمه را هم ایجاد میکند.
- مجموع سایز آیکون و حاشیه بالا و پایین نباید از ۵۶ پیکسل (ارتفاع نوار) بیشتر شود.
- بهتر است زمینه دکمه بدون رنگ باشد تا رنگ نوار ابزار پشت آن دیده شود.
تنظیمات نقش مانا
«مانا» هدری است که با اسکرول بین حداقل و حداکثر ارتفاع تغییر اندازه میدهد.
| تنظیم | توضیح |
|---|---|
| شناور بودن | با اسکرول به پایین بلافاصله دوباره ظاهر میشود |
| سنجاق شده | پس از رسیدن به بالای صفحه، در همانجا باقی میماند |
| حداقل ارتفاع | ارتفاع هدر در حالت جمعشده |
| حداکثر ارتفاع | ارتفاع هدر در حالت باز |
اگر «سنجاق شده» خاموش باشد، هدر پس از رسیدن به حداقل ارتفاع از صفحه خارج میشود.
کل محتوای گروهی که نقش مانا دارد بهعنوان بدنه هدر نمایش داده میشود. محتوا را طوری بچینید که هم در حداکثر ارتفاع و هم در حداقل ارتفاع قابل قبول دیده شود.
تنظیمات نقش لیست
نقش لیست تنظیم جداگانهای ندارد؛ آیتمهای گروه به ترتیب و بهصورت عمودی داخل بدنه اسکرول قرار میگیرند و همراه بقیه بخشها اسکرول میشوند.
برای بخشهای مختلف صفحه میتوانید چند گروه با نقش لیست بسازید و بین آنها هدر مانا قرار دهید.
خطاهای رایج
پنل هنگام طراحی این موارد را به شما اطلاع میدهد؛ اگر نادیده گرفته شوند، آن بخش در اپ ساخته نمیشود:
- نقش انتخاب نشده است: هر فرزند گروه اسلیور باید یکی از سه نقش نوار ابزار، مانا یا لیست را داشته باشد.
- آیتم نوار ابزار یا لیست، گروه نیست: این دو نقش فقط روی گروه معنا دارند، چون محتوای گروه است که استفاده میشود.
- گروه خالی است: گروهی که نقش نوار ابزار یا لیست دارد باید حداقل یک آیتم داشته باشد.
- حداکثر ارتفاع منعطف کمتر از ۵۶ است: در این حالت فضای منعطف هیچوقت دیده نمیشود.
- قرار گرفتن گروه اسلیور در گروهی با اندازه «به اندازه محتوا»: گروه اسلیور باید عرض و ارتفاع مشخص (به اندازه والد) داشته باشد.
نکات طراحی و تست
- ساده شروع کنید: یک نوار ابزار و یک لیست کافی است؛ بعد فضای منعطف و هدر مانا را اضافه کنید.
- بعد از هر تغییر، اسکرول را در شبیهساز بالا و پایین کنید تا رفتار جمع شدن و سنجاق ماندن را ببینید.
- ترکیب «شناور بودن» و «سنجاق شده» را روی دستگاه واقعی هم تست کنید؛ حس این حرکت روی گوشی بهتر ارزیابی میشود.
- اگر تصویر فضای منعطف سنگین است، حجم آن را کم کنید تا اسکرول روان بماند.
- گروه اسلیور اسکرول خودش را دارد؛ آن را داخل یک گروه اسکرولپذیر دیگر نگذارید تا دو اسکرول با هم تداخل نکنند.