【Android Studio】スクロールしたら隠れるアクションバーを実装してみた
初めに
今回は折りたたみ式のアプリバーをつくります！
”折り畳み式”というのは、こういうことです↓
画面のスクロールに合わせて、アクションバーが見え隠れしていますね(^-^)
これは、前回の記事にもあった便利な「ツールバー」を使って実装できるんです(*^^)v
ツールバーって何？
という方は以下のリンクをご覧ください(/・ω・)/
ukit-labo.hateblo.jp
では、やってみましょう！
スクロールさせるコンテンツを用意
まず、スクロールさせるコンテンツを適当に作ります。
※後でインクルードするので別ファイルで作成します
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/tv_waganeko" /> </androidx.core.widget.NestedScrollView>
ScrollViewではなくNestedScrollViewを使わないと、うまく画面に入らなかったり
いろいろと問題が出ます。
また、属性に
app:layout_behavior="@string/appbar_scrolling_view_behavior"
を指定しておきます。
実装パターン①
<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" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:logo="@mipmap/ic_launcher" app:layout_scrollFlags="scroll|enterAlways"/> </com.google.android.material.appbar.AppBarLayout> <include layout="@layout/content_main"/> </androidx.coordinatorlayout.widget.CoordinatorLayout>
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) } }
※ツールバーを使用するために「アクションバーの非表示」を以降すべてのコードで行っているとします
ポイント①：CoordinatorLayout
メインアクティビティではルートに「CoordinatorLayout」を使用しています。
このレイアウトは”画面部品同士の動きを調整する”という特徴があり、
子となるViewの位置や大きさなどを動的に管理できます。
今回のように、
親子関係のない画面部品同士に連動した動き*1をさせる場合は、全体をCoordinatorLayoutで囲う必要があります。
ポイント②：AppBarLayout
表示するツールバーの親要素として「AppBarLayout」を使っています。
これはアクションバー部分を連動させるための画面部品です(^-^)
AppBarLayoutはLinearLayoutを継承しており、オリエンテーションは縦になっています。
そのため、このレイアウト内の要素は縦に並べられ、それらがアクションバーの位置に配置されます。
子要素に「layout_scrollFlags」属性を付与することで、その要素をスクロールに連動させることができます。
ポイント③：Toolbar
AppBarLayoutの子要素として定義しています。
今回はこのツールバーをスクロール連動させたいので、
「layout_scrollFlags」属性を指定します。
まずscrollと記述し、「｜」で区切った後スクロールモードを指定します
| スクロールモード | 上にスクロールした時 | 下にスクロールした時 |
|---|---|---|
| enterAlways | ツールバーがすぐに消える | ツールバーがすぐに出てくる |
この時注目なのは、「下にスクロールした時の動き」です。
コンテンツの上端を意識しない動きになっています。(↓こんな感じ)
・下にスクロールした途端にツールバーがニョキっと出てくる
・さらにスクロールするとツールバーが表示されたままコンテンツがスクロール
・コンテンツの上端に到達
実装パターン②
<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" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="200dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:logo="@mipmap/ic_launcher" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <include layout="@layout/content_main" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) } }
ポイント①：CollapsingToolbarLayout
AppBarLayoutの子要素、Toolbarの親要素として
CollapsingToolbarLayoutを指定しています。
これはスクロール時に連動させてAppBarLayoutのサイズを変更できるレイアウト部品です。
今回はサイズ変更がわかりやすいようにAppBarLayoutの高さを固定値として設定してみました。
サイズを変更させるのはToolbarではなくCollapsingToolbarLayoutの役割です。
そのため、先ほどはToolbarに記述していたスクロールモードの設定を、
今回はここに記述する必要があります。
| スクロールモード | 上にスクロールした時 | 下にスクロールした時 |
|---|---|---|
| enterAlwaysCollapsed | ツールバーがすぐに消える | スクロールの上端まで行ったときにツールバーが表示 |
ポイント②：Toolbar
Toolbarで「layout_collapseMode」の属性値に"pin"を指定をすると、
Toolbarは常にアクションバーの位置にとどまります。
これで上にスクロールした時に、アイコンの位置までタイトルが移動して、一緒に隠れる動きになります。
指定しないと、上にスクロールした時すぐにアイコンだけが隠れてしまいます。
実装パターン③
<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" tools:context=".MainActivity"> <!-- 省略 --> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:logo="@mipmap/ic_launcher" /> <!-- 省略 --> </androidx.coordinatorlayout.widget.CoordinatorLayout>
このパターンはCollapsingToolbarLayoutのスクロールモードを変更しただけです。
| スクロールモード | 上にスクロールした時 | 下にスクロールした時 |
|---|---|---|
| exitUntilCollapsed | ツールバーがすぐに消える(一部残る) | スクロールの上端まで行ったときにツールバーが表示 |
先ほどと違い、どれだけ上にスクロールしても、縮小したツールバーが完全に隠れません。
これには、Toolbarに「app:layout_collapseMode="pin"」の指定が必要です。
まとめ
いろいろと調べていると、アプリバーに画像を指定したり、ＦＡＢをおしゃれに追加したりと
アイデア次第で幅広い実装が可能なようですΣ(ﾟДﾟ)
また気になることがあったら記事にしますね～(^_^)vℚ
