带有 RecyclerView 和 CollapsingToolbarLayout 的 CoordinatorLayout

Posted 2023-02-23

【中文标题】带有 RecyclerView 和 CollapsingToolbarLayout 的 CoordinatorLayout

【英文标题】：CoordinatorLayout with RecyclerView & CollapsingToolbarLayout

【发布时间】：2015-08-13 08:05:49

【问题描述】：

我一直在尝试使用此处的少量指导：http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html 和此处的项目：https://github.com/chrisbanes/cheesesquare 来实现带有 RecyclerView 的 CollapsingToolbar，我目前具有以下布局：

<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:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_
        android:layout_
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:theme="@style/Toolbar"
        app:contentScrim="@color/primary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:theme="@style/Toolbar"
            android:layout_
            android:layout_
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_
    android:layout_
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:layout_
    android:layout_
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_directions"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

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

来源如下：

    setContentView(R.layout.activity_details_image);
    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    loadImage();
    CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle(formatName(getIntent().getStringExtra("name")));
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    ArrayList<DetailsAdapter.Detail> details = new ArrayList<DetailsAdapter.Detail>();
    details.add(new DetailsAdapter.Detail("Main Facilities", "Children's Play Area, Ecotricity Electric Vehicle Charging Point, Lucky Coin, Multi Faith Room (southbound only), Showers", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Restaurants", "Eat & Drink Co., Burger King, Costa, West Cornwall Pasty Co. (northbound only), Greggs, Costa Express, Krispy Kreme", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Shops", "WHSmith, M&S Simply Food, Fone Bitz, Cotton Traders, Ladbrokes (southbound only)", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Motel", "Travelodge", R.drawable.ic_moto));
    details.add(new DetailsAdapter.Detail("Forecourt", "BP (with: LPG), Costa Express, Air1 AdBlue", R.drawable.ic_moto));
    DetailsAdapter mAdapter = new DetailsAdapter(this, details);
    recyclerView.setAdapter(mAdapter);
    recyclerView.setItemAnimator(new DefaultItemAnimator());

我已经在没有折叠工具栏的情况下对其进行了测试，它可以正常滚动

但它不会滚动，即使列表比可见部分长。我做错了什么？

【问题讨论】：

我尝试将您的布局与简单的 RecyclerView 一起使用，效果很好。问题可能出在项目数量上，也可能出在适配器的实现上？

它可以在没有工具栏的情况下工作，就像我说的那样。适配器和物品很好。你能上传你的项目吗？

其实，为了测试我修改了Cheesesquare项目，我唯一做的就是把details view中的NestedScrollingView替换成项目中的RecyclerView，就成功了。

下面的答案解释了原因。你得到了更新的 build.gradle，我没有更新我的。似乎被许多人忽视了。

很高兴它现在可以工作了！我知道并非所有滚动视图都有效，例如 ListView。最新更新必须包含与此相关的更改。

【参考方案1】：

确保您使用的是 com.android.support:recyclerview-v7:22.2.0

（对于 22.2.0 之前的版本，它也不适用于我）

【讨论】：

这为我解决了问题。我无语了。谢谢罗伊！

虽然它现在可以工作了，但我的 RecyclerView 并没有达到应有的高度 - 它是 match_parent，但它似乎从底部丢失了与扩展时工具栏高度一样多。这是旧图书馆的另一个标志吗？我可能会产生另一个问题，只是发布这个以防你有一个快速的答案。我使用的布局与上面基本相同。

现在我所做的是使用 layout_ 和 layout_marginBottom="?attr/actionBarSize"（工具栏的高度）制作 RecyclerView

@RoiDivon 我猜你的意思是 layout_marginTop="?attr/actionBarSize"。但是当应用栏不显示时（当你滚动时）状态栏和 RecyclerView 之间有一个空白区域。有人可以解决这个问题吗？

23.1.1 在这里。同样的问题。有没有人找到工作？这不好玩。

【参考方案2】：

我可能迟到了 1 年才回答这个问题。我找到了解决方案。在这里，在嵌套滚动视图中添加 layout_marginBottom：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_coord_layout"
    android:layout_
    android:layout_
    tools:context="com.example.android.minhnguyencv.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_
        android:id="@+id/appbar"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="4dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_
            android:layout_
            app:layout_scrollFlags = "scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@android:color/transparent">

            <ImageView
                android:id="@+id/coverPhoto"
                android:layout_
                android:layout_
                android:scaleType="fitXY"
                android:fitsSystemWindows="true"
                android:src="@drawable/coverphoto"
                app:layout_collapseMode="parallax"
                android:clickable="true" />

            <ImageView
                android:id="@+id/profilePhoto"
                android:layout_
                android:layout_
                android:layout_gravity="center_horizontal|bottom"
                android:scaleType="fitXY"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:clickable="true" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_collapseMode = "pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/main_nested_scroll_view"
        android:layout_
        android:layout_
        android:layout_gravity = "fill_vertical"
        android:layout_marginBottom="?attr/actionBarSize"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior">

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

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

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

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

【讨论】：

这是我运行 23.3.0 的唯一修复

与支持库版本 25.3.1 相同。

我使用的是androidx，遇到了同样的问题。上面的代码不起作用。