У вас є кращий підхід до впровадження анімаційного меню FAB без використання бібліотеки або написання величезного коду XML для анімації. сподіваюся, що це допоможе в майбутньому тому, хто потребує простого способу втілення цього.
Використовуючи animate().translationY()функцію, ви можете анімувати будь-який вид вгору або вниз, як я це зробив у своєму коді нижче, перевірити повний код у github . Якщо ви шукаєте той самий код у kotlin, ви можете оформити код kotlin repo Animating FAB Menu .
спочатку визначте всі свої FAB в одному місці, щоб вони перекривались один з одним, пам’ятайте, зверху FAB повинен бути таким, що ви хочете натиснути та показати інше. наприклад:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_menu_camera" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_dialog_map" />
<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"
app:srcCompat="@android:drawable/ic_dialog_email" />
Тепер у вашому класі java просто визначте всі свої FAB та виконайте клацання, як показано нижче:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);
fab3 = (FloatingActionButton) findViewById(R.id.fab3);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isFABOpen){
showFABMenu();
}else{
closeFABMenu();
}
}
});
Використовуйте animation().translationY()для анімації свого FAB, я вважаю за краще використовувати атрибут цього методу в DP, оскільки лише використання int вплине на сумісність дисплея з більшою роздільною здатністю або меншою роздільною здатністю. як показано нижче:
private void showFABMenu(){
isFABOpen=true;
fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}
private void closeFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
Тепер визначте вищезазначений вимір усередині res-> values-> dimens.xml, як показано нижче:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Ось і вся надія, що це рішення допоможе людям у майбутньому, які шукають простого рішення.
ВИДАЛЕНО
Якщо ви хочете додати мітку через FAB, тоді просто візьміть горизонтальний LinearLayout і поставте FAB з текстовим переглядом як мітку, і анімуйте макети, якщо знайдете якісь проблеми з цим, ви можете перевірити мій зразок коду в github, я обробив всю зворотну сумісність проблеми в цьому зразковому коді. перевірити мій зразок коду для FABMenu в Github
щоб закрити FAB на Backpress, замініть onBackPress (), як показано нижче:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
Скріншот має назву, як і у FAB, тому що я беру його з мого прикладу прикладу ingithub
