18

我在 a 上添加了涟漪效果ImageButton，但是它被ImageView用作父视图背景的 a隐藏了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>

（还有很多其他的观点，但它们在这里无关紧要）

我使用 anImageView作为背景，RelativeLayout因为我需要为图像设置特定scaleType的，所以我不能使用基本android:background属性。

波纹效果是隐藏的，因为它没有遮罩层（我希望它延伸到按钮的边界之外），因此使用ImageButton要显示的父视图。如果我删除ImageView.

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

4

5 回答 5

65

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

问题预览：

解决前：

前

解决后：

后

解释：

“无边框按钮在最近的背景上绘制其内容。您的按钮本身和 之间可能没有背景ImageView，因此它在 下方绘制ImageView。”

解决方案：

android:background="@android:color/transparent"“在包含按钮的某些布局上（在 下方）使用透明背景（ImageView）。这将决定涟漪效果的最大界限是多少。”

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

希望能帮助到你。

于 2016-06-10T21:06:04.940 回答
8

我遇到同样的问题。到目前为止，我发现的唯一解决方案不是 100% 好的，因为波纹被视图掩盖了（它不是无边界的）。

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

<ImageView ... /> 

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

    <ImageButton />
</FrameLayout>

如果有人解释为什么在图像后面绘制波纹，我会非常高兴。此外，如果您查看 Google Photos 应用程序，在图像细节中，它们在带有波纹的图像视图上具有透明图标。我想复制这个，但我无法让涟漪出现在前景中。有谁知道如何将透明图像按钮放在所有东西上但仍然有涟漪？

在这里编辑最终解决方案 ，您可以找到完全相同的问题链接

很好地解释了正在发生的事情。解决方案是相同的，但最重要的是它通过添加来解决矩形掩码

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>
于 2016-03-13T17:00:37.457 回答
8

我知道这是一篇旧帖子，但我今天确实为此苦苦挣扎，因此我发布了我终于能够弄清楚的内容，也许其他人可能会从中受益。预先强调一个重点，请始终使用 RTFM！

1) 故事

我的目标是在 Tab Items 上使用无界的涟漪效应，从而使其遍布 AppBarLayout 区域。我已将@android:color/transparentTabLayout 作为第一个包装父级应用，并为 AppBarLayout 提供了背景颜色，但波纹仍然在 TabLayout 高度的边界处被切断。

2）故事的寓意（RTFM）

所以我跑到 Android 知识的巢穴：The Documentation，发现了这个：

?android:attr/selectableItemBackgroundBorderless 表示超出视图的波纹。它将被绘制在最近的具有非空背景的视图的父级上，并受其限制。

3) 行动过程

使用 Layout Inspector，我意识到@android:color/transparent虽然透明（呃！）它实际上将 0 分配为视图的bg属性的值，但零不是空的，因此波纹在最近的父级处有界。

4) 结论

有了它，我将android:backgroundTabLayout 的属性设置为@null而不是透明，现在我在 AppBarLayout 的区域上散布了一个漂亮的小波纹。

5) Outro: **ANDROID & SO FTW！

向这篇文章中所有用文字阐明此事的人提供道具。干杯!

于 2017-07-28T16:41:46.343 回答
1

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

于 2019-05-12T15:22:25.640 回答
0

有同样的问题。使用上述解决方案并有效。通过将前景设置为 ?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" />
于 2021-02-23T07:57:44.377 回答