web-dev-qa-db-ja.com

Android Design Support Libraryの拡張可能なフローティングアクションボタン（FAB）メニュー

Android Design Support Libraryが公開されたので、Inbox Appのファブのように、拡張Fabメニューを実装する方法を誰かが知っていますか？

このようになります：

enter image description here

androidmaterial-designfloating-action-buttonspeed-dial
150
EkKoZ

現在、デザインライブラリにウィジェットはありません。それを素早く簡単にする唯一の方法はサードパーティのライブラリを使うことです。

デザインライブラリを使用してこれを行うこともできますが、それは大変な作業になり、多くの時間がかかります。私はあなたがこれを達成するのを助けることができるいくつかの役に立つライブラリを述べました。

  1. ラピッドフローティングボタン （wangjiegulu）
  2. フローティングアクションボタン （氏族）
  3. フローティングアクションボタン （makovkastar）
  4. Androidのフローティングアクションボタン （futuresimple）

私は4番目のものを使っています。

137
Aritra Roy

これに答えるのは少し遅れますが、ライブラリを使用せずにアニメーションFABメニューを実装したり、アニメーション用の巨大なxmlコードを書いたりするためのより良いアプローチを得ました。これを実装するための簡単な方法が必要な人にとってこれが将来役立つことを願っています。

したがって、animate（）、translationY（）関数を使用するだけで非常に簡単になり、下のコードで行ったようにFABを上下にアニメートできます。 githubで完全なコードを確認します 。

最初にすべてのFABを同じ場所に定義し、それらが互いに重なり合うようにします。FABの上には、クリックして他を表示する必要があることを忘れないでください。例えば：

    <Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab3"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_btn_speak_now" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab2"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_menu_camera" />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab1"
    Android:layout_width="@dimen/standard_45"
    Android:layout_height="@dimen/standard_45"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/standard_21"
    app:srcCompat="@Android:drawable/ic_dialog_map" />

<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"
    app:srcCompat="@Android:drawable/ic_dialog_email" />

今すぐあなたのJavaクラスでちょうどあなたのすべてのFABを定義して、そして次に示すようにクリックを実行してください：

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab1 = (FloatingActionButton) findViewById(R.id.fab1);
    fab2 = (FloatingActionButton) findViewById(R.id.fab2);
    fab3 = (FloatingActionButton) findViewById(R.id.fab3);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(!isFABOpen){
                showFABMenu();
            }else{
                closeFABMenu();
            }
        }
    });

FABをアニメートするにはanimation（）。translationY（）を使用します。intを使用すると高解像度または低解像度のディスプレイの互換性が損なわれるため、このメソッドの属性をDPで使用することをお勧めします。以下に示すように：

 private void showFABMenu(){
    isFABOpen=true;
    fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
    fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
    fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}

private void closeFABMenu(){
    isFABOpen=false;
    fab1.animate().translationY(0);
    fab2.animate().translationY(0);
    fab3.animate().translationY(0);
}

次に示すように、res-> values-> dimens.xmlの中に上記のディメンションを定義します。

    <dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>

この解決策が、将来的に簡単な解決策を探している人々に役立つことを願っています。

編集済み

もしあなたがFABの上にラベルを追加したいならそれから単純に水平のLinearLayoutを取り、ラベルとしてtextviewでFABを置き、そしてこれをする何か問題を見つけるならばレイアウトをアニメートする、あなたはgithubで私のサンプルコードをチェックできる。そのサンプルコードの問題。 GithubでFABMenuのサンプルコードを確認してください

backpressでFABを閉じるには、次に示すようにonBackPress（）をオーバーライドします。

    @Override
public void onBackPressed() {
    if(!isFABOpen){
        this.super.onBackPressed();
    }else{
        closeFABMenu();
    }
}

私は自分の サンプルアプリの現在のingithub からそれを取っているので、スクリーンショットもFABと同じタイトルを持っています

enter image description here

131
HAXM

  • まず、アクティビティレイアウトのxmlファイルにメニューレイアウトを作成します。例えば水平方向の線形レイアウトで、ラベルにはTextView、次にTextViewの横にはフローティングアクションボタンがあります。

  • あなたの必要性および数に従ってメニューレイアウトを作成しなさい。

  • ベースフローティングアクションボタンを作成し、クリックするとメニューレイアウトの表示設定を変更します。

以下のコードを参考にして、より詳しい情報についてはgithubから私のプロジェクトをチェックアウトしてください。

Githubからのチェックアウトプロジェクト

