显示 CardView 时的 FAB 行为（向上和向下）

Question

我想像 Material 指南规范中一样显示 CardView 作为提示： https://www.google.com/design/spec/growth-communications/onboarding.html#onboarding-quickstart

这是图片的 link： Image

我已经像这样更改了 FAB 按钮的行为并设置为 .xml 文件：

public class FABBehavior extends FloatingActionButton.Behavior {

    public FABBehavior(Context context, AttributeSet attr) {
        super();
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        return dependency instanceof CardView;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }
}

我的 .xml 文件如下所示：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.nearme.client.activities.fragments.ScannerFragment">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:title="@string/title_scanner"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/fragment_scanner_content" />

<android.support.v7.widget.CardView
    android:id="@+id/cvBluetooth"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:animateLayoutChanges="true"
    android:layout_gravity="bottom" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Prueba" />
</android.support.v7.widget.CardView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right|bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:layout_behavior="com.nearme.client.utils.FABBehavior"
    android:src="@android:drawable/ic_dialog_email" />

FAB 按钮的点击监听器是这样的：

View.OnClickListener onClick = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v == fab) {
            if (cardBluetooth.isShown()) {
                cardBluetooth.setVisibility(View.GONE);
            } else
                cardBluetooth.setVisibility(View.VISIBLE);
        }
    }
};

问题是当 CardView 的可见性消失时，FAB 按钮仍保持在其位置上。

当 CardView 消失时如何更新 FAB 的位置？

即使我在 CoordinatorLayout 中动态设置 CardView 并删除它也不起作用。

Answer 1

嗯，问题是 onDependentViewChangedfrom FloatingActionButton.Behavior 仅在从属视图更改其位置时才被调用。但我只是改变了它的可见性，所以它没有被调用。

现在在 onClick 我添加到视图并将其删除：

View.OnClickListener onClick = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (v == fab) {
            if (cardBluetooth.isShown()) {
                coordinatorLayout.removeView(cardBluetooth);
            } else
                coordinatorLayout.addView(cardBluetooth);
        }
    }
};

并且在 FloatingActionButton.Behavior 我添加了：

@Override
public void onDependentViewRemoved(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    child.animate().translationY(0);
    child.setTranslationY(0);
}

这是结果： GIF of result

Answer 2

改方法layoutDependsOn方法按照这个:

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    return dependency instanceof CardView && onDependentViewChanged(parent, child, dependency);
}

否则，fab 按钮只会在第一次被点击时向上移动。

显示 CardView 时的 FAB 行为（向上和向下）

FAB Behavior when showing CardView (Up & Down)

android

material-design

android-cardview

floating-action-button

android-coordinatorlayout