Теперь, когда библиотека поддержки дизайна Android отсутствует, кто-нибудь знает, как реализовать расширенное меню Fab с ней, например, fab в приложении "Входящие"?
Должно выглядеть так:
Меню поддержки поддержки Android Design Library (FAB)
Ответ 1
В настоящее время в библиотеке дизайна нет виджета. Единственный способ сделать это быстро и легко - это использовать сторонние библиотеки.
Очевидно, вы можете это сделать и с помощью Библиотеки дизайна, но это будет огромная работа и потребует много времени. Я упомянул некоторые полезные библиотеки, которые помогут вам в этом.
- Быстрая плавающая кнопка (wangjiegulu)
- Плавающая кнопка действия (Кланы)
- Плавающая кнопка действия (makovkastar)
- Android Плавающая кнопка действий (futuresimple)
Я использую 4-й.
Ответ 2
Немного поздно ответить на это, но я получил лучший подход к реализации анимационного меню FAB без использования какой-либо библиотеки или для написания огромного xml-кода для анимации. надеюсь, что это поможет в будущем для тех, кому нужен простой способ реализовать это.
Итак, довольно просто использовать функцию animimate(). translationY(), вы можете анимировать FAB вверх или вниз только в моем нижнем коде, check полный код в github.
сначала определите все ваши 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();
}
}
});
Теперь используйте анимацию(). 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
Ответ 3
-
Сначала создайте макеты меню в xml файле вашего макета. Напр. линейная компоновка с горизонтальной ориентацией и включает TextView для затем нажмите кнопку "Плавающее действие" рядом с TextView.
-
Создайте макеты меню в соответствии с вашими потребностями и количеством.
-
Создайте базовую плавучую кнопку действия и ее щелчок которого изменит видимость макетов меню.
Пожалуйста, ознакомьтесь с приведенным ниже кодом для справки и для получения дополнительной информации о моем проекте из github
<android.support.constraint.ConstraintLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.app.fabmenu.MainActivity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/baseFloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:onClick="@{FabHandler::onBaseFabClick}"
android:tint="@android:color/white"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="@+id/activity_main"
app:layout_constraintRight_toRightOf="@+id/activity_main"
app:srcCompat="@drawable/ic_add_black_24dp" />
<LinearLayout
android:id="@+id/shareLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="@+id/createLayout"
app:layout_constraintLeft_toLeftOf="@+id/createLayout"
app:layout_constraintRight_toRightOf="@+id/activity_main">
<TextView
android:id="@+id/shareLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="@drawable/shape_fab_label"
android:elevation="2dp"
android:fontFamily="sans-serif"
android:padding="5dip"
android:text="Share"
android:textColor="@android:color/white"
android:typeface="normal" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/shareFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:onClick="@{FabHandler::onShareFabClick}"
android:tint="@android:color/white"
app:fabSize="mini"
app:srcCompat="@drawable/ic_share_black_24dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/createLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="@+id/baseFloatingActionButton"
app:layout_constraintRight_toRightOf="@+id/activity_main">
<TextView
android:id="@+id/createLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="@drawable/shape_fab_label"
android:elevation="2dp"
android:fontFamily="sans-serif"
android:padding="5dip"
android:text="Create"
android:textColor="@android:color/white"
android:typeface="normal" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/createFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:onClick="@{FabHandler::onCreateFabClick}"
android:tint="@android:color/white"
app:fabSize="mini"
app:srcCompat="@drawable/ic_create_black_24dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Это анимация -
Открытие анимации меню FAB:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="300"
android:fromXScale="0"
android:fromYScale="0"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1" />
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
Закрытие анимации меню FAB:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="300"
android:fromXScale="1"
android:fromYScale="1"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.0"
android:toYScale="0.0" />
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
Затем в моей работе я просто использовал анимацию выше, чтобы показать и скрыть меню 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;
}
Вот класс 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();
}
}
Вот скриншоты
Ответ 4
Когда я попытался создать что-то simillar для кнопки с плавающей кнопкой "Входящие", я подумал о создании собственного настраиваемого компонента.
Это будет простая компоновка фрейма с фиксированной высотой (чтобы содержать расширенное меню), содержащую кнопку FAB и еще 3, помещенные под FAB. когда вы нажимаете на FAB, вы просто просто анимируете другие кнопки для перевода из-под FAB.
Есть несколько библиотек, которые делают это (например https://github.com/futuresimple/android-floating-action-button), но всегда интересно, если вы создаете его самостоятельно:)
Ответ 5
Вы можете использовать библиотеку FloatingActionMenu или нажмите здесь для пошагового руководства. Вывод учебника:
Ответ 6
Я использую эту библиотеку для этого: https://github.com/futuresimple/android-floating-action-button
Довольно проста в использовании;)
Ответ 7
Внедрить материальный лист Android FAB
Библиотека материалов FAB для Android, которая реализует кнопку плавающего действия для перехода листа из документации по дизайну материалов Google. Он может использоваться с любой библиотекой FAB на Android 4.0+ (уровни API >= 14).
Gradle
Добавьте зависимость (доступную от mavenCentral и jcenter) к вашему build.gradle:
compile 'com.gordonwong:material-sheet-fab:1.2.1'
Внедрить FAB:
Вы можете использовать любую библиотеку FAB, если она реализует интерфейс AnimatedFab.
public class Fab extends FloatingActionButton implements AnimatedFab
Инициализировать MaterialSheetFab:
Это может быть в вашей деятельности или фрагменте.
Fab fab = (Fab) findViewById(R.id.fab);
View sheetView = findViewById(R.id.fab_sheet);
View overlay = findViewById(R.id.dim_overlay);
int sheetColor = getResources().getColor(R.color.fab_sheet_color);
int fabColor = getResources().getColor(R.color.fab_color);
// Initialize material sheet FAB
materialSheetFab = new MaterialSheetFab<>(fab, sheetView, overlay,
sheetColor, fabColor);
См. полный учебник по этой библиотеке в TellMeHow.Co