时间戳

首页 > 解决方案 > 片段中的 minifab 浮动操作按钮不可点击

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

问题描述

我在一个片段内有一个浮动操作按钮，其中有 3 个其他 minifab 以弧形动画出来。主 FAB 工作正常并调用 miniFab 上的动画，但 miniFab 由于某种原因不可点击。我可以轻松访问所有 Fab，但无法访问setOnClickListener()minifab。这是布局：

<?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 上的动画效果很好，但 FABs 不能以任何方式点击：

<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底部的 a 。这是用 50% 的 alpha 覆盖 recyclerView，以保持对晶圆厂的关注并使内容变暗。不幸的是，它没有像我喜欢的那样覆盖操作栏或底部导航。如果您也有实现这一目标的建议，请告诉我。

标签： android-fragmentskotlinandroid-animationfloating-action-button

解决方案

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

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

当视图最初被绘制并相对于主 FAB 膨胀时，将浮动操作按钮放置在我想要的屏幕上。另外，由于这是一个受约束的布局，我使用了：

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

将按钮放在主 FAB 所在的右下角，否则这些 miniFab 的 margin-bottom 和 margin-top 将更难计算。

然后我在 miniFabs 上使用动画alpha和动画。scale这将 miniFabs 保持在点击事件的相同位置，但为它们提供了一些动画，因此它们有一点天赋。

一旦我将它们的可见性设置为消失，我还确保将isEnabled()每个 FAB 的属性设置为 false，否则点击事件仍然存在。

推荐阅读