読者です 読者をやめる 読者になる 読者になる

【Android】CoordinatorLayoutでToolbarの展開や非表示

Android

CoordinatorLayoutを使用してToolbarを展開したり、画面外にスクロールしたりできます。

Toolbarを展開する場合

詳細画面でよく見かける、ページを開いた時は展開した状態でスクロールするとToolbarのサイズに縮み、 さらにスクロールするとToolbarが画面外へ出て行くレイアウト。

<CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <AppBarLayout
        android:theme="【*Toolbarのtheme】"
        android:layout_width="match_parent"
        android:layout_height="【*展開した時の高さ】">
        
        <CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|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"/>

            <Toolbar
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        //...
    </NestedScrollView>

    <FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right" />

</CoordinatorLayout>

タグのみにすると以下の通り。

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView />
            <Toolbar />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <NestedScrollView>
        //...
    </NestedScrollView>
    <FloatingActionButton />
</CoordinatorLayout>

必須項目

必須項目はの以下の3箇所。

  1. AppBarLayoutのandroid:themeにToolbarのtheme
  2. AppBarLayoutのandroid:layout_heightに展開した時の高さ(dp)
  3. ImageViewのandroid:srcに画像を設定

ただし、画像が不要な場合はImageViewを削除します。

任意項目

CollapsingToolbarLayoutの部分でスクロール時の挙動や閉じた時の色を設定できます。

CollapsingToolbarLayout
app:layout_scrollFlags

“scroll"に加え、以下を追加で設定できます。

enterAlways スクロールした時に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"/>

参考