ドラッグで始める最速CoordinatorLayout

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

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

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

#CoordinatorLayoutって？
これを使えばどんなことができるのか？
↓こういうよく見るスクロールに合わせて消えるヤツ
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/09c8f507-af83-4a77-42db-ed03322149c2.gif">


#誰でもできるドラッグ実装!
ほぼドラッグで冒頭のスクロールで消えるヤツ作っていく!
android studio のUIからドラッグでできるようになっている。(多分最近のアップデートのおかげ(未確認))
最初にプロジェクト作ったら↓みたいな感じになってる。
<img width="174" alt="キャddcプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/0e5bb371-0fb1-d81b-9708-3d78bb4bc5de.png">

ここでパレットペインから**AppBarLayout**をconstraintLayoutとかの適当な場所に**ドラッグ**する。
すると↓のようなポップアップが表示される。
<img width="570" alt="キャプチccャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/646a7487-bd82-2528-ab66-4fdd979b3f89.png">
これがめちゃくちゃ便利!!

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

<img width="180" alt="キャプcccfaチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/c1c6aa86-95ec-36e3-4f25-885ebbc7389a.png">
こんな感じに**自動生成**される。

ここで実行してみると↓みたいな感じの動きになる。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/e276bf38-b3f0-d86d-b176-4aad2d8309c7.gif">

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

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

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

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

```xml: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**に以下を加える

```kotlin:MainActivity.kt
setSupportActionBar(toolbar)
```


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

<img width="194" alt="cccccキャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/46a08500-eb77-6b87-fedc-a1b33ac18c2e.png">　　<img width="170" alt="キャプチccgasdャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/9c125df1-9070-d94c-b546-6cd87da9c0ac.png">

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

```xml: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>
```
実行してみると...
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/0b7ca486-a762-2153-e265-ff784df1572d.gif">

完成!!

ちなみに**CollapsingToolbarLayout**の属性を**app:layout_scrollFlags="scroll"**に変更すると下のようにアクションバーも隠れるようになる。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/ba63c8d3-3191-5333-4491-23137f0993f3.gif">

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

今回の冒頭のrecyclerView入りは[github](https://github.com/SY-BETA/Coordinatorlayout-Normal/tree/master)に挙げてあります。