布局中其他视图隐藏的材质波纹效果

Question

我在a上添加了一个涟漪效果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>

(还有很多其他观点,但它们在这里无关紧要)

我正在使用an ImageView作为背景,RelativeLayout因为我需要scaleType为图像设置一个特定的,所以我不能使用基本android:background属性.

涟漪效果是隐藏的,因为它没有遮罩层(我希望它延伸出按钮的边界),因此使用ImageButton的父视图显示.如果我删除,效果是完全可见的ImageView.

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

Answer 1

我有完全相同的问题并使用此主题解决了它: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>

希望能帮助到你.

Answer 2

我遇到了同样的问题.到目前为止我找到的唯一解决方案并非100%正常,因为涟漪被视图掩盖(它不是无边框).

解决方案(解决方法):将ImageButton与其他视图环绕,并将纹波设置为前景而不是布局中的背景,如下所示:

<ImageView ... /> 

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

    <ImageButton />
</FrameLayout>

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

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

很好地解释了发生了什么.解决方案是相同的,但最重要的是它通过添加解决矩形掩码

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）故事

我的目标是在“选项卡项目”上使用无限制的波纹效果，因此将其分布在整个AppBarLayout区域中。我已经将@android:color/transparentTabLayout作为第一个包装父对象应用，并为AppBarLayout提供了背景色，但是波纹仍在TabLayout高度的边界处被切除。

2）故事的寓意（RTFM）

因此，我接触到了Android知识：The Documentation，并发现了这一点：

android：attr / selectableItemBackgroundBorderless提供了超出视图范围的波纹。它将以背景为非null的视图的最接近父视图绘制并受其限制。

3）行动过程

使用Layout Inspector，我意识到@android:color/transparent尽管透明（duh！）它实际上将0分配为View 的bg属性的值，但0并不为null，因此波纹会限制在最近的父对象上。

4）结论

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

5）Outro：** ANDROID＆SO FTW！

向这篇文章中的每个人提供支持，让他们用字眼阐明这个问题。干杯!