视图边缘处的浮动操作按钮阴影剪裁答案

【问题标题】：Floating action button's shadow clipping at view margins视图边缘处的浮动操作按钮阴影剪裁
【发布时间】：2015-07-19 23:41:21
【问题描述】：

我有一个浮动操作按钮锚定在协调器布局的右下角。它距离视图的边距为 16dp（默认情况下包含边距，并在 dimens.xml 文件中指定），但它的阴影是剪切的并且具有方形外观（见下文）。当我将浮动操作按钮从视图边缘移动到 32dp 时，它的阴影会正确显示。

我尝试设置它的海拔属性（android:elevation="5dp"），但这似乎没有效果。我也尝试将属性borderWidth设置为0（app:borderWidth="0dp"），但这也没有效果。

浮动操作按钮出现这样的行为是否有原因？

XML

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/create_floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_create_white_48dp"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right" />

</android.support.design.widget.CoordinatorLayout>

图片

【问题讨论】：

您是否尝试将 android:clipChildren="false" 添加到 fab 的父视图中？
你在使用新发布的version 22.2.1吗？
@ianhanniballake 是的，我使用的是 Android Design Support Library 的 22.2.1 版本。

标签： android android-layout shadow floating-action-button

【解决方案1】：

问题是父级剪辑阴影。寻找裁剪阴影的父级（不一定是层次结构中的下一个）并将其添加到 xml 中的视图中。

android:clipChildren="false"

我现在一直在对此进行测试，删除该行并将其添加到正在剪切视图并且工作正常的父级。

添加另一个容器或更改边距是我不推荐的解决方法。太片面了。迷你晶圆厂具有不同的容器尺寸，并且根据 API 级别（=21）需要不同的尺寸。

【讨论】：

这成功了！谢谢！ FAB 似乎并不关心容器的大小——它们在容器的边界之外绘制阴影......
@PavelBiryukov 作为您评论的附录：迷你工厂的棒棒糖前后尺寸不同。在棒棒糖之前，它们的容器尺寸会大很多。
是的，我明白了...如果我在 hyerachy 查看器（在 Android 设备监视器中）的 4.4 中的 LinearLayout（水平）中放置 mini fab，我看到 FAB 的高度大于容器的高度线性布局。认为 LinearLayout 有 height = wrap_content。
android:clipChildren="false" 对我不起作用，但 android:clipToPadding="false" 起作用。在 RelativeLayout 中使用 FAB（这是视图层次结构的根）
感谢您指出它不一定是层次结构中的下一个，这真的帮助了我。

【解决方案2】：

有类似的问题。做两件事：

在android.support.design.widget.CoordinatorLayout 中删除android:paddingRight="@dimen/activity_horizontal_margin" 和android:paddingBottom="@dimen/activity_vertical_margin"
在android.support.design.widget.FloatingActionButton 中添加android:layout_marginRight="@dimen/activity_horizontal_margin" 和android:layout_marginBottom="@dimen/activity_horizontal_margin"

由于解释 = FAB 没有地方显示阴影，因此您没有完全看到它。

【讨论】：

这解决了问题。奇怪的是，边距对阴影有任何影响，但这是有道理的。我希望有一种方法可以在不破坏父视图的默认边距值的情况下解决此问题，但似乎并非如此。感谢您的帮助！

【解决方案3】：

我也有同样的问题。但我不能为了FAB 而放弃我的保证金值。所以我在层次结构中添加了另一层，这有助于我将FAB 准确放置在我想要的位置，而不会破坏父级。所以现在为了FAB，我在CoordinatorLayout 中有一个CoordinatorLayout。以下是我修改后的布局文件。

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/ddd"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/tile"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/fff"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView
            android:id="@+id/scroll_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- All my views under a LinearLayout parent -->

        </ScrollView>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="Add Text"
        android:visibility="visible"
        android:layout_margin="10dp"
        app:backgroundTint="@color/primary"
        app:layout_anchor="@+id/fff"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

【讨论】：

【解决方案4】：

我已将此添加到父视图：

android:clipToPadding="false"

【讨论】：

【解决方案5】：

对于水平 LinearLayout 中的两个 ExtendedFloatingActionButton，我遇到了同样的问题，因此这两个按钮可以彼此相邻。灰色阴影只出现在浮动按钮的底部两个角上，但我在线性布局上设置了底部边距，所以不确定为什么会有剪裁。

我意识到，即使我已将 android:clipChildren="false" 添加到 LinearLayout 我的代码被包装在 ConstraintLayout 中，这意味着按钮仍然被切断。

要解决此问题，只需将 android:clipChildren="false" 添加到父级，在我的例子中是 ConstraintLayout。

我的代码示例：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:clipToPadding="false"
    android:clipChildren="false">
                
    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/btn_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="1dp"
            android:text="text" />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/btn_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.8"
            android:text="text"
            android:textAlignment="center" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：