واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

متحرک سازی Floating Action Button در اندروید

دسته‌بندی: آموزش
مهر ۳, ۱۳۹۷

متحرک سازی Floating Action Button در اندروید

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

 

در این مقاله کار با FAB و متحرک سازی Floating Action Button را به سادگی فرا می گیرید ، این اقدام با اضافه کردن یک FAB به پروژه اندروید شروع خواهد شد.

 

بهتر است بدانید که محل قرار گیری Floating Action Button  یا همان دکمه اکشن شناور در فایل لی اوت خواهد بود و در صورتی که  پروژه اندروید استودیو ای با Blank Activity بسازید خود به خود ایجاد می شود.

 

ساخت Floating Action Button

 

android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

android:src="@android:drawable/ic_menu_help"

/

 

متحرک سازی Floating Action Button

دکمه Floating Action Button و یا اکشن شناور(FAB) در دو اندازه در دسترس هستند، به صورت پیش فرض اندازه ی آن ها ۵۶dp بوده و اندازه کوچک آن ۴۰dp است.

 

تعداد زیادی از اپلیکیشن های اندروید ای که به تازگی انتشار یافته اند از  FBA استفاده می کنند.  FAB به یک فهرست اسکرولینگ از عناصر واکنش خواهد داشت و باید در زمان اسکرول کردن نیز مخفی باشد، اینگونه:

 

ساخت Floating Action Button

 

در تصویر بالا ابتدا یک recyclerView تولید شده است و در نتیجه Floating Action Button می تواند به اسکرولینگ انجام شده  واکنش نشان دهد.

 

کتابخانه های گوناگونی انجام این کار را برای شما آسان می کند و تنها با ۱ یا ۲ خط کد می توانید آنها را درست کنید، به این مثال توجه کنید:

 

public class FAB_Hide_on_Scroll extends FloatingActionButton.Behavior {

public FAB_Hide_on_Scroll(Context context, AttributeSet attrs) {

super();

}

@Override

public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {

super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);

//child -> Floating Action Button

if (child.getVisibility() == View.VISIBLE && dyConsumed > 0) {

child.hide();

} else if (child.getVisibility() == View.GONE && dyConsumed < 0) { child.show(); } } @Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) { return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL; } }

 

در این قسمت باید از کلاس ()FloatingActionButton.Behavior استفاده نماییم که برای حرکت دادن ویوهای FloatingActionButton به کار می رود و هیچ Snackbars نمی تواند آن را ساپورت کند.

 

به این دلیل که کلاس اکستند شده حال می شود عملیات مورد نظر خود را انجام داد.

 

هنگام انجام عملیات اسکرولینگ متد ()onStartNestedScroll این کلاس اگر اسکرول عمودی بود مقدار true را بازمی گرداند و متد ()onNestedScroll مخفی کننده و یا نمایش دهنده ی دکمه اکشن شناور با توجه به وضعیت کنونی آن می باشد.

 

public FAB_Hide_on_Scroll(Context context, AttributeSet attrs) { super(); }

 

برای به کار بردن این عملیات ویژگی layout_behavior را به Floating Action Button  اضافه نمایید. این ویژگی دارای نام پکیج و نام کلاس می باشد، در اصل موقعیت مشخص این کلاس در پروژه را تعیین می کند.

 

به این شکل:

 

app:layout_behavior="com.valdio.valdioveliu.floatingactionbuttonproject.Scrolling_Floating_Action_Button.FAB_Hide_on_Scroll"

 

این تصویر جالب است اما ما قادر خواهیم بود آن را جالبتر نیز بکنیم، مثلا می شود در زمان اسکرول در محتوای اپلیکیشن FAB را به بیرون صفحه هدایت کرد.

 

متحرک سازی Floating Action Button

 

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

 

با دقت کردن در کد زیر متوجه می شوید که  View.VISIBLE و View.GONE در عبارت شرطی حذف می شوند، چرا که ویو در این شکل مخفی نشده و فقط در صفحه شناور می شود.

همچنین ببینید :   ایجاد پروژه جدید در اندروید استودیو | Hello World

 

public class FAB_Float_on_Scroll extends FloatingActionButton.Behavior { public FAB_Float_on_Scroll(Context context, AttributeSet attrs) { super(); } @Override public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); //child -> Floating Action Button

if (dyConsumed > 0) {

CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) child.getLayoutParams();

int fab_bottomMargin = layoutParams.bottomMargin;

child.animate().translationY(child.getHeight() + fab_bottomMargin).setInterpolator(new LinearInterpolator()).start();

} else if (dyConsumed < 0) {

child.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();

}

}

@Override

public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {

return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;

}

}

 

ساخت منویی از دکمه های اکشن شناور

 

بعد از ساخت Floating Action Button  مورد دیگری که به آن می پردازیم این است که در برخی اپلیکیشن های اندروید از دکمه های اکشن شناور  Floating Action Button برای ایجاد منوهای خود استفاده می کنند. مانند :

 

