Android的设计库 - 浮动操作按钮填充/保证金的问题Android的设计库 - 浮动操作按钮填

我使用的是来自谷歌设计库的新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"/>

为什么FAB在API 17要大得多填充/保证金明智？

Answer 1:

更新（OCT 2016）：

正确的解决方案，现在是把app:useCompatPadding="true"到您的FloatingActionButton。 这将使不同的API版本之间的填充一致。 然而，这似乎仍然被一点点地使默认边距关闭，所以你可能需要调整的。 但至少有一个为特定API的样式不再需要。

以前的答案：

您可以使用特定的API的样式很容易做到这一点。 在正常的values/styles.xml ，把这样的事情：

<style name="floating_action_button">
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

然后在值-V21 / styles.xml，使用：

<style name="floating_action_button">
    <item name="android:layout_margin">16dp</item>
</style>

和样式应用到您的FloatingActionButton：

<android.support.design.widget.FloatingActionButton
...
style="@style/floating_action_button"
...
/>

正如其他人指出，在API <20，该按钮使得它自己的阴影，这增加了视图的整体逻辑宽度，而在API> = 20，它使用新的高度参数不向视图宽度。

Answer 2:

没有更多乱搞 styles.xml或.java文件。 请让我简单。

您可以使用app:useCompatPadding="true" ，并删除自定义的利润率保持在不同的Android版本相同的利润率

您在FAB在你的第二个画面看到的额外余量/填充正是由于这个compatPadding 棒棒糖上预设备。 如果没有设置该属性，它被应用在lollopop预设备而不是棒棒糖+设备。

概念验证

Answer 3:

过一段时间的搜索和测试解决方案后，我解决我的这个行添加到只有我的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" />

Answer 4:

还有就是设计支持库中的问题。 使用下面的方法，直到库已更新为解决此问题。 尝试将此代码添加到您的活动或片段，以解决这一问题。 保持你的XML一样。 在棒棒糖及以上没有保证金，但低于有16DP的余量。

更新工作实例

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

Java的

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);
}

棒糖

前棒棒堂

Answer 5:

预棒棒糖FloatingActionButton负责绘制自己的影子。 因此，视图必须稍微大一些，以使空间的影子。 为了得到一个一致的行为，您可以设置页边距，以考虑高度和宽度的差异。 我目前使用下面的类 ：

import android.content.Context;
import android.content.res.TypedArray;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.ViewGroup.MarginLayoutParams;

import static android.os.Build.VERSION.SDK_INT;
import static android.os.Build.VERSION_CODES.LOLLIPOP;

import static android.support.design.R.styleable.FloatingActionButton;
import static android.support.design.R.styleable.FloatingActionButton_fabSize;
import static android.support.design.R.style.Widget_Design_FloatingActionButton;
import static android.support.design.R.dimen.fab_size_normal;
import static android.support.design.R.dimen.fab_size_mini;

public class CustomFloatingActionButton extends FloatingActionButton {

    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, FloatingActionButton, defStyleAttr,
                Widget_Design_FloatingActionButton);
        this.mSize = a.getInt(FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (SDK_INT < LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            MarginLayoutParams params = (MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    private final int getSizeDimension() {
        switch (this.mSize) {
            case 0: default: return this.getResources().getDimensionPixelSize(fab_size_normal);
            case 1: return this.getResources().getDimensionPixelSize(fab_size_mini);
        }
    }
}

更新：Android的支持库V23改名fab_size梦诗到：

import static android.support.design.R.dimen.design_fab_size_normal;
import static android.support.design.R.dimen.design_fab_size_mini;

Answer 6:

马库斯的回答运作良好，对我更新到v23.1.0和做一些调整，以进口后（与最近gradle这个插件，我们使用我们的应用程序用r的设计图书馆的R）。 下面是v23.1.0的代码：

// Based on this answer: https://stackoverflow.com/a/30845164/1317564
public class CustomFloatingActionButton extends FloatingActionButton {
    private int mSize;

    public CustomFloatingActionButton(Context context) {
        this(context, null);
    }

    public CustomFloatingActionButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @SuppressLint("PrivateResource")
    public CustomFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.FloatingActionButton, defStyleAttr,
                R.style.Widget_Design_FloatingActionButton);
        mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, 0);
        a.recycle();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            int size = this.getSizeDimension();
            int offsetVertical = (h - size) / 2;
            int offsetHorizontal = (w - size) / 2;
            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
            params.leftMargin = params.leftMargin - offsetHorizontal;
            params.rightMargin = params.rightMargin - offsetHorizontal;
            params.topMargin = params.topMargin - offsetVertical;
            params.bottomMargin = params.bottomMargin - offsetVertical;
            setLayoutParams(params);
        }
    }

    @SuppressLint("PrivateResource")
    private int getSizeDimension() {
        switch (mSize) {
            case 1:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_mini);
            case 0:
            default:
                return getResources().getDimensionPixelSize(R.dimen.design_fab_size_normal);
        }
    }
}

Answer 7:

在布局文件集属性海拔为0，因为它需要默认的提升。

app:elevation="0dp"

现在，在活动检查API级别，如果需要大于21，并设置海拔。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    fabBtn.setElevation(10.0f);
}

文章来源: Android Design Library - Floating Action Button Padding/Margin Issues