web-dev-qa-db-ja.com

サポートライブラリを使用したFloatingActionButtonの例

最近、私はこれらの記事を読みました：

Androidデザインサポートライブラリ

Android Support Library、リビジョン22.2.0

FloatingActionButton

しかし、それらのどれも新しいFloatingActionButtonを作成することについての詳細な例を私に与えません。わかりにくいので、この質問をします。

誰かが私にそれについて例を挙げてもらえますか？

どんな助けでも大いに感謝されます。前もって感謝します。

編集

私はFloatingActionButton（FAB）に関するいくつかの問題を見つけました、そしてもう一つの答えを改善したいです。下記の私の答えを見てください。

androidandroid-support-libraryfloating-action-buttonandroid-design-library
124
Anggrayudi H

それであなたのbuild.gradleファイルで、これを加えてください：

compile 'com.Android.support:design:27.1.1'

AndroidX注：古いサポートライブラリに代わる新しい AndroidX拡張ライブラリ が導入されました。 AndroidXを使用するには、まず がgradle.propertiesファイル を更新し、build.gradleを編集してcompileSdkVersionを28（またはそれ以上）に設定し、前のcompileの代わりに次の行を使用します。

implementation 'com.google.Android.material:material:1.0.0'

次に、あなたのthemes.xmlやstyles.xml、あるいは何でも、あなたがこれをセットすることを確認してください - あなたのアプリのアクセントカラー - そしてあなたがそれをオーバーライドしない限りあなたのFABのカラー - （下記参照）：

        <item name="colorAccent">@color/floating_action_button_color</item>

レイアウトのXMLでは、

<RelativeLayout
 ...
 xmlns:app="http://schemas.Android.com/apk/res-auto">

       <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/myFAB"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

docs （setRippleColorなど）には他にもオプションがありますが、注意が必要なのは次のとおりです。

    app:fabSize="mini"

もう1つ興味深い点は、1つのFABの背景色を変更することです。

    app:backgroundTint="#FF0000"

（例えば赤に変更するために）上記のXMLに。

とにかく、コードでは、Activity/Fragmentのビューが膨らんだ後は....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

所見：

  • 2つのビューを（たとえばRelativeLayoutを使用して）分割してボーダーをオーバーラップさせる「継ぎ目」上にこれらのボタンの1つがある場合、FABのサイズが実際にはLollipopとpre-Lollipopでは、非常に異なる。 APIを切り替えると、実際にはASのビジュアルレイアウトエディタでこれを確認できます。前のLollipopに切り替えると、突然「パフアウト」します。追加のサイズの理由は、影がビューのサイズをあらゆる方向に拡大するためです。そのため、FABのマージンを調整するときに他のものに近い場合は、これを考慮する必要があります。

  • これが多すぎる場合にパディングを削除または変更する方法は次のとおりです。

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop) {
    RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
    p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
    myFab.setLayoutParams(p);
}

  • また、FABの高さを2で割ってマージンオフセットとして使用することによって、RelativeLayoutの2つの領域の間の「継ぎ目」にプログラムでFABを配置することにしました。しかし、ビューが膨らんだ後でも、myFab.getHeight（）はゼロを返しました。代わりに、ViewTreeObserverを使用してレイアウト後の高さを取得してから位置を設定しました。こちらのヒントを参照してください here 。それはこんな感じでした：

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
    if (viewTreeObserver.isAlive()) {
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                // not sure the above is equivalent, but that's beside the point for this example...
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                closeButton.setLayoutParams(params);
            }
        });
    }

    これが正しい方法であるかどうかはわかりませんが、うまくいくようです。

  • 標高を下げると、ボタンの影のスペースを小さくできるようです。

  • FABを "縫い目"にしたい場合は、layout_anchorとlayout_anchorGravityを使用できます。これは例です。

    <Android.support.design.widget.FloatingActionButton
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    Android:src="@drawable/ic_discuss"
    Android:layout_margin="@dimen/fab_margin"
    Android:clickable="true"/>

Snackbar が CoordinatorLayout にラップすることで表示されたときに、ボタンが自動的に邪魔にならないようにジャンプさせることができます。

もっと：

267
fattire

私はFABでいくつかの問題を発見しました、そして私は別の答えを強化したいです。

setRippleColorの問題

そのため、setRippleColorを使用してプログラムで波紋の色（FABの色を押す）を設定すると問題が発生します。しかし、それを設定する別の方法がまだあります。

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

あなたのプロジェクトはこの構造を持つ必要があります。

/res/color/fab_ripple_color.xml

enter image description here

fab_ripple_color.xmlのコードは次のとおりです。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:color="@color/fab_color_pressed" />
    <item Android:state_focused="true" Android:color="@color/fab_color_pressed" />
    <item Android:color="@color/fab_color_normal"/>
</selector>

最後に、FABを少し変更します。

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/ic_action_add"
    Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@Android:color/transparent"/> <!-- set to transparent color -->

APIレベル21以上の場合は、右と下の余白を24dpに設定します。

...
Android:layout_marginRight="24dp"
Android:layout_marginBottom="24dp" />

FloatingActionButtonデザインガイド

上記のFAB xmlコードでわかるように、次のように設定します。

        ...
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

  • これらの属性を設定することで、layout_marginTopとlayout_marginRightを再度設定する必要はありません（Lollipop以前のみ）。 Androidは画面の右側の角に自動的に配置します。これはAndroid Lollipopの通常のFABと同じです。

        Android:layout_alignParentBottom="true"
    Android:layout_alignParentRight="true"

あるいは、これをCoordinatorLayoutで使用できます。

        Android:layout_gravity="end|bottom"
  • Googleの this guide によると、6dp elevationと12dp pressedTranslationZが必要です。

FAB rules

48
Anggrayudi H

FloatingActionButtonはImageViewを拡張します。それで、あなたのレイアウトにImageViewを導入するのと同じくらい簡単です。これがXMLのサンプルです。

<Android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@drawable/somedrawable"
    Android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

標高の問題に対する回避策としてapp:borderWidth="0dp"が追加されました。

12
siriscac

androidX用にはこんな感じ

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />
3
Dan Alboteanu