同时使用浮动操作按钮、滑动刷新布局以及协调器布局和工具栏布局行为

Question

我有一个标签 activity。有两个选项卡。 tab 1 和 tab 2 的唯一区别是，tab 1 有浮动操作按钮，tab 2 没有。

在选项卡 1 中：

当用户向下滚动回收站视图时，工具栏和浮动操作按钮应该会消失。
当用户向上滚动回收站视图时，应该会出现工具栏和浮动操作按钮。

在选项卡 2 中：

当用户向下滚动回收站视图时，工具栏应该消失。
当用户向上滚动回收站视图时，应该会出现工具栏。

选项卡 2 很好用，选项卡 2 没有问题。但是选项卡 1 无法正常工作。向下滚动回收站视图时，工具栏不会消失。向上滚动回收站视图时，工具栏不会出现。此外，选项卡 1 并未显示整个页面。回收站视图中有 40 个项目，但选项卡 1 显示 39 个项目。而且它没有显示所有浮动操作按钮。

我认为问题的原因是 fragment_tab1.xml 中的 Coordinator Layout。因为当我删除它时，工具栏消失并在滚动时出现。但是滚动时浮动操作按钮不会消失和出现。

这是视频：http://sendvid.com/hyaorcss

activity_main.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.example.fab.MainActivity">

    <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"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/white"
            app:tabGravity="fill"
            app:layout_collapseMode="pin" />

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

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

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

content_main.xml:

    <RelativeLayout 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:paddingLeft="6dp"
    android:paddingRight="6dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.fab.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</RelativeLayout>

fragment_tab1.xml:

    <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/tab1SwipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/tab1RecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            android:clickable="true" />

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/tab1RecyclerView"
        app:layout_behavior="com.example.fab.ScrollAwareFABBehavior"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/emailFab"/>

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

fragment_tab2.xml:

    <android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab2SwipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tab2RecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:clickable="true" />

</android.support.v4.widget.SwipeRefreshLayout>

Answer 1

对于折叠工具栏，您似乎缺少可折叠工具栏布局。它看起来像这样：

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

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

        ...

你应该看看这个非常好的 app example 展示 material 设计。它完成了很多你想做的事情。

Answer 2

已解决。

我在 activity_main.xml 中使用了 FloatingActionButton，而不是在 fragment_tab1.xml 中。

我在 main activity 中将 ViewPager 设为静态，并在我的 ScrollAwareFABBehavior class 中使用它。

activity_main.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.example.fab.MainActivity">

    <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"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/white"
            app:tabGravity="fill"
            app:layout_collapseMode="pin" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/tab1RecyclerView"
        app:layout_behavior="com.example.fab.ScrollAwareFABBehavior"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/emailFab"/>
</android.support.design.widget.CoordinatorLayout>

content_main.xml:

<android.support.v4.view.ViewPager
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:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_group_timeline"/>

fragment_tab1.xml:

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/tab1SwipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:clickable="true" />

fragment_tab2.xml:

<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/tab2SwipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:clickable="true" />

ScrollAwareFABBehavior.java:

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {

public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
    super();
}

@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                                   View directTargetChild, View target, int nestedScrollAxes) {

    return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
            super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                    nestedScrollAxes);
}

@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                           View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
            dyUnconsumed);

    if(MainActivity.viewPager.getCurrentItem() == 0){

        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }

    }

}
}

同时使用浮动操作按钮、滑动刷新布局以及协调器布局和工具栏布局行为

Using Floating Action Button, Swipe Refresh Layout and Coordinator Layout and Toolbar Layout Behavior together

android

swiperefreshlayout

floating-action-button

android-toolbar

android-coordinatorlayout