【Android】CoordinatorLayoutでToolbarの展開や非表示
CoordinatorLayoutを使用してToolbarを展開したり、画面外にスクロールしたりできます。
Toolbarを展開する場合
詳細画面でよく見かける、ページを開いた時は展開した状態でスクロールするとToolbarのサイズに縮み、 さらにスクロールするとToolbarが画面外へ出て行くレイアウト。
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:theme="【*Toolbarのtheme】" android:layout_width="match_parent" android:layout_height="【*展開した時の高さ】"> <android.support.design.widget.CollapsingToolbarLayout app:layout_scrollFlags="scroll|enterAlways|snap" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:src="【*表示する画像】" app:layout_collapseMode="parallax" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.v7.widget.Toolbar app:layout_collapseMode="pin" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/> </android.support.design.widget.CollapsingToolbarLayout> <//android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior" android:layout_width="match_parent" android:layout_height="match_parent"> //... </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|right" /> </android.support.design.widget.CoordinatorLayout>
タグのみにすると以下の通り。
<CoordinatorLayout> <AppBarLayout> <CollapsingToolbarLayout> <ImageView /> <Toolbar /> </CollapsingToolbarLayout> </AppBarLayout> <NestedScrollView> //... </NestedScrollView> <FloatingActionButton /> </CoordinatorLayout>
必須項目
必須項目はの以下の3箇所。
- AppBarLayoutのandroid:themeにToolbarのtheme
- AppBarLayoutのandroid:layout_heightに展開した時の高さ(dp)
- ImageViewのandroid:srcに画像を設定
ただし、画像が不要な場合はImageViewを削除します。
任意項目
CollapsingToolbarLayoutの部分でスクロール時の挙動や閉じた時の色を設定できます。
CollapsingToolbarLayout
app:layout_scrollFlags
“scroll"に加え、以下を追加で設定できます。
enterAlways | スクロールした時にToolbarを表示。縮めるとToolbarになり、さらにスクロールすると非表示 |
enterAlwaysCollapsed | 一番上からスクロールした時にToolbarを表示 |
exitUntilCollapsed | スクロールしてもToolbarの伸縮は最小サイズまで |
app:contentScrim
- 閉じた時(Toolbarの通常サイズ)の色
- 指定した場合、スクロールでImageViewにFadeIn/Outの効果
- 指定しない場合、ImageViewが常に表示される
備考
CollapsingToolbarLayoutのapp:layout_scrollFlags=“snap”
CollapsingToolbarLayoutのapp:layout_scrollFlagsにsnapをつけると、 スクロール時に展開、最小、画面外のいずれかの状態までスナップするようになります。 通常、"scroll|snap"など他のlayout_scrollFragsと合わせて使用します。
ImageViewのapp:layout_collapseMode=“parallax”
スクロール時に画像の位置を調整するようになります。
Toolbarのapp:layout_collapseMode=“pin”
展開時でもToolbarのNavigationIconやMenuが通常のToolbarの位置に固定されます。
Toolbarを展開しない場合(通常のToolbarの場合)
Toolbarのみの場合はCollapsingToolbarLayoutを使わずにToolbarにapp:layout_scrollFlagsを設定すると、 スクロールでToolbarの表示/非表示ができます。
<Toolbar app:layout_scrollFlags="scroll|enterAlways|snap" android:layout_width="match_parent" android:layout_height="wrap_content"/>
参考
- Coordinator LayoutでかっこいいToolbarにする - WonderPlanet DEVELOPER BLOG
- android - Make collapsible toolbar automatically collapse/expand - Stack Overflow
- AndroidのCoordinatorLayoutを使いこなして、モダンなスクロールを実装しよう - Yahoo! JAPAN Tech Blog
- android - How to make the Toolbar snap into view or out of view when using Google Design Library? - Stack Overflow