FloatingActionButton 在 pre-lollipop 中占用额外的空间

Question

我为棒棒糖添加了一个 FloatingActionButton 并且在上面它完全没问题但是对于下面的棒棒糖它需要额外的 spaces 周围

xml代码：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:src="@drawable/ic_done"
        app:backgroundTint="@color/primary"
        app:borderWidth="0dp"
        app:fabSize="mini" />

以上棒棒糖n截图：

这里的FloatingActionButton取的是适量的space但是看第二屏

前棒棒糖截图：现在看看这里 FloatingActionButton 如何有额外的边距或额外的空白 spaces。如何解决这个问题。

Answer 1

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:src="@drawable/ic_plus"
        app:fabSize="normal" />

没什么特别的，只是一个错误。

Answer 2

这是一个已知问题，是由于额外保证金造成的。你可以像下面那样做，

    //to fix margin issue/bug with pre lollipop version
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) floatingActionButton.getLayoutParams();
        params.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        floatingActionButton.setLayoutParams(params);
    }

Answer 3

将FloatingActionButton放入CoordinatorLayout，所有平台上的所有边距都将相同。在这种情况下，按钮的位置由 FloatingActionButton.Behavior.

调整

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        app:backgroundTint="@color/primary"
        app:borderWidth="0dp"
        app:fabSize="mini"/>
</android.support.design.widget.CoordinatorLayout>

根据 android issue 175330

上的评论，这需要 android 支持库 v22.2.1

Answer 4

我在 pre-lollipop 设备上使用负边距缩小 FAB 的大小，同时保留按钮周围的阴影区域，以免破坏视图。

int dimen5dp = getResources().getDimensionPixelSize(R.dimen.dimen_5_dp);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) floatingActionButton.getLayoutParams();
    params.setMargins(
            params.leftMargin,
            params.topMargin - ((int) (dimen5dp * 3.1)),      //Approximate factor to shrink the extra 
            params.rightMargin - ((int) (dimen5dp * 3.1)),    //spacing by the shadow  to the actual 
            params.bottomMargin - ((int) (dimen5dp * 3.1)));  //size of the FAB without a shadow
    floatingActionButton.setLayoutParams(params);
}

我还用 app:useCompatPadding="false" 将 FAB 包裹在 LineaLayout 中：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:ignore="RtlHardcoded">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        app:backgroundTint="@color/white"
        app:srcCompat="@drawable/ic_expand"
        app:useCompatPadding="false"
        tools:ignore="RtlHardcoded"/>
</LinearLayout>

下面是结果的图片，左边是 pre-lollipop 设备，右边是棒棒糖及以上设备。我使用了 uiautomatorviewer 并打开了设备上的布局边界。红色虚线是 FAB 按钮的边界，而带蓝色角的紫色线是 LinearLayout 的边界。在棒棒糖设备的情况下，FAB 的阴影没有占用额外的 space，所以它的边界正好在按钮周围，没有额外的边距。虽然 pre-lollipop 设备，阴影需要额外的 space 因此 FAB 边界将在按钮周围有边距，但是设置负边距后，LinearLayout 会缩小到按钮的边界而没有额外的 [=25] =] 由阴影添加。

Answer 5

正在添加

app:pressedTranslationZ="0dp"

您的 FloatingActionButton xml 应该可以在不改变高度的情况下工作。

FloatingActionButton 在 pre-lollipop 中占用额外的空间

FloatingActionButton Taking extra spaces in pre-lollipop

android

floating-action-button