プロフィール画面で見るアレやってみたい(CoordinatorLayout)

おはようございます！
CA Tech Dojo/Challenge/JOB Advent Calendar 2019(長ぇ)
の4日目を担当をさせていただきます、zoothezooです！！

夏休みにDojo,Challengeに参加し、
12月から(厳密には明日)TechJOBに挑戦します。
では、参りましょう。

概要

プロフィール画面でよく見るような上にスクロールすると、
ヘッダー画像がいい感じに消えていく??やつを作りたいと思います。

理解し難い実装たくさんあると思いますが、
お手柔らかにお願いしますね。

これです。

実装

• activity_main.xml
  (かなり省略しています)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="center"
            app:title="Profile">

            <ImageView
                android:minHeight="100dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/curry"
                />

            <androidx.appcompat.widget.Toolbar
                app:layout_collapseMode="parallax"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                />

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

    <include
        layout="@layout/basic_profile"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|center"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

• basic_profile.xml
  (中身は自由に書いてください)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.core.widget.NestedScrollView
        android:fitsSystemWindows="true">
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

各要素について

以下の要素が重要になります。

Coordinatorlayout

• スーパークラス : FrameLayout
  • Constraintlayoutばっかり使ってたから慣れなかった
• 複数の子ビューとの相互作用のコンテナ

AppBarLayout

• CoordinatorLayoutの直下に配置
• 垂直方向のスクロールができる
• nestedscrollviewやrecyclerview

CollapasingToolbarLayout

• AppBarLayoutの直下に配置
• ↑をCoordinatorLayout内に配置しないと、
  CollapsingToolbarLayoutのスクロールなどの機能は使えなさそう
• collapseModeについて
  • parallax,pin,(なし)がある
  • parallaxは、視差方式でスクロールするらしい(英語難しかった)

まとめ

僕はかなりこれを実装できた時感動したんですけど...(めっちゃ調べたし、バグるし)

ユーザとして使う分にはすげぇ程度に終わってしまいますが、
実装してみるとやっぱりエンジニアの人ってすげぇ(!!!!!!!)ってなりますよね

よかったらgithubに載せてますので見てください。