[解決済み] FloatingActionButtonのサンプルとサポートライブラリ

質問

最近、このような記事を読みました。

• Androidデザイン支援ライブラリ
• Android サポート ライブラリ、リビジョン 22.2.0
• フローティングアクションボタン

しかし、どれも新しい FloatingActionButton . とても理解しにくいので、この質問をさせていただきました。

どなたかそれについての例を教えてください。

EDIT

私はちょうどいくつかの問題を FloatingActionButton (FAB)に関するいくつかの問題を見つけたので、私は別の答えを改善したいと思います。以下の私の答えを参照してください。

どのように解決するには？

では、あなたの 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 などのように、必ず設定してください。これはアプリのアクセントカラーであり、オーバーライドしない限り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>

また、上記の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 など)がありますが、注目すべきは

    app:fabSize="mini"

もう一つ面白いのは、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 つのビューを分割する "seam"上にあるボタンの 1 つがある場合、(たとえば、RelativeLayout を使用して) (たとえば、RelativeLayout を使用して) 2 つのビューを分割し、たとえば、負の底部レイアウト マージンを使用して境界をオーバーラップさせた場合、次のような問題が発生します。 レイアウトマージンをマイナスにしてボーダーをオーバーラップさせると、問題に気がつくでしょう。 FAB のサイズは、実際には非常に 異なる がロリポップとロリポップ以前とでは ロリポップ以前とロリポップでは ASのビジュアルレイアウトエディタで実際に確認することができます。 に切り替えると、突然、quot;puff out"が表示されます。 に切り替えたときです。 余分なサイズの理由は、シャドウがビューのサイズを拡大することにあるようです。 シャドウは、ビューのサイズをあらゆる方向に拡大します。 そのため 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を"seam".に配置するつもりでした。 を使用して、RelativeLayout の 2 つの領域の間に FAB を配置するつもりでした。 を 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を"seam"にしたい場合は 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"/>
  
  

が表示されたときに、自動的にボタンが飛び出すようにできることを覚えておいてください。 スナックバー が出てきたときに、自動的にボタンを邪魔にならないようにすることができます。 コーディネータレイアウト .

もっと

• Google のデザイン サポート ライブラリ ページ
• FloatingActionButton のドキュメントです。
• Google I/O 2015 の "Material Now" のトーク。 - で紹介されたサポートデザインライブラリ 17m22s
• デザインサポートライブラリ サンプル/ショーケース