FloatingActionButton 在棒棒糖前占用额外的空间答案

【问题标题】：FloatingActionButton Taking extra spaces in pre-lollipopFloatingActionButton 在棒棒糖前占用额外的空间
【发布时间】：2015-07-21 09:34:16
【问题描述】：

我已经为棒棒糖添加了一个FloatingActionButton，它完全可以，但是对于棒棒糖下面，它需要额外的空间来环绕它

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 占用了适量的空间，但请看第二个屏幕

棒棒糖前的截图：现在看看这里FloatingActionButton 是如何占用额外的边距或额外的空格的。如何解决此问题。

【问题讨论】：

我相信你需要为棒棒糖和更低版本使用不同的 dimens.xml 文件，因为在棒棒糖之前的版本中无法正确识别高程（在你的情况下为 fabSize 和边框宽度）等内容
是的@slorangex 我相信你是对的，因为当我改变高度时，空间也会随之改变。我认为包含不同海拔的棒棒糖和棒棒糖前的不同 dimen.xml 文件可能会奏效。

标签： android floating-action-button

【解决方案1】：

将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支持库v22.2.1，根据android issue 175330上的cmets@

【讨论】：

【解决方案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);
    }

【讨论】：

【解决方案3】：

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

没有什么花哨的，只是一个错误。

【讨论】：

刚刚发现这是由于默认高度占用了预先棒棒糖的额外空间，使高度为 0 将删除空间。
是的，但是阴影在这里占据了额外的空间

【解决方案4】：

我使用负边距来缩小前棒棒糖设备上 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>

下面是结果的图像，左侧是棒棒糖前设备，右侧是棒棒糖及以上设备。我使用了 uiautomatorviewer 并打开了设备上的布局边界。红色虚线是 FAB 按钮的边界，而带有蓝色角的紫色线是 LinearLayout 的边界。在棒棒糖设备的情况下，FAB 的阴影没有占用额外的空间，因此它的边界正好在按钮周围，没有额外的边距。在棒棒糖之前的设备中，阴影占用了额外的空间，因此 FAB 边界将在按钮周围有边距，但设置了负边距时，LinearLayout 会缩小到按钮的边界，而不会增加阴影添加的额外空间。

【讨论】：

【解决方案5】：

添加

app:pressedTranslationZ="0dp"

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

【讨论】：