ساخت Floating Action Button

ساخت Floating Action Button

بررسی اجمالی


Floating Action Button یا (FAB) یک عنصر مخصوص جهت انجام فعالیت ها است. که به وسیله آیکون های دایره ای مشخص شده است و  شامل رفتارهای خاصی از قبیل شکلگیری، راه اندازی و انتقال به مکانی دیگر میباشد.

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

mobcollege

استفاده


گوگل در Google I/O 2015 کتابخانه پشتیبانی برای ایجاد Floating Action Button در دسترس قرار داده است.در گذشته، سه کتابخانه از قبیل makovkastar/FloatingActionButton و  futuresimple/android-floating-action-button استفاده میشدند.

آیکون Floating Action Button

در Floating Action نیز از آیکون های یکسانی همانند منو که در بالای صفحه میباشد استفاده می شود. این بدین معنی است که تصویر باید تک رنگ و متناسب با دستورالعمل های طراحی باشد، بهترین منبع برای انتخاب آیکون سایت طراحی آیکون که از سایت های گوگل است میباشد.

mobcollege mobcollege (2)

شما میتوانید با انتخاب ایکون مورد نظر و کلیک برروی آن ایکون را دانلود و استفاده کنید.

کتابخانه Design

شما باید کتابخانه Desing را درbulid.gradle به صورت’ compile ‘com.android.support:design:X.X.X اضافه کنید که به صورت میباشد.

اکنون شما باید قادر باشید که android.support.design.widget.FloatingActionButton را به فایل xml. خود اضافه کنید.

در قسمت src شما باید آدرس ایکونی که قصد نمایش انرا دارید قرار دهید

برای قرار دادن Floating Action Button ما از یک  CoordinatorLayout استفاده خواهیم کرد. در این مثال ما یک ListView نیز خواهیم داشت که دکمه ما بر روی قرار خواهد گرفت و به صورت زیر میباشد.

دکمه باید در پایین صفحه و درگوشه سمت چپ قرار بگیرد. margin پیشنهادی برای دکمه ۱۶dp برای گوشی و ۲۴dp برای تبلت ها میباشد، در مثال بالا ۱۶dp مورد استفاده قرار گرفته است.

در واقع سایز آیکون باید برا اساس دستورات گوگل ۲۴dp باشد.

mobcollege (3)


دادن انیمیشن به Floating Action Button

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

برای دادن انیمیشن به این بخش، شما باید از مزیت CoordinatorLayout بهره ببرید که به شما کمک میکند تا انیمیشن و حرکت را تشخیص دهید.

تبدیل ListView به RecycleView

در واقع شما نیاز دارید که از یک RecycleView به جای ListView استفاده کنید. RecycleView موفق تر از ListView در مطالب شرح داده شده در این بخش خواهد بود.

برای استفاده از RecycleView شما باید کتابخانه آنرا به build.gradle خود اضافه کنید.

شما باید RecycleView خود را به نسخه  v22 بروزرسانی کنید، چرا که نسخه های قبلی از CoordinatorLayout پشتیبانی نمیکنند

حال شما قادر خواهید بود که از RecycleView استفاده کنید کنید که به صورت زیر میباشد.

استفاده از coordinatorLayout

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

ما یک فایل جاوا به نامScrollAwareFABBehavior.java میسازیم که از FloatingActionButton.Behavior ارث بری میکند و به صورت زیر است:

برای اینکه پیمایش صفحه توسط این کلاس مدیریت خواهد شد ما از یک کلاس مجزا با نام ()onNestedScroll استفاده خواهیم کرد.

در اپدیت اخیر کتابخانه support v4  متد های ()show و ()hide در دسترس قرار گرفته اند و به راحتی میتوان از آنها در خروج و ورود دکمه بهره برد.

این قدم نهایی برای وابسته کردن coordinatorLayout به Floating Action Button میباشد. ما میتوانیم آنرا درون فایل Xml و از طریق یکی از ویژگی ها تعریف کنیم.

تگ های المان های اصلی را با Coordinator Layout جابه جا کنید. این کار به ما کمک خواهد کرد که بتوان از کلاس ()onNestedScroll  به راحتی استفاده کرد.

به دلیل اینکه behavior را از طریق xml تعریف میکنیم باید یک سازنده تعریف کنیم تا layout ما به درستی کار کند.

اگر شما قدم نهایی را فراموش بکنید با خطای Could not inflate Behavior subclass روبرو میشوید.شما میتوانید در اینجا کدها را به صورت کامل مشاهده کنید.

مدرس و برنامه‌نویس اندروید. تمام تجربه‌هایم را با شما شریک می‌شوم و دوستت دارم بتوانم با کمک و همراهی همه دوستان یک مرجع کامل فارسی برای برنامه‌نویسی اندروید ایجاد کنم.

عضو می‌شوم:)

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

۵ دیدگاه برای این مطلب ثبت شده است

  1. […] تعدادی از اجزاء اسان تر کرده است مانندnavigation drawer، floating action button، snackbar، tabs، floating labels و انیمیشن ها که توسط این کتابخانه […]

  2. […] از آموزش های طراحی رابط کاربری مانند floating Button, Snackbar, Tab و…برای ظاهر نرم افزارتان استفاده […]

  3. […] فایل Mainactivity.java را بازکنید و کدهای زیر را برای کلیک FAB قرار […]

  4. […] اینجا فرض من بر این است که شما روش ساخت Floating Action Button را در دروس قبل به خوبی یاد گرفته اید. یک پروژه جدید در […]

  5. […] این قسمت از آموزش فرض من بر این است که شما نحوه ساخت floating action button و آموزش انیمیشن دادن به floating action button را مطالعه کرده […]