<Android.support.constraint.ConstraintLayout
            Android:id="@+id/activity_main"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.app.fabmenu.MainActivity">

            <Android.support.design.widget.FloatingActionButton
                Android:id="@+id/baseFloatingActionButton"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="16dp"
                Android:layout_marginEnd="16dp"
                Android:layout_marginRight="16dp"
                Android:clickable="true"
                Android:onClick="@{FabHandler::onBaseFabClick}"
                Android:tint="@Android:color/white"
                app:fabSize="normal"
                app:layout_constraintBottom_toBottomOf="@+id/activity_main"
                app:layout_constraintRight_toRightOf="@+id/activity_main"
                app:srcCompat="@drawable/ic_add_black_24dp" />

            <LinearLayout
                Android:id="@+id/shareLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="12dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/createLayout"
                app:layout_constraintLeft_toLeftOf="@+id/createLayout"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/shareLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Share"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />


                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/shareFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onShareFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_share_black_24dp" />

            </LinearLayout>

            <LinearLayout
                Android:id="@+id/createLayout"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="24dp"
                Android:layout_marginEnd="24dp"
                Android:layout_marginRight="24dp"
                Android:gravity="center_vertical"
                Android:orientation="horizontal"
                Android:visibility="invisible"
                app:layout_constraintBottom_toTopOf="@+id/baseFloatingActionButton"
                app:layout_constraintRight_toRightOf="@+id/activity_main">

                <TextView
                    Android:id="@+id/createLabelTextView"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginEnd="8dp"
                    Android:layout_marginRight="8dp"
                    Android:background="@drawable/shape_fab_label"
                    Android:elevation="2dp"
                    Android:fontFamily="sans-serif"
                    Android:padding="5dip"
                    Android:text="Create"
                    Android:textColor="@Android:color/white"
                    Android:typeface="normal" />

                <Android.support.design.widget.FloatingActionButton
                    Android:id="@+id/createFab"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:clickable="true"
                    Android:onClick="@{FabHandler::onCreateFabClick}"
                    Android:tint="@Android:color/white"
                    app:fabSize="mini"
                    app:srcCompat="@drawable/ic_create_black_24dp" />

            </LinearLayout>

        </Android.support.constraint.ConstraintLayout>

これらはアニメーションです

FABメニューのアニメーションを開く：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="0"
    Android:fromYScale="0"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="1"
    Android:toYScale="1" />
<alpha
    Android:duration="300"
    Android:fromAlpha="0.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="1.0" />

</set>

FABメニューのアニメーションを閉じる：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fillAfter="true">
<scale
    Android:duration="300"
    Android:fromXScale="1"
    Android:fromYScale="1"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:toXScale="0.0"
    Android:toYScale="0.0" />
<alpha
    Android:duration="300"
    Android:fromAlpha="1.0"
    Android:interpolator="@Android:anim/accelerate_interpolator"
    Android:toAlpha="0.0" />
</set>

それから私のアクティビティでは、FABメニューの表示と非表示を切り替えるために上記のアニメーションを使用しました。

ファブメニューを表示：

  private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;

}

ファブメニューを閉じる：

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}

これがActivityクラスです - 

package com.app.fabmenu;

import Android.databinding.DataBindingUtil;
import Android.os.Bundle;
import Android.support.design.widget.Snackbar;
import Android.support.v4.view.ViewCompat;
import Android.support.v7.app.AppCompatActivity;
import Android.view.View;
import Android.view.animation.Animation;
import Android.view.animation.AnimationUtils;
import Android.view.animation.OvershootInterpolator;

import com.app.fabmenu.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

private ActivityMainBinding binding;
private Animation fabOpenAnimation;
private Animation fabCloseAnimation;
private boolean isFabMenuOpen = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    binding = DataBindingUtil.setContentView(this,    R.layout.activity_main);
    binding.setFabHandler(new FabHandler());

    getAnimations();


}

private void getAnimations() {

    fabOpenAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_open);

    fabCloseAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_close);

}

private void expandFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabOpenAnimation);
    binding.shareLayout.startAnimation(fabOpenAnimation);
    binding.createFab.setClickable(true);
    binding.shareFab.setClickable(true);
    isFabMenuOpen = true;


}

private void collapseFabMenu() {

    ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start();
    binding.createLayout.startAnimation(fabCloseAnimation);
    binding.shareLayout.startAnimation(fabCloseAnimation);
    binding.createFab.setClickable(false);
    binding.shareFab.setClickable(false);
    isFabMenuOpen = false;

}


public class FabHandler {

    public void onBaseFabClick(View view) {

        if (isFabMenuOpen)
            collapseFabMenu();
        else
            expandFabMenu();


    }

    public void onCreateFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Create FAB tapped", Snackbar.LENGTH_SHORT).show();

    }

    public void onShareFabClick(View view) {

        Snackbar.make(binding.coordinatorLayout, "Share FAB tapped", Snackbar.LENGTH_SHORT).show();

    }


}

@Override
public void onBackPressed() {

    if (isFabMenuOpen)
        collapseFabMenu();
    else
        super.onBackPressed();
}
}

これがスクリーンショットです

Floating Action Menu with Label Textview in new Cursive Font Family of Android

Floating Action Menu with Label Textview in new Roboto Font Family of Android

28
Prashant

材料設計ガイドラインの 短縮ダイヤル を実装するライブラリがもう1つあります。

https://github.com/leinardi/FloatingActionButtonSpeedDial

enter image description here

13
Roberto Leinardi

私はインボックスフローティングアクションボタンに似た何かを作成しようとしたとき、私は自分自身のカスタムコンポーネントを作成することを考えました。

それは、FABボタンを含み、さらに3つがFABの下に配置された、固定された高さ（拡張メニューを含む）の単純なフレームレイアウトです。 FABをクリックすると、他のボタンを動かしてFABの下から上に移動するだけです。

それをするいくつかのライブラリがあります（例えば https://github.com/futuresimple/Android-floating-action-button ）、しかしそれは常にあなたが自分でそれを作成した場合、もっと楽しく:)

6
rwojcik

あなたはFloatingActionMenuライブラリを使うことができます、または ここをクリック ステップバイステップのチュートリアルのために。チュートリアルの出力：

enter image description here

6
Pacific P. Regmi

私はこれを行うためにこのライブラリを使用します。 https://github.com/futuresimple/Android-floating-action-button

使い方はとても簡単です。

enter image description here

2
florent champigny