انیمیشن پیشرفته Floating Action Button

سلام دوستان؛

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

اولین گام در ساخت این منو، طراحی وساخت سه دکمه menu است.

تمامی دکمه ها نامرئی هستند و زیر (floating action button(fab قرار دارند.

ابتدا یک فایل xml با نام  fab_layout میسازیم و کدهای زیر را در آن قرار می دهیم.

 

 

این layout را در activity مورد نظر و پایین FAB به صورت زیر فراخوانی کنید.

اکنون طرح آماده شده است، گام بعد ساخت انیمیشن برای نمایش و پنهان کردن هریک از دکمه ها است.

 

×توجه! در هنگام ایجاد انیمیشن، من با مشکل FABهای کوچک مواجه شدم. زمانی که انیمیشن به صورت کامل انجام می شود در واقع فقط مکان FABها تغییر می کند و شما با مشکل تاچ این FAB ها مواجه می شوید، راه حلی که من برای این مشکل پیدا کردن این بود که در زمان اجرای انیمیشن موقعیت FABها را به مکان جدیدی منتقل کنم و سپس از آنها استفاده کنم.

در ادامه روند جابه جایی یکی از دکمه ها را نشان میدهم، این اندازه برای هریک از دکمه های بسته به موقعیت آنها متفاوت است.

 

نمایش Floating Action Button menu

در اینجا من fab1 را به دادن حاشیه های(فاصله نسبت به حاشیه صفحه)  راست و پایین و همچنین دادن انیمیشن به حرکت در آورده ام.

 

پنهان کردن Floating Action Button menu

فرایند پنهان کردن، معکوس بخش قبلی است.

نکته: من قابلیت کلیک کردن را فقط در حالت نمایش(حالت اول) فعال کرده ام.

 

انیمیشنی که برای این FAB مورد نیاز است به صورت زیر می  باشد:

 

در حال حاضر تنها چیزی که باقیمانده است، اسخت انیمیشن ها است. در مسیر res/anim/ folder من تمام انیمیشن های مورد نیاز برای پروژه را ساخته ام.

در fab1_show.xml :

 

در fab1_hide.xml :

 

در نهایت اگر شما به تگ  translate نگاه کنید متوجه خواهید شد که fab1 با استفاده از مقادیر (۱۷۰% و ۲۵%) تغییر می کند این مقادیر برای fab2 و fab3 به صورت (۱۵۰% و ۱۵۰%) برای fab2 و (۲۵% و ۱۷۰%) برای fab3 خواهند بود.

پروژه در نهایت به صورت زیر خواهد بود:

Final project

 

انیمیشن ها و حالات متحرک زیادی برای floating action button قرار دارند که می توانید از آنها استفاده کنید.

در آموزش های آینده سعی میشود تا تعدادی از این انیمیشن ها آموزش داده شود.

موفق و باانرژی باشید 🙂

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

عضو می‌شوم:)

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

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

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

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

  1. […] به یک Floating Action Button به صورت ابتدایی انیمیشن بدهیم و در قسمت دوم این انیمیشن ها را به صورت حرفه ای پیاده سازی خواهیم […]

  2. mojtaba
    ۸:۵۴ ۱۳۹۶/۱۰/۲۱

    با سلام خدمت admin عزیز من یه سوال ازتون داشتم که من در اول اسم گذاری اندروید استودیو مشکل دارم مثلا : فارسی تایپ میکنم اما قبول نمی کنه لطفا جوابشو بهم بگین (- ;

    • امیر زنگی آبادی
      ۱۲:۱۷ ۱۳۹۶/۱۱/۲۰

      باسلام
      ممنون از حمایت های شما
      در ابتدا باید اسم پروژه را حتما و حتما به زبان انگلیسی بنویسید و از طریق فایل Strings.xml اقدام به فارسی نمودن و تغییر نام کنید.

  3. سیدعلیرضاحسینی
    ۱۱:۱۰ ۱۳۹۶/۱۰/۲۶

    سلام
    ممنونم بابت توضیح کاملی که درباره spinner گذاشته اید
    من میخوام یه spinner داشته باشم که در نگاه اول خالی باشه یعنی هیچ رکوردی انتخاب نشده باشه و کاربر مجبور به انتخاب یه رکورد باشه ولی نمیخوام وقتی spinner رو باز کرد اون رکورد خالی دیده بشه.
    میتونید کمکم کنید ؟
    ممنون

    • امیر زنگی آبادی
      ۱۲:۲۳ ۱۳۹۶/۱۱/۲۰

      باسلام
      تشکر از حمایت شما.
      برای ساخت spinner که مد نظرتون هست باید اقدام به ساخت Spinner به صورت custom بکنید

  4. گمنام
    ۱۱:۳۵ ۱۳۹۶/۱۱/۱۰

    مقاله خوبی بود

  5. سبحان
    ۱۱:۳۶ ۱۳۹۶/۱۱/۱۰

    مقاله فوق العاده ای بود
    موفق باشید