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

Question

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

androidandroid-layoutshadowfloating-action-button

22

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

图片

- user5030423

你尝试过在FloatingActionButton的父视图中添加android:clipChildren="false"吗？ - wrkwrk

您是否在使用新发布的 22.2.1 版本？ - ianhanniballake

@ianhanniballake 是的，我正在使用Android Design Support Library的22.2.1版本。 - user5030423

5个回答

11

遇到了类似的问题，可以尝试以下两个步骤:

在 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 没有阴影的显示位置，因此您可能无法完整看到它。

- Mateusz Pryczkowski

这解决了问题。边距对阴影有任何影响都很奇怪，但也说得通。我希望有一种方法可以在不干扰父视图的默认边距值的情况下解决这个问题，但似乎并非如此。感谢您的帮助！ - user5030423

4

我已经把这个添加到父视图中：

android:clipToPadding="false"

- fireb86

2

我也遇到了同样的问题。但是为了FAB，我不能仅仅放弃我的边距值。所以我在层次结构中添加了另一个层次，这帮助我将FAB放置在我想要的位置，而不会破坏父级。因此，现在我有一个CoordinatorLayout嵌套在另一个CoordinatorLayout中，为了FAB。下面是我的修改后的布局文件。

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

- Henry

0

我在一个水平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>

- blackers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sotti · Accepted Answer

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

android:clipChildren="false"

我现在一直在测试，尝试移除和添加修剪视图的父级行，并且运行良好。

添加另一个容器或更改边距是我不建议采用的解决方法。这太过零碎了。迷你浮动操作按钮具有不同的容器大小，并根据API级别（<21或>=21）需要不同的大小。