如何在简单的布局中创建波纹效果


112

触摸布局时,如何在简单的线性/相对布局中产生波纹效果?

我尝试将布局的背景设置为类似以下内容:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:drawable="@android:color/white"/>

</ripple>

但是,在触摸版面时,我只会看到纯白色的背景并且没有波纹效果。我究竟做错了什么?

编辑:

供参考,这是我的布局xml文件:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
托管波纹的视图需要启用并且可单击或可聚焦。
alanv 2014年

感谢Alanv,请参见下面的回复。基本上,我将布局标记为可点击,但仍无法正常工作。
2014年

另外,如果我删除此<item android:drawable="@android:color/white"/>部分,此方法也可以正常工作。因此,如果我想在布局上使用背景色,我不确定该如何工作。将其放置在具有背景颜色的另一版面之上也不起作用!
2014年

4
您的视图中绘制的波纹是什么颜色,例如colorControlHighlight解析为什么颜色?
alanv 2014年

Answers:


260

在布局上设置以下属性(如果布局具有默认的白色/浅色背景):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

在这种情况下,您不需要自定义可绘制对象。

但是,如果您的布局具有黑色/深色背景,则必须创建自己的波纹可绘制对象,如下所示:

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

然后将此涟漪可绘制对象设置为android:background属性。

您可以在AOSP中看到许多此类波动的示例:在这里


11
如果我必须给背景颜色不同怎么办?那么最好的方法是什么?
阿努沙玛(Anuj Sharma)

1
@AnujSharma您是否尝试提供颜色资源background
IgorGanapolsky '16


31
如果您想要其他背景颜色,则可以将该颜色设置为背景,然后将“?attr / selectableItemBackground”设置为android:foreground
卢卡斯·阿雷菲尔特

2
哇!这很棒。这应该标记为答案+1
Zia Ur Rahman

59

我在Igor Ganapolsky的回答之外添加了此选项,以防任何人想要具有不同颜色的布局并产生波纹效果。您只需在可绘制对象中创建一个波纹效果,如下所示:

涟漪图

<?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="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

然后将其作为布局的背景或Igor Ganapolsky在回答中提到的任何按钮。

android:clickable="true"
android:background="@drawable/ripple"

36

您必须在任何小部件(TextView/ Button)中更改以下代码段,然后才能实现Ripple Effect

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

而且你很好。


嗯前景?这很棒!
Badr

如果您已经设置了android:background =“ @ color / colorAccent”,这将对您有所帮助
航空

@aero即使您没有设置任何背景,它也很有用。
Pankaj Lilan

1
除窗口小部件外,它还适用于布局和自定义视图。
anoo_radha

1
@MichaelKern是的,您是对的,它也是基于每个人在其代码中的要求。
Pankaj Lilan '18

20

事实证明这是按预期的方式工作。标准Material主题colorControlHighlight值为#40ffffff。因此,在白色背景上,这不会显示。将突出显示颜色更改为其他颜色,和/或更改对象的背景颜色。

谢谢所有人(尤其是Alanv向我指出正确的方向)。


如果我在视图上使用android:background =“?attr / selectableItemBackground”,如何更改对象的背景?
–codekraps

1
没关系,我发现selectableItemBackground默认状态是透明的。因此,我在其下设置了所需颜色的视图。
codekraps,2015年

1
快速注:你可以改变colorControlHighlight你的styles.xml。例如,将其添加到您的自定义主题。
努曼(Nuhman)


5

这是单击带有波纹效果的示例布局的示例:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

真是太简单了,这就是Just Works™。
马查多

4
<?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="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

在Drawable文件夹中使用ripple.xml,然后将其分配为View的

android:background =“ @ drawable / ripple”

android:clickable =“ true”


2

只需添加默认波纹效果即可 android:background="?selectableItemBackground"

喜欢:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

将其放入您的布局:

android:clickable="true"
android:background="?attr/selectableItemBackground"

注意:API文档中有一个错误。只能在 API> = 23

对于所有API 级别,请使用此解决方案


2
您的链接重定向了该页面
TSR

请记住,您还可以选择使用android:background =“?attr / selectableItemBackgroundBorderless”,边框更少。波纹效果将扩展到父视图。在许多情况下,这看起来更好。
迈克尔·科恩

0

我尝试了所有这些答案,但没有任何效果,因此,我解决了创建以下样式的问题:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

然后,我将其应用于线性布局:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.