使用ViewPager的RecyclerView的CoordinatorLayout

Question

我正在使用来自android.support.design的视图CoordinatorLayout。 我想要将app:layout_behavior附加到片段的RecyclerView中？

在Google给出的示例中，他们只在与CoordinatorLayout相连的同一XML文件中附加它到RecyclerView。

有没有办法将CoordinatorLayout附加到ViewPager内片段的RecyclerView中？

示例在Android Developers博客的此篇文章中。

- Rod_Algonquin

---

你是如何解决的？我也遇到了同样的问题。http://stackoverflow.com/questions/32288013/failed-to-load-fragments-when-tabs-viewpager-inside-scrollview - Erum

Answer 1

Chris Banes在Github上发布了一个示例，展示了您想要做的事情。

这是定义如何间接附加协调者布局到viewpager片段的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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <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" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

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

这个想法是让视图页面具有layout_behavior属性。

- androholic

---

你有GitHub的链接吗？ - pablobaldez

好的，我会尽力进行翻译。以下是需要翻译的内容：https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/include_list_viewpager.xml - androholic

@androholic 你是怎么解决的？http://stackoverflow.com/questions/32288013/failed-to-load-fragments-when-tabs-viewpager-inside-scrollview - Erum

在ViewPager中，是否可以在任何视图上使用app:layout_behavior？例如非RecyclerView，如ScrollView？ - Song

你好，如何设计一个带有可滚动的ViewPager和Recycler Card View的视图，并且还要有搜索栏。当用户向下滚动时，折叠ViewPager中的图片并更改为工具栏，就像Google Play Store应用程序一样。请帮助我完成这个设计，还需要包括导航抽屉。 - Harsha

这个在我将RecyclerView放在fragment中时能够运作，但当我把BottomModalSheet放进去时就不起作用了。它无法接收滚动事件。有什么想法吗？ - Gokhan Arik

Answer 2

这可能很蠢，但是由于应用程序版本的 build.gradle 没有更新到22，而我使用的是21，所以它无法按照预期工作。

编辑:

另外，像SanderTuit所说的: 添加 com.android.support:recyclerview-v7:22.2.0 也可以解决问题。

- Rod_Algonquin

---

我想补充一点，你还需要最新的RecyclerView：com.android.support:recyclerview-v7:22.2.0。 - SanderTuit

救了我的一天！谢谢！ - Kiril Aleksandrov

有没有一种方法可以让我保持所有支持库的最新版本，而不必每次都编辑 build.gradle 文件？ - Tomas K

@TomasK，你可以在版本号后面加上加号来表示使用库的最新版本，com.android.support:design:22.+。 - Rod_Algonquin

我现在是这样的，但似乎Android Studio还没有更新。有没有一个“检查更新”的按钮？ - Tomas K

你好，如何设计具有可滚动的ViewPager和Recycler CardView以及搜索栏的视图，当用户向下滚动时，折叠ViewPager图像并更改为工具栏，看起来像Google Play Store应用程序，请帮忙设计导航抽屉。 - Harsha

Answer 3

使用FrameLayout并将您的片段注入该FrameLayout。然后将app:layout_behavior设置为它。您需要做的唯一一件事就是将layout_behavior设置为AppBayLayout的兄弟元素，并且该兄弟元素将位于工具栏下方。

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

- Jam

---

它被测试过吗？我的意思是我有一个类似的布局，但工具栏不响应我的片段中ViewPager的滚动事件（它被注入到FrameLayout中）。 - Vamsi Challa

当Framelayout包含一个RecyclerView时，CoordinatorLayout根本不滚动。 - Roadblock

在我的环境中，使用RecyclerView作为Fragment根视图，并将其放置在@+id/frame中是可行的。 - Yaroslav Mytkalyk

Answer 4

我最近遇到了与帖子中提到的相同问题，上述解决方案对我没有起作用。幸运的是，我设法解决了这个问题。所以，为了分享我的经验，我在这里发布。

问题是，在我的代码中，我已经设置了

recyclerView.setNestedScrollingEnabled(false);

由于设置了layout_behaviour属性为viewPager，导致应用栏无法响应recyclerView的滚动。将上述属性更改为：

recyclerView.setNestedScrollingEnabled(true);

问题已解决，应用栏开始响应recylerView的滚动。

- Majeed Khan

---

你救了我的一天。我很蠢。我有同样的代码。当我插入它时，我甚至不知道这个代码是干什么用的。如果RecyclerView被包裹在NestedScrollView中，就需要使用setNestedScrollingEnabled，但这会移除RecyclerView的回收功能。 - wonsuc

Answer 5

经过几次测试，我发现将TabLayout放在AppBarLayout之外，无论viewpager的Fragment包含什么内容，都可以正常工作。这是我的主要xml文件。

<com.tqmall.legend.konwledge.view.VerticalSwipeRefreshLayout       xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/swipe_refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFE6ECF0">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/kn_main_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@android:color/black"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <include
                layout="@layout/banner_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:background="#33000000"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            </android.support.v7.widget.Toolbar>

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/main_fragment_issue_list_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabGravity="center"
            app:tabIndicatorColor="#FF2CA2D5"
            app:tabPaddingEnd="30sp"
            app:tabPaddingStart="30sp"
            app:tabSelectedTextColor="#FF2CA2D5"
            app:tabTextColor="#FF4F5354" />

        <android.support.v4.view.ViewPager
            android:id="@+id/main_fragment_issue_list_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

- weimin wang

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - Jeremy Huddleston Sequoia

@JeremyHuddlestonSequoia 谢谢 :-) ，我会编辑它。 - weimin wang

如何使用协调工具栏、视图翻页器图片和可回收视图搜索布局设计来设计Flipkart主屏幕设计 - Harsha

Answer 6

我遇到了同样的问题，我通过将工具栏和选项卡放在应用栏内并将其与视图翻页器包装在一起，并使用 coordinatorlayout 解决了滚动问题。 此外，在要填充的 recycle view 的布局中添加了 layout_behavior。这种方法可以解决问题，但问题是所有内容都会重叠在一起。

这是我的主页面。

 <android.support.design.widget.CoordinatorLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/music_foot"

    >
    <android.support.v4.view.ViewPager

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"
        />
    <view
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        class="android.support.design.widget.AppBarLayout"
        android:id="@+id/appBar"
        > 
<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#1e88e5"
        android:id="@+id/toolbar"
        app:layout_scrollFlags="scroll|enterAlways"
        ></android.support.v7.widget.Toolbar>
        <view
            android:layout_width="match_parent"
            android:layout_height="56dp"
            class="com.astuetz.PagerSlidingTabStrip"
            android:id="@+id/pager_tabs"
            android:layout_below="@+id/appBar"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
    </view>

这是我为适配器设计的布局

   <android.support.v7.widget.RecyclerView

   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:id="@+id/recycleView" />

如果我让它更好地运行，我会告诉你的。

- Tarek Srour