Lift On Scroll を使ってみる
Material Design 大好き NUmero です。
Material Design がガラッと変わってからというもの、なんだかんだで毎日見ていますw
Lift On Scroll とは
で、タイトルにある Lift On Scroll てなんぞやと。
説明の前に、これは正式名ではありません。
大事なことなので 2 回言いますが、これは正式名ではありません。
ここにさらっと記載されているだけで、名前がないんです。
じゃあ Lift On Scroll はどこから出てきたのかというと、コードで記述する際の Attribute、属性の名前なんです。 コードについては後ほど記載します。
Lift On Scroll とは Toolbar とコンテンツを同じ elevation で配置しておき、コンテンツをスクロールすることで Toolbar の elevation を上げるというものです。Android の Google が出してるポッドキャストのアプリで使われていましたね。
実装について
前提条件として、Material Components 1.0.0-beta01 もしくは Support Library 28.0.0-alpha3 を使用してください。
実装自体は簡単で、AppBarLayout に app:liftOnScroll="true" を追加するだけです。
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
app:liftOnScroll="true">
</com.google.android.material.appbar.AppBarLayout>
注意して欲しいのは、
・コンテンツが NestedScrollView もしくは RecyclerView であること
・上記の View に対し app:layout_behavior="@string/appbar_scrolling_view_behavior" を記載していること(親 View が CoordinatorLayout である必要がある )
という少し使いにくいかもしれない条件があります。
実装すると、こんな感じになります。
実際に使ったサンプルコードのリンクも記載しておきます。
補足
自分が試してて Material Components 1.0.0-beta01 と Support Library 28.0.0-alpha3 では RecyclerView に対しては LiftOnScroll が適用されませんでした。バグかなとか思いつつ、ライブラリの更新で何かあれば更新します。
この記事が気に入ったらサポートをしてみませんか?