缓慢滚动 RecyclerView 项目时，附有锚点的浮动操作按钮不会隐藏

Question

我有底部提供的设计

我希望在选项卡布局上方发生的事情：

我想要一个 AppBarLayout，它会在用户在其中一个选项卡中的 RecyclerView 上向下滚动时隐藏。
我希望用户图像附加到其背后的蓝色背景，并在用户向下滚动时隐藏。
我希望在用户滚动时将选项卡固定在顶部，以便他可以轻松切换它们。回收站视图和选项卡布局必须是用户向下滚动时唯一可见的内容。

所以我确实实现了 1 和 3，但我无法实现 2 - 当您缓慢滚动 RecyclerView 时，图像会停留在它上面并且不会隐藏。

以下是我做过的事情：

我确实只在此处显示的片段中实现了协调器布局。它没有在新的 activity 中实现，也没有在托管片段的 activity 中实现，片段没有工具栏。这意味着我使用的是没有工具栏的 CollapsingToolbarLayout。
我正在使用支持设计库中的浮动操作按钮来显示用户图像。我使用它是因为当它隐藏时它会带有动画。

检查底部的XML。

那么会发生什么：

一切都完美加载
按钮安装在正确的位置
AppBarLayout 响应滚动
缓慢滚动时按钮不会隐藏
快速滚动时它会隐藏
当更改 viewpager 片段时它会隐藏

这是一个有问题的视频：YOUTUBE

我尝试调试 CoordinatorLayout 以及它调用按钮的 hide() 方法时的调试，但我找不到问题所在。有什么想法吗？

编辑 1：

如果您删除奶酪广场示例中的工具栏，您将遇到同样的错误。

我的测试xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:background="@color/bg_secondary"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:elevation="1dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/img"
                android:src="@drawable/header_bg"
                android:scaleType="centerCrop"
                android:cropToPadding="true"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

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


    <android.support.v4.view.ViewPager
        android:id="@+id/profile_tabs"
        android:elevation="2dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="1dp"
        app:pressedTranslationZ="12dp"
        android:clickable="true"
        app:rippleColor="@android:color/transparent"
        android:src="@drawable/ic_launcher"
        app:layout_collapseMode="parallax"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|left|end" />

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

编辑 2：

这个问题还有一个issue marked as Declined。

Answer 1

如果我正确理解了你的问题（可能没有），那么尝试创建一个滚动侦听器并将其隐藏在那里。如果我没看错的话应该是这样的，如果我错了请指正我：

viewPager.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScroll(View v) {
        fab.setVisibility(View.GONE);
    }
}

Answer 2

您可以使用工具栏来实现您想要的效果：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:background="@color/bg_secondary"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:elevation="1dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/img"
                android:src="@drawable/header_bg"
                android:scaleType="centerCrop"
                android:cropToPadding="true"
                app:layout_collapseMode="parallax"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
          <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"/>

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


    <android.support.v4.view.ViewPager
        android:id="@+id/profile_tabs"
        android:elevation="2dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />



          <android.support.design.widget.FloatingActionButton
               android:id="@+id/test"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:elevation="1dp"
               app:pressedTranslationZ="12dp"
               android:clickable="true"
               app:rippleColor="@android:color/transparent"
               android:src="@drawable/ic_launcher"
               app:layout_collapseMode="parallax"
               app:layout_anchor="@id/app_bar_layout"
               app:layout_anchorGravity="bottom|left|end" />

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

没有工具栏，FloatingActionButton 不会以您想要的方式隐藏。

Answer 3

您必须为 FAB 实现自定义行为才能达到您想要的效果。我稍微改变了原来的实现，让它在没有工具栏的情况下工作。

    public class FABBehavior extends FloatingActionButton.Behavior {

    public FABBehavior() {
    }

    public FABBehavior(Context context, AttributeSet attributeSet) {
    }

    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
        if(dependency instanceof Snackbar.SnackbarLayout) {
           return super.onDependentViewChanged(parent, child, dependency);
        } else if(dependency instanceof AppBarLayout) {
            this.updateFabVisibility(parent, (AppBarLayout)dependency, child);
        }

        return false;
    }

    private boolean updateFabVisibility(CoordinatorLayout parent, AppBarLayout appBarLayout, FloatingActionButton child) {
        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)child.getLayoutParams();
        if(lp.getAnchorId() != appBarLayout.getId()) {
            return false;
        } else {

            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) child.getLayoutParams();
            int point = child.getTop() - params.topMargin;
            try {
                Method method = AppBarLayout.class.getDeclaredMethod("getMinimumHeightForVisibleOverlappingContent");
                method.setAccessible(true);
                if(point <= (int) method.invoke(appBarLayout)) {
                    child.hide();
                } else {
                    child.show();
                }
                return true;
            } catch (Exception e) {
                return true;
            }
        }
    }
}

当然，您可以使用 app:layout_behavior 应用此行为。

Answer 4

我在我的应用程序中使用了这段代码：

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/circlejoined_rootview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/circlebd_rootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/collapsing_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/expanded_title">

            <ImageView
                android:id="@+id/circleback_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.4" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/gradient_bg"
                android:orientation="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:gravity="center_horizontal">
            </LinearLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:orientation="vertical">
        <android.support.design.widget.TabLayout
            android:id="@+id/circleresdyn_tablayout"
            style="@style/cirres_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/main_color"/>
        <android.support.v4.view.ViewPager
            android:id="@+id/circleresdyn_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout></RelativeLayout>

Answer 5

我有类似的问题，我修复了它，如下所示：

AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if(fab.getTop() <= 0) {
                fab.hide();
            } else {
                fab.show();
            }
        }
    });

我在 activity class 里面有这个代码，我在运行 Lollipop 上有这个代码。

缓慢滚动 RecyclerView 项目时，附有锚点的浮动操作按钮不会隐藏

Floating Action Button attached with anchor not hiding when scrolling RecyclerView items slow

android

android-design-library

android-coordinatorlayout