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

Posted 2023-02-22

【中文标题】如何在简单布局中创建波纹效果

【英文标题】：How to create ripple effect in simple layout

【发布时间】：2015-01-16 08:21:17

【问题描述】：

触摸布局时如何在简单的线性/相对布局中产生涟漪效果？

我尝试将布局的背景设置为：

<?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_
        android:layout_
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

【问题讨论】：

托管波纹的视图需要启用并且可以点击或聚焦。

感谢 Alanv，我的回复见下文。基本上我将我的布局标记为可点击的涟漪效果，但它仍然不起作用。

另外，如果我删除 <item android:drawable="@android:color/white"/> 部分，这会很好。因此，如果我想要布局上的背景颜色，我不确定这应该如何工作。将它放在另一个具有背景颜色的布局之上也行不通！

在您的视图中绘制的波纹是什么颜色，例如colorControlHighlight 解析成什么颜色？

【参考方案1】：

在您的布局上设置这些属性（如果您的布局具有默认的白色/浅色背景）：

          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 中看到许多此类涟漪的示例：in here

【讨论】：

如果我必须给不同的颜色作为背景怎么办？那么最好的方法应该是什么？

@AnujSharma 你试过为background提供颜色资源吗？

@ralphspoon 见***.com/questions/26604134/…

如果您想要另一种背景颜色，您可以将该颜色设置为背景并将“?attr/selectableItemBackground”设置为 android:foreground

哇！这很棒。这应该标记为答案 +1

【参考方案2】：

除了Igor Ganapolsky 的答案之外，我还添加了这个，以防有人想要拥有不同颜色的布局并产生连锁反应。您只需像这样在可绘制对象中创建涟漪效果：

ripple.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="@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"

【参考方案3】：

您必须在任何小部件中更改以下代码 sn-p (TextView/Button) 才能实现涟漪效应：

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

你可以走了。

【讨论】：

嗯前景？这太棒了！

如果您已经有一个 android:background="@color/colorAccent" 集，这很有帮助

这适用于布局和自定义视图以及小部件。

@MichaelKern 是的，你是对的，这也是基于每个人在代码中的要求。

请注意，foreground 属性已添加到 API 23 (Android 6.0) 和 has no effect on API levels lower than 23（根据 Android Studio 警告）

【参考方案4】：

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

谢谢大家（尤其是 Alanv 为我指明了正确的方向）。

【讨论】：

如果我在视图中使用 android:background="?attr/selectableItemBackground" 如何更改对象的背景？

没关系我发现selectableItemBackground默认状态是透明的。所以，我在它下面设置了一个我想要的颜色的视图。

快速提示：您可以在您的styles.xml 中更改colorControlHighlight。例如，将其添加到您的自定义主题中。

【参考方案5】：

这是单击具有波纹效果的示例布局的示例：

 <LinearLayout
    android:layout_
    android:layout_
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

【讨论】：

这简直太棒了，这太简单了，而且这个简单的事实就是 Just Works™。

【参考方案6】：

在你的布局上设置android:clickable="true"。

【参考方案7】：

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

【参考方案8】：

只需使用android:background="?selectableItemBackground" 添加默认的波纹效果

点赞：

<LinearLayout
            android:layout_
            android:layout_
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

【参考方案9】：

把它放到你的布局中：

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

注意：API 文档中有一个错误。它仅适用于 API >= 23

对于所有 API 级别，请使用此Solution

【讨论】：

您的链接重定向同一页面

请记住，您还可以选择使用 android:background="?attr/selectableItemBackgroundBorderless" 由于它是无边框的，涟漪效应将延伸到父视图。在许多情况下，这可能看起来更好。

【参考方案10】：

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

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