如何使用真正的浮动操作按钮(FAB)扩展?

时间:2018-05-15 16:18:30

标签: java android floating-action-button

删除对重复的任何疑问或想法:在Material Design上定义什么是"扩展"。

FAB - Extended FAB

但大多数人混淆了#34;扩展"使用" Type of Transition: Speed Dial",难以找到解决方案。像here

一样

FAB - Type of Transition: Speed Dial

问题 所以我期待的是如何使用文本和扩展尺寸设置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" />

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

enter image description here

没有文字,没有正确的格式。我在Constraint Layout中使用它。

4 个答案:

答案 0 :(得分:5)

enter image description here

您可以创建一个实用程序类,该实用程序类使用MaterialButtonFloatingActionButton动画化为扩展ConstraintLayout。您首先需要在xml中声明MaterialButton的两个状态,然后使用TransitionManager在它们之间进行动画处理。

您可以阅读有关here的中篇文章,与此同时,我将在此处添加一些相关代码。

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);
}

答案 1 :(得分:5)

  1. 在您的gradle文件中添加依赖项:

    实现'com.google.android.material:material:1.1.0-alpha04'

    在您的xml文件中:

FlaotingActonButtonExtended

答案 2 :(得分:0)

您可以使用this library来做到这一点。 (我用另一种方式) 但是我使用了FancyButton在协调器布局中创建了一个圆形且很棒的按钮,如下所示:

    <mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/actMain_btnCompare"
    app:layout_behavior="@string/fab_transformation_sheet_behavior"
    android:layout_width="125dp"
    android:layout_height="38dp"
    android:layout_gravity="bottom|center"
    android:layout_margin="20dp"
    android:elevation="3dp"
    android:padding="2dp"
    fancy:fb_borderColor="@color/white"
    fancy:fb_borderWidth="3dp"
    fancy:fb_defaultColor="@color/colorPrimaryDark"
    fancy:fb_radius="20dp"
    fancy:fb_text="مقایسه محصول"
    fancy:fb_textColor="@color/white"
    fancy:fb_textGravity="center"
    fancy:fb_textSize="13sp" />

结果是:

enter image description here

其中可以带有图标(请参见FancyButton)。

使用app:layout_behavior="@string/fab_transformation_sheet_behavior" 时,其作用类似于fab:

enter image description here

祝你好运。

答案 3 :(得分:-1)

简短的答案:将背景设置为带有圆角而不是椭圆形的矩形。然后将半径尺寸设置为按钮高度的一半。

我实际上是如何做到的:

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

drawable / btn_background_expanded.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
            <corners
                android:radius="@dimen/floating_button_radius"
                />
        </shape>
    </item>
</ripple>