CoordinatorLayout 対応した RecyclerView の実装

できるもの

リストをスクロールすると、ヘッダー部分がいい感じに収納されるあれ。

やったこと

• RecyclerView の実装
• AppBar を非表示にする
• レイアウトファイルの CoordinatorLayout 対応

RecyclerView の実装

RecyclerView の実装 に記載。

AppBar を非表示にする

AppBar は、スクロール対応したものを別途実装するので、非表示。
android:theme="@style/AppTheme.NoActionBar" を追加する。

AndroidManifest.xml

<activity android:name=".RecycleViewActivity" android:theme="@style/AppTheme.NoActionBar">
         <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
         </intent-filter>
</activity>

レイアウトファイルの CoordinatorLayout 対応

activity_recycle_view.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context=".RecycleViewActivity">

    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar"
            android:fitsSystemWindows="true"
            android:layout_height="@dimen/app_bar_height"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

        <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/tool_bar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:toolbarId="@+id/toolbar"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:contentScrim="?attr/colorPrimary">

            <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/item_list"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </androidx.recyclerview.widget.RecyclerView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

ポイント

• 基本的にデフォルト Activity の ScrollingActivity を参考にすれば、わかる。
• app:layout_scrollFlags="scroll|exitUntilCollapsed" で好きなアニメーションを決められる
• app:layout_behavior="@string/appbar_scrolling_view_behavior" を追加すると、いい感じに Appbar の高さを考慮して、RecycleView の表示位置を調整してくれる
• exitUntilCollapsed の場合、AppBar の高さ分、RecycleView のリストが表示されなくなるので、リストの最後に余白を用意する必要がある

参考