Меню поддержки поддержки Android Design Library (FAB)

В настоящее время в библиотеке дизайна нет виджета. Единственный способ сделать это быстро и просто – это использовать сторонние библиотеки.

Вы, очевидно, можете это сделать и с помощью Библиотеки дизайна, но это будет огромная работа и потребует много времени. Я упомянул некоторые полезные библиотеки, которые могут помочь вам в этом.

1. Быстрая плавающая кнопка (wangjiegulu)
2. Плавающая кнопка действия (кланы)
3. Плавающая кнопка действия (маковкастар)
4. Кнопка плавающего действия Android (futuresimple)

Я использую 4-й.

На это немного поздно ответить, но у меня есть лучший подход к реализации анимационного меню FAB без использования какой-либо библиотеки или для написания огромного XML-кода для анимации. надеюсь, что это поможет в будущем для тех, кому нужен простой способ реализовать это.

Поэтому довольно просто использовать функцию animimate (). TranslationY (), вы можете анимировать FAB вверх или вниз, только что я сделал в своем нижнем коде, проверьте полный код в github .

сначала определите все свои FAB в одном и том же месте, чтобы они перекрывали друг друга, помните, что в верхней части FAB должно быть указано, что вы хотите щелкнуть и показать другое. например:

Теперь в вашем classе 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(); } } }); 

Теперь используйте анимацию (). 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, как показано ниже:

  55dp 105dp 155dp 

Надеемся, что это решение поможет людям в будущем, которые ищут простое решение.

РЕДАКТИРОВАНИЕ

Если вы хотите добавить ярлык поверх FAB, просто возьмите горизонтальный LinearLayout и поместите FAB с текстом в качестве метки и анимируйте макеты, если найдете какие-либо проблемы с этим, вы можете проверить мой пример кода в github, я передал всю обратную совместимость проблемы в этом примерном коде. проверьте мой пример кода для FABMenu в Github

для закрытия FAB в режиме Backpress, переопределите onBackPress () как показано ниже:

  @Override public void onBackPressed() { if(!isFABOpen){ this.super.onBackPressed(); }else{ closeFABMenu(); } } 

Скриншот имеет название также с FAB, потому что я беру его из своего примера приложения, представленного ingithub

• Сначала создайте макеты меню в xml-файле вашего макета. Например, для линейной компоновки с горизонтальной ориентацией и include TextView для метки, а затем кнопку Floating Action рядом с TextView.

• Создайте макеты меню в соответствии с вашими потребностями и количеством.

• Создайте базовую плавучую кнопку действия и по ее щелчку измените видимость макетов меню.

Пожалуйста, ознакомьтесь с приведенным ниже кодом для справки и для получения дополнительной информации о моем проекте от github

Оформить заказ проекта от Github

Это анимация –

Открытие анимации меню FAB:

Закрытие анимации меню FAB:

Затем в моей работе я просто использовал анимацию выше, чтобы показать и скрыть меню FAB:

Показать меню Fab:

  private void expandFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabOpenAnimation); binding.shareLayout.startAnimation(fabOpenAnimation); binding.createFab.setClickable(true); binding.shareFab.setClickable(true); isFabMenuOpen = true; } 

Закрыть Меню Fab:

 private void collapseFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabCloseAnimation); binding.shareLayout.startAnimation(fabCloseAnimation); binding.createFab.setClickable(false); binding.shareFab.setClickable(false); isFabMenuOpen = false; } 

Вот class Activity –

 package com.app.fabmenu; import android.databinding.DataBindingUtil; import android.os.Bundle; import android.support.design.widget.Snackbar; import android.support.v4.view.ViewCompat; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.OvershootInterpolator; import com.app.fabmenu.databinding.ActivityMainBinding; public class MainActivity extends AppCompatActivity { private ActivityMainBinding binding; private Animation fabOpenAnimation; private Animation fabCloseAnimation; private boolean isFabMenuOpen = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); binding = DataBindingUtil.setContentView(this, R.layout.activity_main); binding.setFabHandler(new FabHandler()); getAnimations(); } private void getAnimations() { fabOpenAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_open); fabCloseAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_close); } private void expandFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabOpenAnimation); binding.shareLayout.startAnimation(fabOpenAnimation); binding.createFab.setClickable(true); binding.shareFab.setClickable(true); isFabMenuOpen = true; } private void collapseFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabCloseAnimation); binding.shareLayout.startAnimation(fabCloseAnimation); binding.createFab.setClickable(false); binding.shareFab.setClickable(false); isFabMenuOpen = false; } public class FabHandler { public void onBaseFabClick(View view) { if (isFabMenuOpen) collapseFabMenu(); else expandFabMenu(); } public void onCreateFabClick(View view) { Snackbar.make(binding.coordinatorLayout, "Create FAB tapped", Snackbar.LENGTH_SHORT).show(); } public void onShareFabClick(View view) { Snackbar.make(binding.coordinatorLayout, "Share FAB tapped", Snackbar.LENGTH_SHORT).show(); } } @Override public void onBackPressed() { if (isFabMenuOpen) collapseFabMenu(); else super.onBackPressed(); } } 

Вот скриншоты

Еще одна библиотека, использующая Speed ​​Dial из Руководства по дизайну материалов:

https://github.com/leinardi/FloatingActionButtonSpeedDial

Когда я попытался создать что-то simillar для кнопки «Входящие плавающие действия», я подумал о создании собственного настраиваемого компонента.

Это была бы простая компоновка фрейма с фиксированной высотой (чтобы содержать расширенное меню), содержащую кнопку FAB, и еще 3 – под FAB. когда вы нажимаете на FAB, вы просто просто анимации других кнопок для перевода из-под FAB.

Есть некоторые библиотеки, которые делают это (например, https://github.com/futuresimple/android-floating-action-button ), но всегда интересно, если вы создаете его самостоятельно 🙂

Вы можете использовать библиотеку FloatingActionMenu или щелкнуть здесь пошаговое руководство. Вывод учебника:

Я использую эту библиотеку для этого: https://github.com/futuresimple/android-floating-action-button

Довольно проста в использовании;)