Question

我在一个片段中有一个浮动动作按钮，还有3个其他微型工厂以弧线动画出来。主FAB运行得很好，并在miniFab上调用了动画，但是由于某些原因，miniFab无法单击。我可以轻松访问所有Fab，但是无法访问小型工厂的setOnClickListener()。这是布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:fitsSystemWindows="true">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/chatter"
        android:textColor="@color/black" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_chatter_video"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/fab_first_menu_item_margin_bottom"
        android:layout_marginEnd="@dimen/right_margin"
        android:clickable="true"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="@color/white"
        app:fabSize="mini"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_chatter_new_video"
        android:fitsSystemWindows="true" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_chatter_open"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/fab_bottom_margin"
        android:layout_marginEnd="@dimen/fab_main_right_margin"
        android:clickable="true"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_chatter_new" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_chatter_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/fab_first_menu_item_margin_bottom"
        android:layout_marginEnd="@dimen/right_margin"
        android:clickable="true"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="@color/white"
        app:fabSize="mini"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_chatter_new_photo" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_chatter_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/fab_first_menu_item_margin_bottom"
        android:layout_marginEnd="@dimen/right_margin"
        android:clickable="true"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="@color/white"
        app:fabSize="mini"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_chatter_new_text" />

    <LinearLayout
        android:id="@+id/main_chatter_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.45"
        android:orientation="vertical"
        android:visibility="invisible"
        android:background="@color/mainColor"
        />

</android.support.constraint.ConstraintLayout>

我正在用此代码对fab_chatter_open进行动画处理，效果很好。点击动画以及全部：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <rotate android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>

并在第二次单击FAB时反转此动画。

然后，我使用此代码对miniFabs进行动画处理。 miniFabs上的动画效果很好，但是FAB不能以任何方式点击：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true" >

    <translate android:fromXDelta="82%p" android:toXDelta="65%p"
        android:fromYDelta="7%p" android:toYDelta="7%p"
        android:duration = "100"/>
    <alpha android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="100"/>
</set>

您还会在底部看到一个Linearlayout。这是为了以50％的alpha覆盖recyclerView，以保持对fab的关注并使内容暗淡。不幸的是，它没有像我希望的那样覆盖操作栏或底部导航。如果您也有完成此操作的建议，请告诉我。

Answer 1

显然，当使用translate为浮动操作按钮设置动画时，在受限的布局中，按钮的单击保持在创建和放大视图时最初绘制FAB的位置。我决定改为在miniFabs浮动操作按钮上使用边距底部和边距末端：

android:layout_marginBottom=""
android:layout_marginEnd=""

在最初绘制视图并相对于主FAB放大视图时，将浮动操作按钮放在屏幕上我想要的位置。另外，由于这是受限制的布局，因此我使用了：

app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"

将按钮放在主FAB所在的右下角，否则这些miniFab的边距底部和边距顶部将很难计算。

然后，我在miniFabs上使用动画alpha和动画scale。这会将miniFabs保留在单击事件的同一位置，但会为其提供一些动画，从而使它们具有一点天赋。

我还确保在将每个FAB的可见性设置为“消失”后，将每个FAB的isEnabled()属性设置为false，否则click事件仍然存在。

片段中的minifab浮动操作按钮不可点击

1 个答案: