如何在不覆盖其子项背景颜色的情况下对线性布局产生涟漪效应？

Question

我有一个看起来像这样的 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>

如何添加波纹效果以扩展到整行（父视图）——而不仅仅是该行中的一个子视图？这里棘手的部分是让波纹穿过两个彩色行。

Answer 1

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

Answer 2

到目前为止，我发现最简单的方法是在您的可绘制对象中定义一个 <ripple>，然后将 LinearLayout 的背景设置为此可绘制资源。

定义你的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。您可以简单地将 LinearLayout 的背景定义为 android:background="?android:attr/selectableItemBackground"。

Answer 3

另一种选择是使波纹的背景色透明。这样只能看到涟漪。因此，涟漪的 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/[=20= 中有一个同名的虚拟文件] 文件夹。对于该文件，一个空的选择器就足够了。请记住，那些较旧的设备不会产生波动。

Answer 4

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

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>

Answer 5

我也遇到了这个问题，终于找到了一个简单的解决方案

在线性布局中只需添加 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>

Answer 6

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

如何在不覆盖其子项背景颜色的情况下对线性布局产生涟漪效应？

How to make a ripple effect over a linear layout, without overriding the background color on its children?

android

android-layout

rippledrawable