最初に一言

スクロールに合わせてアクションバーとか消したいと思ってCoordinatorLayout使おうとして、「これめちゃくちゃ使いづらい(泣)、そもそもCoordinatorLayoutってどんなレイアウトよ？,linearなのか？constraintなのか？、Viewがなんか重なるし、スクロールしても消えないし...」って思いをしたことがある人は自分だけじゃないはず。

レイアウトのネスト構造が分かりづらいCollapsingLayout...
CoordinatorLayout調べてもandroid xに対応した記事が少ない...

今回はそんな体験を踏まえてCoordinatorLayoutの始め方を書いておこうと思った。

CoordinatorLayoutって？

これを使えばどんなことができるのか？
↓こういうよく見るスクロールに合わせて消えるヤツ

誰でもできるドラッグ実装!

ほぼドラッグで冒頭のスクロールで消えるヤツ作っていく!
android studio のUIからドラッグでできるようになっている。(多分最近のアップデートのおかげ(未確認))
最初にプロジェクト作ったら↓みたいな感じになってる。

ここでパレットペインからAppBarLayoutをconstraintLayoutとかの適当な場所にドラッグする。
すると↓のようなポップアップが表示される。

これがめちゃくちゃ便利!!

とりあえずCollapsing Toolbarにチェックを入れてOKクリック。

こんな感じに**自動生成**される。

ここで実行してみると↓みたいな感じの動きになる。

おぉ、なんかそれっぽいぞ。雰囲気がある。

ベースはこれで完成
ここからtoolbarをなくす場合は非表示にしたり、画像載せたり、ViewPager入れたりとかしてカスタマイズしていく。

ここからはドラッグで生成されたToolbarを使う場合を想定する。
ドラッグで自動生成されたtoolbarを使う場合はデフォルトで存在するtoolbarを消して自動生成されたtoolbarを設定する必要がある。

そこでstylesを以下のように書き換えてアクションバーを非表示にする

styles.xml

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
　　　　　<!--        アクションバーの文字色-->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

次にアクションバーの設定
onCreateに以下を加える

MainActivity.kt

setSupportActionBar(toolbar)

画像を表示する
レイアウトにImageViewを載せてapp:layout_collapseMode="parallax"属性を追加する。
また、toolbarにタイトルを設定する。
最後にCollapsingToolbarLayoutの属性に**app:layout_scrollFlags="scroll|exitUntilCollapsed"**を追加する。

一応レイアウトファイルはこんな感じ

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp">

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

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

実行してみると...

完成!!

ちなみにCollapsingToolbarLayoutの属性を**app:layout_scrollFlags="scroll"**に変更すると下のようにアクションバーも隠れるようになる。

おわり

CoordinatorLayoutは正直苦手意識が強かったけどUI使って簡単に実装出来た。
中身を色々変えてアプリに組み込めそう...

今回の冒頭のrecyclerView入りはgithubに挙げてあります。