CoordinatorLayout 使用 ViewPager 的 RecyclerView

Posted

技术标签:

【中文标题】CoordinatorLayout 使用 ViewPager 的 RecyclerView【英文标题】:CoordinatorLayout using the ViewPager's RecyclerView 【发布时间】:2015-08-12 23:20:31 【问题描述】:

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

在 Google 给出的示例中,他们仅将其附加在附加了 CoordinatorLayout 的同一 XML 文件的 RecyclerView 中。

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

该示例位于 Android 开发者博客的this blog post。

【问题讨论】:

你是怎么解决的?我也面临同样的问题***.com/questions/32288013/… 【参考方案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_
    android:layout_>

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            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_
            android:layout_ />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

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

想法是让viewpager有layout_behavior属性。

【讨论】:

你有来自github的链接吗? github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/… @androholic 你是怎么解决的? ***.com/questions/32288013/… 是否可以在 viewpager 中的任何视图上使用 app:layout_behavior?比如,像scrollview这样的non-recyclerview? 嗨,当用户向下滚动时,如何设计带有可滚动查看器和回收卡视图以及搜索栏的视图折叠查看器图像和工具栏更改看起来像谷歌游戏商店应用程序请帮助我和导航抽屉 【参考方案2】:

这可能是愚蠢的,但是由于构建工具没有在应用程序版本的build.gradle 中更新为 22,因此它没有工作,我使用的是 21,这就是它没有按预期工作的原因成为。

编辑:

SanderTuit 也是这么说的:添加com.android.support:recyclerview-v7:22.2.0 也能解决问题

【讨论】:

我想补充一点,您还需要最新的 RecyclerView:com.android.support:recyclerview-v7:22.2.0。 拯救了我的一天!谢谢! 有没有办法让所有支持库保持在最新版本,而无需每次都编辑 build.gradle? @TomasK 您可以随时在版本后面加上加号以表示使用最新版本的库,com.android.support:design:22.+ 我有这样的,但似乎 Android Studio 仍然没有更新它。是否有“检查更新”按钮?【参考方案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_
android:layout_>

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        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_
        android:layout_ />

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

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

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

【讨论】:

是否经过测试?我的意思是我有一个类似的布局,但工具栏不响应我的片段内 viewpager 的滚动事件(即注入 FrameLayout) 当 Framelayout 包含回收器视图时,CoordinatorLayout 根本不会滚动。 @+id/frame 中使用RecyclerView 作为Fragment 的root 为我工作【参考方案4】:

我最近遇到了帖子中提到的同样问题,上述解决方案对我不起作用。幸运的是我设法解决了它。所以只是为了分享我在这里发帖

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

recyclerView.setNestedScrollingEnabled(false);

尽管将 layout_behaviour 属性设置为 viewPager,但 appbar 没有响应 recyclerView 的滚动。将上述属性更改为

recyclerView.setNestedScrollingEnabled(true);

解决了问题,appbar 开始响应 recylerView 的滚动。

【讨论】:

你拯救了我的一天。我傻了。我有相同的代码。当我插入代码时,我什至不知道代码的用途。如果RecyclerViewNestedScrollView 包裹,则需要setNestedScrollingEnabled,但它会删除RecyclerView 的回收功能。【参考方案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_
android:layout_>

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/kn_main_appbar"
        android:layout_
        android:layout_>

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

            <include
                layout="@layout/banner_layout"
                android:layout_
                android:layout_
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

            <android.support.v7.widget.Toolbar
                android:layout_
                android:layout_
                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_
        android:layout_
        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_
            android:layout_
            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_
            android:layout_ />
    </LinearLayout>

【讨论】:

虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效。 @JeremyHuddlestonSequoia 谢谢 :-) ,我会编辑它。 如何使用带有 viewpager 图像和 recyclerview searchview 布局设计的坐标工具栏设计 Flipkart HomeScreen 设计【参考方案6】:

我遇到了同样的问题,我解决了滚动问题,但将工具栏和选项卡放在应用栏内,并用 coordinatorlayout 包装它和 viewpager。 同样在我的回收视图的布局中(要膨胀),我添加了 layout_behavior。它有效,但问题是一切都在彼此之上。

这是我的主页

 <android.support.design.widget.CoordinatorLayout

    android:layout_
    android:layout_
    android:layout_above="@+id/music_foot"

    >
    <android.support.v4.view.ViewPager

        android:layout_
        android:layout_
        android:id="@+id/view_pager"
        />
    <view
        android:layout_
        android:layout_
        class="android.support.design.widget.AppBarLayout"
        android:id="@+id/appBar"
        > 
<android.support.v7.widget.Toolbar
        android:layout_
        android:layout_
        android:background="#1e88e5"
        android:id="@+id/toolbar"
        app:layout_scrollFlags="scroll|enterAlways"
        ></android.support.v7.widget.Toolbar>
        <view
            android:layout_
            android:layout_
            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_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/recycleView" />

如果我让它更好地工作,我会告诉你。

【讨论】:

以上是关于CoordinatorLayout 使用 ViewPager 的 RecyclerView的主要内容,如果未能解决你的问题,请参考以下文章

CoordinatorLayout自定义Behavior&源码分析

CoordinatorLayout/AppbarLayout/CollapsingToolbarLayout的配合使用,Toolbar特效

android CoordinatorLayout使用

android CoordinatorLayout使用

CoordinatorLayout原理的简析

CoordinatorLayout_Behavior控制Toolbar&Fab的显示和隐藏