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

129

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

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

Android Support Library、リビジョン22.2.0

FloatingActionButton

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

誰か私にそれの例を教えてもらえますか？

どんな助けでも大歓迎です。前もって感謝します。

編集

FloatingActionButton（FAB）でいくつかの問題を見つけました。別の回答を改善したいと思います。以下の私の答えを参照してください。

android  android-support-library  floating-action-button  android-design-library 
— アングレーディH
ソース
— ガブリエレMariotti

回答:

274

だからあなたのbuild.gradleファイルにこれを追加してください：

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

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

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

あなたの次の、themes.xmlまたはstyles.xmlまたはものは何でも、（下記参照）を確認してください、あなたはそれを上書きしない限り、それはあなたのアプリケーションのアクセントcolor--とあなたのFABの色だthis-を設定します：

        <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>

または、上記のAndroidXマテリアルライブラリを使用している場合は、代わりにこれを使用します。

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

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

ドキュメント （ここで重要なドキュメント）（setRippleColor、など）でより多くのオプションを見ることができますが、注意の1つは次のとおりです。

    app:fabSize="mini"

別の興味深いもの-1つのFABのみの背景色を変更するには、以下を追加します。

    app:backgroundTint="#FF0000"

（たとえば、それを赤に変更するために）上記のXMLに変更します。

とにかく、コードでは、アクティビティ/フラグメントのビューがインフレートされた後...

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

観察：

  • たとえば「RelativeLayout」を使用して2つのビューを分割する「シーム」にあるこれらのボタンの1つに、たとえば、ボーダーと重なるように負のレイアウトマージンがある場合、問題が発生します。FABのサイズは実際にはロリポップとプリロリポップでは非常に異なります。APIを切り替えると、実際にASのビジュアルレイアウトエディターでこれを確認できます。プリロリポップに切り替えると、突然「吹き出し」ます。余分なサイズの理由は、影がビューのサイズをあらゆる方向に拡大するためです。したがって、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で除算し、それをマージンオフセットとして使用することで、プログラム的にFABをRelativeLayoutの2つの領域間の「シーム」に配置しました。しかし、myFab.getHeight（）はゼロを返しました。ビューがインフレートされた後でも、それは見えました。代わりに、ViewTreeObserverを使用して、レイアウトした後にのみ高さを取得し、位置を設定しました。こちらのヒントを ご覧ください。それはこのように見えました：

        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でラップすることにより、ボタンを自動的に邪魔にならないようにすることができます。

もっと：

— 太った
ソース
1
承知しました。android:backgroundTint="#FF0000"たとえば、XMLのFloatingActionBarに追加するだけです。（回答への追加）
— 太ったタイヤ
1
うーん。では、上で変更します。ありがとう！ダークレオンハート-組み込みのクイックリターンについては何も見たことがありませんが、Stackoverflowの別の場所でそれを実行したサンプルがあり、まだ機能すると思います。さらに、それを行うライブラリもいくつか利用できます。
— 2015年
1
私の意見では、22.2.0の時点で、このコンポーネントは製品の準備ができていません。ところで、タイプミスかもしれませんspが、evelationプロパティでは使用しないでください。それはする必要がありますapp:elevation="4dp"
— ジョアン・スーザ
1
（注）が追加されている場合FloatingActionButtonにはCoordinatorLayout、あなたが使用することができますapp:layout_anchor="element_with_seam"し、app:layout_anchorGravity="bottom|right|end"継ぎ目の上に正しくFABを配置する-参照cheesesquareからactivity_detailレイアウト
— ianhanniballake
2
@DarkLeonhart- 動作を拡張してスクロールでFABを表示/非表示にする私の例を確認してください。
— ianhanniballake 2015年
49

FABでいくつかの問題を見つけたので、別の答えを拡張したいと思います。

setRippleColorの問題

したがって、問題は、を介してプログラムでリップルカラー（押されたときのFABカラー）を設定すると発生しますsetRippleColor。しかし、それを設定する別の方法があります。つまり、次のように呼び出します。

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

ここに画像の説明を入力してください

そしてからのコード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以上の場合、マージンの右と下を24 dpに設定します。

...
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再び（のみ事前ロリポップ上）。Androidは自動的に画面の右隅に配置します。これは、Android Lollipopの通常のFABと同じです。

        android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"

または、これをCoordinatorLayout次の場所で使用できます。

        android:layout_gravity="end|bottom"
  • この Googleのガイドによるelevationと、6 dp と12 dpが必要です。pressedTranslationZ

FABルール

— アングレーディH
ソース
5
関連する研究に賛成。プラス1 pressedTranslationZ。知らなかった。
— Joao Sousa
app：elevation = "6dp" app：pressedTranslationZ = "12dp"はプレロリポップのトリックを実行しますが、私のファブは文字通りロリポップの画面の隅にあります
— ティアゴ
1
「pressedTranslationZ」に誤った値を使用しています。押された状態の高度の値ではありません。PressedElevation =標高+ PressedTranslationZ。したがって、正しい値はapp：elevation = "6dp" app：pressedTranslationZ = "6dp"
— e.shishkin
3
実際には、値を設定する必要はありません。それらのデフォルト値は、マテリアルデザインガイドラインで定義されている値です。とにかく、e.shishkinで右、値であると。com.android.support.designのソースコードで確認できますapp:elevationapp:pressedTranslationZapp:elevation:6dppressedTranslationZ:6dp
— ChristianGarcía15年
12

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" 標高の問題の回避策として追加されます。

— Siriscac
ソース
4

AndroidXの場合

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />
— ダンアルボテアヌ
ソース
1

すべてのライブラリをすでに追加したにもかかわらず、それでも機能しない場合は、以下を使用してください。

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

の代わりに： 

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

そして、すべてうまくいきます:)

— Max Shwed
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.