現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。2015の18日目の記事です。一覧はこちらこんにちは。(takahirom)です。現在自分の担当しているアプリでそのようなレイアウトを検討しているので詳細を調べてみました。Libraryが発表されました。Designを実装するためのさまざまなコンポーネントが存在します。それらのコンポーネントの中にCoordinatorLayoutというレイアウトが存在します。これはスクロールした時にバーを隠すなどさまざまなことができるレイアウトです。今回は、そのCoordinatorLayoutに焦点を当て、仕組みを含めて紹介していきます。4.0以上)モジュールのbuild.gradleファイルに以下の記述を追記してdependenciesを追加します。"com.android.support:design:23.1.1"}CoordinatorLayoutとはCoordinatorLayoutのCoordinatorには調整者やまとめ役という意味があります。CoordinatorLayoutはAndroidのLinearLayoutなどのViewGroupの種類の一つで、CoordinatorLayoutを使うことで、子Viewの大きさや位置を動的に管理できます。デフォルトのプロジェクトのテンプレートなどの例を見ながらこのレイアウトを理解していきましょう。Studioのデフォルトのテンプレートで作成できるScrollingActivityを見ていきましょう。Activityで作成することができます。レイアウトファイルは以下のファイルとなります。/></android.support.design.widget.CoordinatorLayout>シンプルに構造だけ記述すると以下のようなレイアウトになっています。<FloatingActionButton/></CoordinatorLayout>本格的にCoordinatorLayoutの説明をする前に、このレイアウトの中を説明してきます。AppBarLayoutAppBarLayoutは画像中の青色の部分のレイアウトになります。AppBarLayoutはLinearLayoutを継承しており、縦並びのレイアウトとなっています。AppBarLayoutの子View(今回はCollapsingToolbarLayout)にレイアウトxmlでlayout_scrollFlagsを設定することで、スクロールした時の動きを変えることができます。これから、それらの動きを見ていきましょう。exitUntilCollapsedAppBarLayoutの子Viewにlayout_scrollFlags=”scroll|exitUntilCollapsed”をつけた場合、スクロール可能なViewが一番上までスクロールした時に、スクロールに応じて子ViewのminHeightまでAppBarLayoutは小さくなります。今回のサンプルで使用されているCollapsingToolbarLayoutでは内部で子ViewであるToolbarの高さを利用して自身のminHeightを決定しています。このminHeightを基にAppBarLayoutの表示上の最小の高さが決定されています。enterAlwayslayout_scrollFlags=”scroll|enterAlways”をつけた場合、minHeightなどと関係なく、スクロールに応じてAppBarLayoutは小さくなります。下にスクロールしようとするとすぐに表示されるようになります。この動きはクイックリターンと呼ばれています。こちらもminHeightなどと関係なく小さくなりますが、スクロール可能なViewで一番上までスクロールしていくと表示されます。組み合わせる例えばタブはすぐに出てきて、ツールバーは上にスクロールするまでは出さないというレイアウトを行いたいとします。このような場合は、上記のフラグを組み合わせて実現します。AppBarLayout内を以下のように設定して、AppBarLayout内にTabLayoutを追加することで可能になります。CollapsingToolbarLayoutにenterAlwaysCollapsedをつけることによって上までスクロールした時に表示され、TabLayoutにenterAlwaysをつけることによってスクロールに応じてすぐに表示されるレイアウトを実装できます。</android.support.design.widget.AppBarLayout>app:layout_scrollFlags周辺と構造だけ取り出すと以下の様になっています。--></CoordinatorLayout>このように、普通に使っていく場合は以上のようにCoordinatorLayoutと便利なViewやフラグを使っていくことでリッチなレイアウトの動きを実現できます。深掘りして、自分でもそういったレイアウトの動きを実現できるようにしてみましょう。CoordinatorLayoutのBehaviorBehaviorとは直訳すると振る舞いですが、Viewに対して振る舞いを記述することができるクラスです。Library内のFloatingActionButtonのBehaviorなどの例を見ながら説明していきます。FloatingActionButtonのBehaviorこれまでの画像中に出てきた丸型の赤いボタン(メールアイコン)はFloatingActionButton(以下FAB)といいます。スクロール時にFABが隠れたり現れたりする理由はBehaviorというCoordinatorLayoutの仕組みによって実現されています。現在のFloatingActionButtonの振る舞いを整理してみましょう。Snackbar(下の黒いバー)が表示されるとFABが一緒に上に移動するlayout_anchor(後述)で指しているAppBarLayoutが小さくなるとFABが消えるこの振る舞いはどのように実装されているでしょうか。Behaviorの特徴的な点として依存関係を定義できる点があります。子ViewAが子ViewBに依存させたとします。子ViewAは子ViewBの位置などが変わった時に、変更を受け取って、子ViewAの大きさを変えたりする事が簡単にできます。さきほどまでのサンプル実装では以下のようにFABをレイアウトに記述していました。/>この中にapp:layout_anchor=”@id/app_bar”という記述があります。このような指定をすることでFABは@id/app_bar(AppBarLayout)のViewの位置や大きさが変わったことを受け取ることができます。他に依存するViewはあるのか、依存するViewが変わったのをどうやって受け取るのかを見るためにFloatingActionButtonの実装を見てみましょう。FloatingActionButtonのクラスは以下のように宣言されています。FloatingActionButton.Behavior.classを指定しています。そのBehaviorクラスの実装を見ていきましょう。省略CoordinatorLayout.Behaviorを継承して、Behavior#layoutDependsOn()とBehavior#onDependentViewChanged()を実装しています。それぞれを見ていきましょう。Behavior#layoutDependsOn()位置などの変更を受け取りたいViewであればtrueを返すことによって変更受け取ることができるようになります。ここではSnackbar.SnackbarLayoutの位置や大きさが変わったのを受け取るというものになっています。Behavior#onDependentViewChanged()Behavior#layoutDependsOn()によってSnackbar.SnackbarLayoutの位置などが変わった時と、layout_anchorによってAppBarLayoutの位置などが変わった時に呼ばれます。updateFabTranslationForSnackbar()はSnackbarの位置が変わった時に呼ばれ、FABの位置を上に上げる動作が行われます。updateFabVisibility()はAppBarLayoutの高さによってFABの表示と非表示を切り替えます。これを図に表すと以下のようになります。AppBarLayoutのスクロールの仕組みBehaviorは、他にも様々なイベントを受け取ることができます。スクロールイベントを受け取る仕組みです。CoordinatorLayoutの子Viewに、NestedScrollViewやRecyclerViewなどのCoordinatorLayoutに対応したスクロール可能なViewがある場合に、Behaviorでスクロールイベントを受け取ることができます。先ほど紹介した青い部分の伸縮などを行うレイアウトのAppBarLayoutのコードを見ていきましょう。BehaviorとしてAppBarLayout.Behaviorが定義されています。NestedScrollViewのスクロールのイベントを受け取って、Viewを操作することが可能になります。AppBarLayout.Behaviorはこのようなメソッドを実装することによって特殊な振る舞いをするレイアウトを実装していました。これを図にすると以下の様な流れになります。違った例を見ていきましょう。SwipeDismissBehavior他にもBehaviorにはタッチイベントを受け取る仕組みがあるので、それを利用したSwipeDismissBehaviorというBehaviorがあり、これを利用することでスワイプすることで消えるような振る舞いを実装することが可能となります。cardViewLayoutParams).setBehavior(behavior);では、これまで見てきた知識を使って自分でBehaviorを実装してみましょう。カスタムBehaviorを実装してみようAppBarLayoutが出てくるに従って、スクロールすると画面の下から出てくるボトムバーを実装するには以下のように行います。Behavior#layoutDependsOn()でAppBarLayoutの位置の変更を受け取れるようにして、Behavior#onDependentViewChanged()でAppBarLayoutの現在の位置を受け取って、下のバーの位置を変更します。LibraryのCoordinatorLayoutを利用することで動的なレイアウトを比較的簡単に実装することができました。みなさんもアプリにスクロール時の動きを実装したいときは、CoordinatorLayoutを検討してみるのはいかがでしょうか。Androidのソースコードはオープンソースになっており、中身を見れば分かることがたくさんあり、なにより楽しいです。ヤフーではワイルドにチャレンジしていく事ができる文化があります。調べて勉強してそれをプロダクトに反映していけた時はとても嬉しいです。Inc.の登録商標または商標です。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。