如何使用真正的浮动操作按钮（FAB）扩展？

android java floating-action-button

2022-09-02 00:48:04

为了消除对重复的任何疑问或想法：在材料设计上定义了什么是“扩展”。

但大多数人将“扩展”与“转换类型：快速拨号”混淆，这使得很难找到解决方案。喜欢这里

问题因此，我所期待的是如何用文本和扩展大小设置FAB。

今天我的代码是这样的：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/maps_main_distance_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:text="@string/str_distance_btn"
    app:elevation="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

但我的按钮看起来像这样：

没有文本，没有正确的格式。我在约束布局中使用它。

答案 1

在 Gradle 文件中添加依赖项：

implementation 'com.google.android.material:material:1.1.0-alpha04'

在您的 xml 文件中：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_margin="@dimen/fab_margin"
            android:text="Create"
            app:icon="@drawable/outline_home_24" />

答案 2

您可以创建一个实用程序类，该类使用将 a 动画转换为扩展。首先需要声明 in xml 中的两个状态，然后使用在它们之间进行动画处理。MaterialButtonFloatingActionButtonConstraintLayoutMaterialButtonTransitionManager

你可以在这里阅读一篇关于它的媒体文章，同时，我会在这里添加一些相关的代码。

已折叠的 FAB 状态：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_fab"
    android:elevation="8dp">

    <android.support.design.button.MaterialButton
        android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="56dp"
        android:layout_height="56dp"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

扩展的 FAB 状态：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="8dp"
    android:background="@drawable/bg_fab">

    <android.support.design.button.MaterialButton
        android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

背景可绘制：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="56dp" />
</shape>

以及相关的 Java 扩展代码：

private void setExtended(boolean extended, boolean force) {
    if (isAnimating || (extended && isExtended() && !force)) return;

    ConstraintSet set = new ConstraintSet();
    set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);

    TransitionManager.beginDelayedTransition(container, new AutoTransition()
            .addListener(listener).setDuration(150));

    if (extended) button.setText(currentText);
    else button.setText("");

    set.applyTo(container);
}