no risk no life

技術、投資、時事など

トップ > Android > MaterialSheetFabライブラリ導入所感

MaterialSheetFabライブラリ導入所感

Android

GitHub

https://github.com/gowong/material-sheet-fab

LicenseはMIT。

Gradle

CardViewを別途追記する。

dependencies {
  compile 'com.android.support:cardview-v7:26.0.1'
  compile 'com.gordonwong:material-sheet-fab:1.2.1'
}

ProGuard

MaterialSheetFab内でArcAnimatorを使用しているのでProGuardに追記する。

-keep class io.codetail.animation.arcanimator.** { *; }

Layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    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">
    <data>

    </data>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

        <include
            android:id="@+id/app_bar_main"
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

    </android.support.v4.widget.DrawerLayout>
</layout>

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    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">
    <data>

    </data>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".app.presentation.main.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_insetEdge="bottom"
            app:menu="@menu/bottom_navigation_item" />

        <com.example.app.Fab
            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"
            app:srcCompat="@android:drawable/ic_dialog_email" />

        <com.gordonwong.materialsheetfab.DimOverlayFrameLayout
            android:id="@+id/overlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <io.codetail.widget.RevealLinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="end|bottom"
            android:orientation="vertical"
            app:layout_dodgeInsetEdges="bottom">

            <android.support.v7.widget.CardView
                android:id="@+id/fab_sheet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="32dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/fab_sheet_item_camera"
                        android:drawableLeft="@drawable/ic_menu_camera"
                        android:drawableStart="@drawable/ic_menu_camera"
                        android:padding="4dp"
                        android:text="Camera" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/accentColor">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:id="@+id/fab_sheet_item_edit"
                            android:drawableLeft="@drawable/ic_menu_edit"
                            android:drawableStart="@drawable/ic_menu_edit"
                            android:padding="4dp"
                            android:text="Edit" />
                    </LinearLayout>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </io.codetail.widget.RevealLinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</layout>

CustomFab

MaterialSheetFab GitHubから引用

import android.support.design.widget.FloatingActionButton;

public class Fab extends FloatingActionButton implements AnimatedFab {

   /**
    * Shows the FAB.
    */
    @Override
    public void show() {
        show(0, 0);
    }

    /**
     * Shows the FAB and sets the FAB's translation.
     *
     * @param translationX translation X value
     * @param translationY translation Y value
     */
    @Override
    public void show(float translationX, float translationY) {
        // NOTE: Using the parameters is only needed if you want
        // to support moving the FAB around the screen.
        // NOTE: This immediately hides the FAB. An animation can 
        // be used instead - see the sample app.
        setVisibility(View.VISIBLE);
    }

    /**
     * Hides the FAB.
     */
    @Override
    public void hide() {
        // NOTE: This immediately hides the FAB. An animation can
        // be used instead - see the sample app.
        setVisibility(View.INVISIBLE);
    }
}

Activity


public class MainActivity extends BaseActivity {

    private ActivityMainBinding binding;

    private MaterialSheetFab<CustomSheetFab> materialSheetFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        setSupportActionBar(binding.appBarMain.toolbar);

        initMaterialSheetFab();
    }

    @Override
    public void onBackPressed() {
        if (materialSheetFab.isSheetVisible()) {
            materialSheetFab.hideSheet();
        } else {
            super.onBackPressed();
        }
    }

    private void initMaterialSheetFab(){
        materialSheetFab = new MaterialSheetFab<>(binding.appBarMain.fab, binding.appBarMain.fabSheet, binding.appBarMain.overlay,
                ContextCompat.getColor(this, R.color.fab_sheet_color), ContextCompat.getColor(this, R.color.fab_color));

        materialSheetFab.setEventListener(new MaterialSheetFabEventListener() {
            @Override
            public void onShowSheet() {
                // Called when the material sheet's "show" animation starts.
            }

            @Override
            public void onSheetShown() {
                // Called when the material sheet's "show" animation ends.
            }

            @Override
            public void onHideSheet() {
                // Called when the material sheet's "hide" animation starts.
            }

            public void onSheetHidden() {
                // Called when the material sheet's "hide" animation ends.
            }
        });
    }

}

所感

  • 気軽にFABにオーバーフローメニューを作成できる
  • アニメーションも勝手にしてくれる。楽しい。
  • 一見良さそうなライブラリに見えるが、Material Design GuidelinesにはDon'tに含まれている。
  • Guidelines無視するなら使い勝手は良い。