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

うさがにっき

読書感想文とプログラムのこと書いてきます

Floating Action Buttonを使った俺流speeddialの実装方法

Android

概要

Floating Action Button(以降fab)を使ったspeeddialを実装したので、その方法をまとめておく

こんな感じの
f:id:tiro105:20160109214132p:plain
f:id:tiro105:20160109214201p:plain

詳細

layout

レイアウトでは展開するfabを重ねておく
初期表示で表示しないものはvisible:goneにしておく

<RelativeLayout
    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="suumotools.android.recruit.co.jp.suumotools.fragment.BukkenDetailFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/detail_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

    <!-- fabをタップした時有効にする背景 -->
    <View
        android:id="@+id/fab_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/fab_background_color"
        android:visibility="gone"/>

    <!-- fabのテキストとボタンをまとめたレイアウト -->
    <LinearLayout
        android:id="@+id/fab_camera_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/camera_text"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:text="@string/list_camera_title"
            android:textColor="@color/fab_icon_color"
            android:textSize="20dp"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_camera"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@drawable/fab_camera"
            app:backgroundTint="@color/fab_icon_color"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/fab_compass_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/compass_text"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:text="@string/list_compass_title"
            android:textColor="@color/fab_icon_color"
            android:textSize="20dp"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_compass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@drawable/fab_compass"
            app:backgroundTint="@color/fab_icon_color"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/fab_noise_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/noise_text"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:text="@string/list_noise_title"
            android:textColor="@color/fab_icon_color"
            android:textSize="20dp"
            android:layout_gravity="center"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_noise"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@drawable/fab_noise"
            app:backgroundTint="@color/fab_icon_color"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/fab_speed_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/speed_text"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:text="@string/list_communication_title"
            android:textColor="@color/fab_icon_color"
            android:textSize="20dp"
            android:layout_gravity="center"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@drawable/fab_speed"
            app:backgroundTint="@color/fab_icon_color"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/fab_memo_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">

        <TextView
            android:id="@+id/memo_text"
            android:layout_width="wrap_content"
            android:layout_height="56dp"
            android:text="@string/list_memo_title"
            android:textColor="@color/fab_icon_color"
            android:textSize="20dp"
            android:layout_gravity="center"
            />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_memo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@drawable/fab_memo"
            app:backgroundTint="@color/fab_icon_color"/>
    </LinearLayout>

    <!-- 最前面に表示するfab -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:src="@drawable/fab_add"
        app:backgroundTint="@color/fab_add_color"/>
</RelativeLayout>

java

ボタンの状態が開いているか閉じているかを管理する列挙体を作成する

    enum ButtonState {
        OPEN,
        CLOSE
    }

    ButtonState mButtonState;


現在の状態によってボタンの挙動を管理する

mFabAdd.setOnClickListener((View clickView) -> {
            // fabsize 56dp
            int iconWhile = PxDpUtil.dpToPx(66, getActivity().getApplicationContext());

            if (mButtonState == ButtonState.CLOSE) {
                fabOpen(iconWhile);
            } else {
                fabClose();
            }
        });


fabOpenメソッドでは指定した幅だけfabを上に上げ、背景に編みかけをつける

    private void fabOpen(int iconWhile) {
        mFabCameraLayout.setVisibility(View.VISIBLE);
        ObjectAnimator anim = ObjectAnimator.ofFloat(mFabCameraLayout, "translationY", -iconWhile);
        anim.setDuration(200);
        anim.start();

        mFabCompassLayout.setVisibility(View.VISIBLE);
        anim = ObjectAnimator.ofFloat(mFabCompassLayout, "translationY", -iconWhile * 2);
        anim.setDuration(200);
        anim.start();

        mFabNoiseLayout.setVisibility(View.VISIBLE);
        anim = ObjectAnimator.ofFloat(mFabNoiseLayout, "translationY", -iconWhile * 3);
        anim.setDuration(200);
        anim.start();

        mFabSpeedLayout.setVisibility(View.VISIBLE);
        anim = ObjectAnimator.ofFloat(mFabSpeedLayout, "translationY", -iconWhile * 4);
        anim.setDuration(200);
        anim.start();

        mFabMemoLayout.setVisibility(View.VISIBLE);
        anim = ObjectAnimator.ofFloat(mFabMemoLayout, "translationY", -iconWhile * 5);
        anim.setDuration(200);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabAdd, "rotation", 45);
        anim.setDuration(200);
        anim.start();

        mButtonState = ButtonState.OPEN;
        mFabBackground.setVisibility(View.VISIBLE);
    }


fabCloseメソッドではfabを元の場所に戻し、背景の編みかけをgoneにする

    private void fabClose() {
        ObjectAnimator anim = ObjectAnimator.ofFloat(mFabCameraLayout, "translationY", 0);
        anim.setDuration(200);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabCompassLayout, "translationY", 0);
        anim.setDuration(200);
        anim.addListener(this);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabNoiseLayout, "translationY", 0);
        anim.setDuration(200);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabSpeedLayout, "translationY", 0);
        anim.setDuration(200);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabMemoLayout, "translationY", 0);
        anim.setDuration(200);
        anim.start();

        anim = ObjectAnimator.ofFloat(mFabAdd, "rotation", 0);
        anim.setDuration(200);
        anim.start();

        mButtonState = ButtonState.CLOSE;

        mFabBackground.setVisibility(View.GONE);
    }

あとは各fabにクリックイベントを設定すればOK