111

Google Design Library の新しい FloatingActionButton を使用していますが、奇妙なパディング/マージンの問題が発生しています。この画像 (開発者レイアウト オプションがオン) は API 22 のものです。

ここに画像の説明を入力

そしてAPI 17から。

ここに画像の説明を入力

これはXMLです

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_gravity="bottom|right"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="-32dp"
        android:src="@drawable/ic_action_add"
        app:fabSize="normal"
        app:elevation="4dp"
        app:borderWidth="0dp"
        android:layout_below="@+id/header"/>

API 17 の FAB がパディング/マージンに関して非常に大きいのはなぜですか?

4

7 に答える 7

51

ファイルをいじる必要はもうありませんstyles.xml。.java簡単にしましょう。

カスタム マージンを使用app:useCompatPadding="true"および削除して、Android の異なるバージョン間で同じマージンを維持できます

2 番目の写真の FAB で見た余分なマージン/パディングは、ロリポップ以前のデバイスでのこのcompatPaddingによるものです。このプロパティが設定されていない場合、lollopop より前のデバイスに適用され、lollipop+ デバイスには適用されません。

アンドロイドスタジオコード

コンセプトの証明

デザイン ビュー

于 2016-04-24T12:16:16.273 に答える
32

数回検索して解決策をテストした後、この行をxmlレイアウトのみに追加して問題を修正しました。

app:elevation="0dp"
app:pressedTranslationZ="0dp"

これは私の全体のフロートボタンのレイアウトです

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add"
        app:elevation="0dp"
        app:pressedTranslationZ="0dp"
        app:fabSize="normal" />
于 2016-06-02T13:49:38.773 に答える
22

デザイン サポート ライブラリ内に問題があります。ライブラリが更新されるまで、以下の方法を使用してこの問題を修正してください。このコードをアクティビティまたはフラグメントに追加して、問題を解決してみてください。あなたのxmlを同じにしてください。lollipop 以上では余白はありませんが、それ以下では 16 dp の余白があります。

作業例の更新

XML - FAB は RelativeLayout 内にあります

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@mipmap/ic_add"
    app:backgroundTint="@color/accent"
    app:borderWidth="0dp"
    app:elevation="4sp"/>

ジャワ

FloatingActionButton mFab = (FloatingActionButton) v.findViewById(R.id.fab);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) mFab.getLayoutParams();
    p.setMargins(0, 0, dpToPx(getActivity(), 8), 0); // get rid of margins since shadow area is now the margin
    mFab.setLayoutParams(p);
}

dp を px に変換する

public static int dpToPx(Context context, float dp) {
    // Reference http://stackoverflow.com/questions/8309354/formula-px-to-dp-dp-to-px-android
    float scale = context.getResources().getDisplayMetrics().density;
    return (int) ((dp * scale) + 0.5f);
}

ロリポップ

ここに画像の説明を入力

ロリポップ前

ここに画像の説明を入力

于 2015-06-06T22:22:39.777 に答える