متحرک سازی Floating Action Button

 

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

 

اولین فرم ایجاد لایاوت دربرگیرنده ۳ دکمه کوچک باشد.

 

توجه داشته باشید که دکمه ها مخفی بوده و در زیر لایاوت هستند، یعنی در زیر FAB اولیه.

 

در داخل fab_layout.xml

 

FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

android:src="@android:drawable/ic_menu_compass"

android:visibility="invisible"

app:backgroundTint="@color/colorFAB"

app:fabSize="mini" />

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

android:src="@android:drawable/ic_menu_myplaces"

android:visibility="invisible"

app:backgroundTint="@color/colorFAB"

app:fabSize="mini" />

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab_3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

android:src="@android:drawable/ic_menu_share"

android:visibility="invisible"

app:backgroundTint="@color/colorFAB"

app:fabSize="mini" />

</FrameLayout>

 

این لایاوت را در اکتیویتی و در زیر FAB می گذاریم.

 

<include layout="@layout/fab_layout" />

 

حال که لایاوت ایجاد شد باید اقدام به ساخت انیمیشن ها به منظور نمایش و مخفی سازی FAB های کوچک نماییم.

 

توجه توجه

 

در زمان ایجاد این انیمیشن ها ایونت های تاچ و FAB های کوچک برای شما مشکل ساز می شود.

 

وقتی انیمیشن تمام شد مکان حقیقی FAB های کوچک تفاوتی نمی کند، فقط ویو در مکان جدید ایجاد می شود، برای همین می توانید به اجرای ایونت های تاچ در مکان صحیح ادامه دهید.

 

برای برطرف کردن این اشکال باید پارامترهای لایاوت هریک از FAB ها به موقعیت جدید ست شده و با کشیدن ویو به موقعیت جدید انیمیشن اجرا شود.

 

نمایش منوی دکمه های اکشن شناور

 

FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fab1.getLayoutParams();

layoutParams.rightMargin += (int) (fab1.getWidth() * 1.7);

layoutParams.bottomMargin += (int) (fab1.getHeight() * 0.25);

fab1.setLayoutParams(layoutParams);

fab1.startAnimation(show_fab_1);

fab1.setClickable(true);

 

در این قسمت خواهید دید که fab1 با افزودن حاشیه های راست و پایین به layoutParams جایش عوض شده است.

 

روش مخفی نمودن دکمه های اکشن شناور

 

FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fab1.getLayoutParams();

layoutParams.rightMargin -= (int) (fab1.getWidth() * 1.7);

layoutParams.bottomMargin -= (int) (fab1.getHeight() * 0.25);

fab1.setLayoutParams(layoutParams);

fab1.startAnimation(hide_fab_1);

fab1.setClickable(false);

 

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

 

//Animations

Animation show_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_show);

Animation hide_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_hide);

 

درون فولدر /res/anim فایل هایی برای تمامی انیمیشن ها ایجاد شده است.

 

درون fab1_show.xml:

 

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true">

<!-- Rotate -->

<rotate

android:duration="500"

android:fromDegrees="30"

android:interpolator="@android:anim/linear_interpolator"

android:pivotX="50%"

android:pivotY="50%"

android:repeatCount="4"

android:repeatMode="reverse"

android:toDegrees="0"></rotate>

<!--Move-->

<translate

android:duration="1000"

android:fromXDelta="170%"

android:fromYDelta="25%"

android:interpolator="@android:anim/linear_interpolator"

android:toXDelta="0%"

android:toYDelta="0%"></translate>

<!--Fade In-->

<alpha

android:duration="2000"

android:fromAlpha="0.0"

android:interpolator="@android:anim/decelerate_interpolator"

android:toAlpha="1.0"></alpha>

</set>

 

درون  fab1_hide.xml:

 

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true">

<!--Move-->

<translate

android:duration="1000"

android:fromXDelta="-170%"

android:fromYDelta="-25%"

android:interpolator="@android:anim/linear_interpolator"

android:toXDelta="0%"

android:toYDelta="0%"></translate>

<!--Fade Out-->

<alpha

android:duration="2000"

android:fromAlpha="1.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="0.0"></alpha>

</set>

 

در صورتی که  به تگ ترنزلیت که برای جابجایی ویو به کار رفته است، فاکتوری که توسط آن جابجایی (۱۷۰% و ۲۵%) FAB انجام شده با فاکتورهایی از حاشیه ها مطابقت دارد که در کد جاوا اضافه و حذف می شوند.

 

عملیات شبیه به این  برای FAB نیز انجام می شود، اما با فاکتورهای جابجایی (۱۵۰% و ۱۵۰%) fab2 و (۲۵% و ۱۷۰%) fab3.

 

در آخر پروژه ما این گونه می شود:

 

پیام بگذارید


تومان