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

Question

我有一个浮动操作按钮固定在协调器布局的右下角。它距视图的边距 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>

图片

Answer 1

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

在 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 dd没有地方显示影子，所以你没有看完整。

Answer 2

我也遇到了同样的问题。但我不能为了 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>

Answer 3

问题是 a parent 裁剪阴影 。查找正在剪切阴影的 parent（不一定是层次结构中的下一个）并将其添加到 xml 中的视图。

android:clipChildren="false"

我现在一直在测试这个，删除该行并将其添加到裁剪视图并且工作正常的 parent。

添加其他容器或更改边距是我不推荐的解决方法。它太零散了。迷你工厂有不同的容器尺寸，需要不同的尺寸，具体取决于 API 级别（<21 或 >=21）。

Answer 4

我已将此添加到 parent 视图：

android:clipToPadding="false"

Answer 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>

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

Floating action button's shadow clipping at view margins

android

shadow

android-layout

floating-action-button