Question

我有一个看起来像这样的LinearLayout。 enter image description here

我希望每一行都是可点击的。行的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

到目前为止，我发现最简单的方法是在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。

Answer 2

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

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

注意如果您支持pre-lollipop设备，则需要在 drawable / 文件夹中使用同名的虚拟文件。空选择器足以用于该文件。请记住，那些旧设备不会涟漪。

Answer 4

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

在线性布局中，只需添加android：clickable =＆＃34; true＆＃34 ;; 并设置背景与你的涟漪效果

机器人：背景=＆＃34; @可绘制/ ripple_effect＆＃34;

代码：

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

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

Answer 6

太难了。获取用户触摸坐标。用小半径的画布创建圆增加半径并使用无效直到半径大于布局的getWidth为止

Answer 7

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

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>

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

7 个答案: