Question

我在底部提供了设计。

我希望在标签布局上面发生的事情：

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

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

以下是我所做的事情：

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

检查底部的XML。

那会发生什么：

一切都很完美
按钮安装在正确的位置
AppBarLayout响应滚动
慢慢滚动按钮时没有隐藏
快速滚动时会隐藏
更改viewpager片段时，它会隐藏

以下是有问题的视频：YOUTUBE

我尝试调试CoordinatorLayout，当它调用按钮的hide（）方法但我找不到问题。有什么想法吗？

修改1：

如果删除cheesesquare示例中的工具栏，则会出现相同的错误。

我的测试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

您必须为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 2

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

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

我在活动类中有这个代码，我在Lollipop上运行这段代码。

Answer 3

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

<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 4

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

<?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 5

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

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

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

5 个答案: