Question

我在ImageButton上添加了涟漪效果，但ImageView隐藏了它作为父视图RelativeLayout的背景。

这是布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="172dp"
                android:orientation="vertical"
                android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/drawerBackgroundImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/drawer_background"/>

    [...]

    <ImageButton
        android:id="@+id/drawerLogoutButton"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_alignBottom="@id/drawerEmailTextView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        style="@style/FlatButtonStyle"
        android:scaleType="centerInside"
        android:src="@drawable/ic_logout_white_24dp"/>

</RelativeLayout>

（还有其他一些观点，但它们在这里并不相关）

我使用ImageView作为RelativeLayout的背景，因为我需要为图片设置一个特定的scaleType，所以我无法使用基本android:background属性。

涟漪效果是隐藏的，因为它没有遮罩层（我希望它延伸出按钮的边界），因此使用ImageButton的父级要显示的视图。如果我删除ImageView，则效果完全可见。

有没有办法让涟漪效果显示在有问题的ImageView上方？

Answer 1

我有完全相同的问题并使用此主题解决了它：https://code.google.com/p/android/issues/detail?id=155880

问题预览：

解决之前：

解决后：

<强>解释

＆＃34;无边框按钮在最近的背景上绘制内容。您的按钮可能没有ImageView之间的背景，因此它会在ImageView下面绘制。＆＃34;

<强>解决方案：

＆＃34;在包含按钮的某个布局上（android:background="@android:color/transparent"下方）使用透明背景（ImageView）。这将决定涟漪效应的最大界限是什么。＆＃34;

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                ...>

    <!-- Your background ImageView -->
    <ImageView
        android:id="@+id/drawerBackgroundImageView"
        android:src="@drawable/drawer_background"
        ... />

        <!-- ... -->

    <!-- HERE, you need a container for the button with the transparent
         background. Let's say you'll use a FrameLayout -->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <!-- Maybe more items --> 

        <!-- Button with borderless ripple effect -->
        <ImageButton
            android:id="@+id/drawerLogoutButton"
            android:background="?selectableItemBackgroundBorderless"
            ... />

    </FrameLayout>

</FrameLayout>

希望它有所帮助。

Answer 2

我遇到了同样的问题。到目前为止我找到的唯一解决方案并非百分之百正常，因为涟漪被视图掩盖（它不是无边框）。

解决方案（解决方法）：用其他视图环绕你的ImageButton并将纹波设置为前景而不是布局中的背景，如下所示：

<ImageView ... /> 

<FrameLayout
    ...
    android:clickable="true"
    android:focusable="true"
    android:foreground="?attr/selectableItemBackgroundBorderless" >

    <ImageButton />
</FrameLayout>

如果有人解释为什么在图像背后会产生波纹，我会很高兴。此外，如果您查看Google相册应用，则在图片详细信息中，图片视图上会显示带有涟漪的透明图标。我想复制这个，但我无法使波纹成为前景。有人知道如何将透明图像按钮放在所有东西上，但仍然有波纹吗？

编辑最终解决方案 在这里你可以找到完全相同的问题link

很好地解释了发生了什么。解决方案是相同的，但最重要的是它通过添加

解决矩形掩码

android:clipChildren="false"
android:clipToPadding="false"

到您的布局。现在你的涟漪应该是无边界的（它对我有用）。布局xml可能是这样的：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
android:clipChildren="false"
android:clipToPadding="false">

    <ImageView ... /> 

    <FrameLayout
        ...

        android:clickable="true"
        android:foreground="?attr/selectableItemBackgroundBorderless">
       <ImageView ... />
    </FrameLayout>

</FrameLayout>

Answer 3

我知道这是一个古老的帖子，但我今天确实很努力，因此我发布了我最终能够弄清楚的东西，也许其他人可能从中受益。事先要强调一点，请始终使用RTFM ！

1）故事

我的目标是对Tab项使用无界波纹效果，然后将其传播到AppBarLayout区域。我已经将@android:color/transparent应用于TabLayout作为第一个包装父级，并为AppBarLayout提供了背景色，但是在TabLayout高度的边界处仍然会切断波纹。

2）故事的寓意（RTFM）

所以我跑到Android知识的巢穴：文档，并发现了这一点：

？android：attr / selectableItemBackgroundBorderless用于延伸到视图之外的波纹。它将以非空背景的视图的最近父级绘制并受其限制。

3）行动方案

使用Layout Inspector，我意识到@android:color/transparent虽然是透明的（duh！），它实际上将0指定为View的 bg 属性的值，但 {{3因此，纹波在最近的父级处受到限制。

4）结论

有了这个，我就把我的TabLayout的android:background属性设置为@null而不是透明，现在我在AppBarLayout的区域有一个奇特的小涟漪。

5）Outro：** ANDROID＆amp;所以FTW！

这篇文章中的所有人都可以用道语说明这个问题。干杯！

Answer 4

在将ImageButton包装在FrameLayout中之后，我得到了触摸的矩形形状。在FrameLayout上应用椭圆形的背景，并在触摸时获得圆形。

Answer 5

有同样的问题。使用上述解决方案并起作用。通过将前景设置为 ?attr/actionBarItemBackground 并将背景设置为 @null 来避免包装 FrameLayout。

 <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|end"
            android:background="@null"
            android:contentDescription="@string/app_name"
            android:foreground="?attr/actionBarItemBackground"
            android:padding="@dimen/small_margin"
            android:src="@drawable/ic_clear_text_icon" />

布局

5 个答案: