FloatingActionButton(FAB)
さあ、かなり目標に近づいてきました。最後の仕上げとしてFloatingActionButton(FAB)を実装しましょう。FloatingActionButtonはCoordinatorLayout配下で使用することによって、同じくCoordinatorLayout配下の任意の画面部品上に浮かした状態で表示できるボタンです。activity_scroll_article.xmlのCoordinatorLayoutの閉じタグ直前に以下のコードを追記してください。
~省略~
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:layout_anchor="@id/app_bar" // (1)
app:layout_anchorGravity="bottom|end" // (2)
app:srcCompat="@android:drawable/ic_dialog_email"/> // (3)
</android.support.design.widget.CoordinatorLayout>
ここでのポイントは2個です。
まず、CoordinatorLayout配下のどの画面部品の上に浮かすかを指定します。それが(1)で、app:layout_anchor属性を使います。指定方法は「@id/」の後に画面部品のid値を記述します。ここでは、idがapp_bar、つまり、AppBarLayout上に浮かせて表示させます。
次に、その画面部品内のどの位置に表示させるかを指定します。それが(2)で、app:layout_anchorGravity属性を使います。ここでは「bottom|end」と指定しているので、右下です。
なお、(3)のapp:srcCompat属性は表示するアイコンを指定する属性です。ここでは、Android標準で用意されているメールのアイコンを指定しています。
ところで、FABは特殊なボタンとはいえ、あくまでボタンです。したがって、android:onClick属性やリスナ登録で、通常のボタン同様にタップされたときの処理を記述できます。
この状態でアプリを再起動してください。当初の目標とした以下の画面が表示されていると思います。
さらに、スクロールすると、以下のようにアクションバーが縮小し、FABが消えます。
Scrolling Activity
最後に、Scrolling Activityを紹介します。
プロジェクトを作成する際のウィザードですが、今までのサンプルプロジェクトはすべて第3画面(Add an activity画面)でEmpty Activityを選択してきました。この画面には、実はScrolling Activityという選択肢があります。
これを選択すると、今までレイアウトxmlファイルにコーディングしてきた内容をあらかじめ記述された状態にしてくれます。そのため、プロジェクトを作成しただけで、FAB付きでスクロール連動します。ただ、この状態からプロジェクトを改造していくには、ここまで説明してきた内容を理解しておく必要があります。そういった意味で、まずは自分で一からスクロール連動を作成しておくことには意味があります。
まとめ
前回と今回の2回に分けてマテリアルデザインと、その典型的な画面構成としてスクロール連動を扱ってきました。次回は、いよいよこの連載の最終回となります。今回紹介したNestedScrollViewと同じ仲間であるRecyclerViewを扱います。
