带有 RecyclerView 和折叠标头的 CoordinatorLayout [英] CoordinatorLayout with RecyclerView And Collapsing header

问题描述

我的布局如下:

(工具栏，Header View, Text View, RecyclerView)

(Toolbar, Header View, Text View, RecyclerView)

当我滚动 recyclerview 的项目时，我需要折叠标题.使视图选择项目"和 recyclerview 留在屏幕上.

I need the header to be collapsed when I scrolling recyclerview's items. So that the view "Choose item" and recyclerview left on the screen.

我看到工具栏折叠时的示例，但我需要工具栏始终存在.

I saw examples when toolbar is being collapsed, but I need toolbar to be present always.

我应该使用哪种布局/行为来完成这项工作?

Which layouts/behavior should I use to get this work?

推荐答案

你可以通过这样的布局来实现:

You can achieve it by having this layout:

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- HEADER -->
            <RelativeLayout
                ...
                app:layout_collapseMode="parallax">
                .....
            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

       <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
        <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:text="choose item" />
       -->
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

您可以通过设置 app:layout_collapseMode="pin" 属性来固定您的工具栏.您可以通过设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 使 RecyclerView 正确滚动，就这样.

You pin your toolbar by having the app:layout_collapseMode="pin" property set. You make RecyclerView properly scrollable by setting app:layout_behavior="@string/appbar_scrolling_view_behavior" and that's pretty much it.

注意！选择项目"TextView 的位置取决于您想要实现的特定行为:

NB! Position of "Choose item" TextView depends on the particular behaviour you want to achieve:

• 您可以将它包含在 RecyclerView 的 Adapter 的第一个元素中以将其滚动，一旦用户开始滚动 RecyclerView;
• 您可以将其添加到 AppBarLayout 中，这样无论您是否滚动它，它都会始终贴在 RecyclerView 的顶部；

• you can include it as a first element of your RecyclerView's Adapter to scroll it away, once user start scrolling through the RecyclerView;
• you can add it into AppBarLayout so it will always stick on top of the RecyclerView, whenever you scroll it or not;

您可以在此处阅读更多内容Android 设计支持库 和这里 设计支持库(III):协调器布局

You can read more here Android Design Support Library and here Design Support Library (III): Coordinator Layout

希望对您有所帮助！

这篇关于带有 RecyclerView 和折叠标头的 CoordinatorLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！