具有顶部背景图片的RecyclerView [英] RecyclerView with background image at top

问题描述

我要实现的目标是:

如您所见，RecyclerView中的第一张卡片的后面略有背景图像.

As you can see, there is a background image that appears slightly behind the first card in the RecyclerView.

当用户滚动时，背景图像以及发现"文本和图标也应在屏幕外滚动.

When the user scrolls, the background image, as well as the "Discover" text and icon, should also scroll off the screen.

我已经考虑将RecyclerView放入NestedScrollView，但是从我阅读的内容中可以看到，破坏RecyclerView并不允许其回收视图(我可能是错误的).

I've looked into putting the RecyclerView into a NestedScrollView, but from what I've read, this breaks the RecyclerView and doesn't allow it to recycle views (I could be wrong).

我将如何实现这样的目标?现在，我的布局非常裸露:

How would I achieve something like this? Right now, my layout is very bare bones:

<?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"
    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/AppTheme.AppBarOverlay"
        android:fitsSystemWindows="true">

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

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

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        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/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

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

谢谢.

推荐答案

背景图像，该背景图像略微位于第一张卡片的后面 RecyclerView.

Background image that appears slightly behind the first card in the RecyclerView.

您可以使用CollapsingToolbarLayout进行此操作，它将隐藏视差背景.注意:使用app:behavior_overlapTop将RecyclerView loverlap设置为背景.

You can do that using CollapsingToolbarLayout, it will hide parallax the background behind. Note: using app:behavior_overlapTop to make RecyclerView loverlap the the background.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            app:titleEnabled="false"
            app:expandedTitleMarginBottom="94dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?colorPrimary"
            >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:src="@drawable/london_flat"
                android:tint="#BB3E50B4"
                android:scaleType="centerCrop"
                />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@null"
                app:layout_collapseMode="pin"
                style="@style/ToolBarWithNavigationBack"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="78dp"
        android:layout_margin="8dp"
        android:background="@color/cardview_light_background"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

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

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

结果:

这篇关于具有顶部背景图片的RecyclerView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！