如何在线性布局上产生涟漪效果，而不覆盖其子元素的背景颜色？答案

【问题标题】：How to make a ripple effect over a linear layout, without overriding the background color on its children?如何在线性布局上产生涟漪效果，而不覆盖其子元素的背景颜色？
【发布时间】：2015-02-03 21:38:03
【问题描述】：

我有一个看起来像这样的 LinearLayout。

我希望每一行都是可点击的。一行的LinearLayout 代码如下所示：

    <LinearLayout
        style="@style/home_menu_item_container"
        android:id="@+id/home_menu_acronyms_button"
        >
        <ImageView
            style="@style/home_menu_item_left"
            android:background="@color/greyLight"

            />
        <TextView
            style="@style/home_menu_item_right"
            android:text="@string/home_menu_option_2"
            android:background="@color/grey"
            />
    </LinearLayout>

如何添加在整个行（父级）上展开的涟漪效果 - 而不仅仅是行中的一个子视图？这里棘手的部分是让波纹越过两个颜色的行。

【问题讨论】：

@Zac 第二个答案不应该被接受吗？

标签： android android-layout rippledrawable

【解决方案1】：

到目前为止，我发现最简单的方法是在你的drawable中定义一个<ripple>，然后将LinearLayout的背景设置为这个drawable资源。

定义你的drawable-v21/item_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/your_background_color">
    <item android:id="@android:id/mask"
        <!--color here doesn't matter-->
        android:drawable="@android:color/white" /> 
</ripple>

将LinearLayout的背景设置为drawable/item_selector。

<LinearLayout
    style="@style/home_menu_item_container"
    android:background="@drawable/item_selector"
    android:id="@+id/home_menu_acronyms_button" >
     ...
</LinearLayout>

此外，如果您没有自己的背景颜色，则根本不需要定义item_selector。您可以简单地将背景定义为android:background="?android:attr/selectableItemBackground" 为您的LinearLayout。

【讨论】：

【解决方案2】：

你需要的有点复杂，但我认为没有其他方法，...
您需要将您的 ImageView 放入 ListView 以便每个 ImageView is a ListItem 然后您可以 set the ripple 但您还需要设置 drawSelectorOnTop="true" 否则它将无法正常工作

【讨论】：

谢谢！假设我可以让 ListItem 由 ImageView 和 TextView 组成，我是否正确？
是的，没问题，您可以按照您想要的方式定义项目布局，...我认为还有一个预定义的功能可以将图像添加到 listItem 的左侧和/或右侧应该类似于 android:drawableLeft / android:drawableRight
任务完成。 :) 感谢您的回答。

【解决方案3】：

我也遇到过这个问题，终于找到了简单的解决办法

在线性布局中只需添加 android:clickable="true"; 并将具有您的涟漪效果的背景设置为

android:background="@drawable/ripple_effect"

代码：

    <LinearLayout
        android:clickable="true"
        android:background="@drawable/ripple_effect"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<!-- Add your child views here -->

</LinearLayout>

在drawable中添加ripple_effect.xml

ripple_effect.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f87d05c2"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f87d05c2" />
        </shape>
    </item>
</ripple>

【讨论】：

【解决方案4】：

 <RelativeLayout
        android:id="@+id/rll_privacy_policy"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="?android:attr/selectableItemBackground"
        android:orientation="vertical">

            <TextView
                android:id="@+id/txt_privacy_policy"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/layout_margin_16"
                android:text="@string/privacy_policy"
                android:layout_centerVertical="true"
                android:textColor="@color/link_acc"
                android:textSize="@dimen/txt_title_20" />

    </RelativeLayout>

【讨论】：

【解决方案5】：

另一个选项是使波纹的背景颜色透明。这样只能看到波纹。波纹的 xml 文件（在您的 drawable-v21/ 文件夹中）是这样的：

<-- Ripple in some ghastly color, like bright red so you can see it -->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/red"
    >
<!-- background color uses a transparent mask set to full #ffffff (white) -->
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"
    />

注意，如果您支持棒棒糖之前的设备，您的 drawable/ 文件夹中需要有一个同名的虚拟文件。对于该文件，一个空的选择器就足够了。请记住，那些旧设备不会产生波纹。

【讨论】：

【解决方案6】：

上面的答案对我不起作用，这是我的解决方案：

ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
      >
       ...put het your design
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ripple" />
</FrameLayout>

【讨论】：