#最初に一言
スクロールに合わせてアクションバーとか消したいと思って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を以下のように書き換えてアクションバーを非表示にする
<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に以下を加える
setSupportActionBar(toolbar)
画像を表示する
レイアウトにImageViewを載せてapp:layout_collapseMode="parallax"属性を追加する。
また、toolbarにタイトルを設定する。
最後にCollapsingToolbarLayoutの属性に**app:layout_scrollFlags="scroll|exitUntilCollapsed"**を追加する。
一応レイアウトファイルはこんな感じ
<?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に挙げてあります。