材质波纹效果被布局中的其他视图隐藏 [英] Material ripple effect hidden by other view in layout

问题描述

我在ImageButton上添加了波纹效果，但是它被用作父视图RelativeLayout的背景的ImageView隐藏.

I added a ripple effect on a ImageButton, however it is hidden by an ImageView used as a background for the parent view 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>

(还有很多其他视图，但此处无关紧要)

(there's a bunch of other views but they're irrelevant here)

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

I'm using an ImageView as the background for the RelativeLayout as I need to set a specific scaleType for the image, so I can't use the basic android:background property.

波纹效果被隐藏，因为它没有遮罩层(我希望它延伸到按钮的边界之外)，因此使用ImageButton的父视图进行显示.如果删除ImageView，效果将完全可见.

The ripple effect is hidden as it doesn't have a mask layer (I want it to extend out of the button's bounds) and thus uses the ImageButton's parent view to be displayed. The effect is perfectly visible if I remove the ImageView.

是否有办法使波纹效果显示在有问题的ImageView上方?

Is there a way to get the ripple effect to be shown above the problematic ImageView?

推荐答案

我遇到了完全相同的问题，并使用以下线程解决了该问题: 问题预览:

解决之前:

解决后:

说明:

无边界按钮会将内容绘制在最接近的背景上.您的按钮与ImageView之间可能没有背景，因此它绘制在ImageView下方."

"Borderless buttons draw their content on the closest background. Your button might not be having background between itself and the ImageView, so it draws underneath the ImageView."

解决方案:

在某些包含按钮的布局上(在ImageView之下)使用透明背景(android:background="@android:color/transparent").这将决定波纹效果的最大界限是什么."

"Use a transparent background (android:background="@android:color/transparent") on some layout containing the button (beneath the ImageView). This will dictate what the maximum bounds of the ripple effect is."

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

希望有帮助.

这篇关于材质波纹效果被布局中的其他视图隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！