Be simple

”当たり前”が誰かのためになる

FloatingActionButtonを使ってみた #1

はじめに

みなさん、こんばんは!

お久しぶりです。

 

最近、ちょっと忙しいので更新が遅くなってしまい申し訳ありません。(言い訳タイム終了)

多分、これからは最低一種間に一度は更新していくペースでやっていきます!

 

さてさて、今回は、個人アプリでも使っているFloatingActionButtonについて書いていきます。

 

誰かに向けてというよりは、メモになりますがFABをあまり触ったことがない人が適当に調べてみたことについて書いていきます。

 

また、今回はDataBindingを使用しております。

DataBindingが分からない方は、先に次のリンクを確認したうえで読み進めていただけると幸いです。

 

ちょっとDataBindingの専門的なことではないですが、使えるようになるまでを書いているので参照していただけると嬉しいです。

 

rozkey.hatenablog.com

 

FloatingActionButtonとは

下記画像の赤枠の部分です!(画面は開発中の個人アプリのモノになります。いろいろ突っ込みどころはあると思いますが、無視してくださると嬉しいです。)

 

f:id:rozkey59:20180421220310p:plain

 

Androidだとよく画面の右下に配置されているボタンのことについて書いていきます。

 

ちなみに、公式にもドキュメントがあるので基本的なことを知りたい方は次のリンクを参照してください!

Add a Floating Action Button | Android Developers

 

FloatingActionButtonはこうやるんやで―的なことが書かれています

 

実装の仕方

一応先にですが、単純にサンプルを試したい方は、File > New > New ProjectをNextしていくと下記のような画面でBasicActivityを選択することで簡単にサンプルを試すことができます。

 

f:id:rozkey59:20180421220934p:plain

 

基本的には、CoordinatorLayoutと併用して使うと個人的には思います。

FABを使う場合には、下記のような実装になります。

 

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.zukkey.groupiesample.MainActivity">
  
// 中間部分は省略

// ここから
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:tint="@color/makepura_white"
app:srcCompat="@drawable/ic_camera_alt_black_24dp" />
// ここまで
</android.support.design.widget.CoordinatorLayout>

 

FABはCoordinatorLayoutの中に入れて使用してください。

また、よくある画面にする場合は、layout_gravityをbottom | endで指定することでできます。

 

また、FABは深く中身を追っていくとImageViewを継承しているのでsrcCompatで変えたいアイコンに変更することが可能です。

 

色を変更したい場合は、tintのattributeで変更することができます。

自分の場合は白色にしたかったので変更しています。

 

FABのサイズを変更する

fabにはサイズを変更できるattributeがあります。

app:fabSize="auto"

 

FABのコードの中身を見ていくと、下記のようにあります。

* <p>Floating action buttons come in two sizes: the default and the mini. The size can be
* controlled with the {@code fabSize} attribute.</p>

二つのサイズを選ぶことができ、defaultとしては次のコードがあるためautoが選択されているようです。

mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, SIZE_AUTO);

 

attributeの選択肢としては、normal, mini, autoの三つがあるようですが、autoは画面サイズから変わらないようにしてあるっぽいです。

 

一応、fabSizeがminiの場合とautoの場合を見ていきましょう!

miniの場合

次のようになります

f:id:rozkey59:20180421225251p:plain

 

若干気持ち小さい感じがします。normalの場合も見ていきましょう!

 

normalの場合

こちらがデフォルトの選択になります。

 

f:id:rozkey59:20180421225228p:plain

 

さっきと比べて、サイズが大きいことが分かります。

 

次は、FABがScrollしたときによくある見え隠れする実装について書いていきます。

FABがScrollした時の処理について

もっとコンテンツを読み込もうと、画面を上にスクロールしたときにFABの挙動が変わることがあるのはよく体験していると思います。

実際には、次の通りです。

 

f:id:rozkey59:20180421230107g:plain

 

実装するのは意外にも簡単で、実際のコードは以下になります。


binding.mainItems.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
if (dy > 0 && binding.fab.isShown) {
binding.fab.hide()
} else if (dy < 0 && !binding.fab.isShown) {
binding.fab.show()
}
}
})

 

binding.mainItemsはRecyclerViewで、DataBindingを使用していない場合はrecycler_viewとかでできると思います。

ここでやっていることとしては、y軸で見たときにhideとshowを呼び出すようにしています。

animationをつけたりする場合は、また変わってくるので後ほど記事にして共有しようと思います。

 

さいごに

 今回は、FABについて調べてやってみたことについての共有でした。

今回サンプルとして紹介しているアプリ、価格相場アプリ「Makepura」は4月下旬~5月上旬リリース予定で進めています。

また、報告できるようになったら記事にしようと思います。

最後まで見ていただきありがとうございました!

少しでもお役に立てたら嬉しいです。

では、また次回まで!