形状可绘制的涟漪效应

Question

尝试在这里做一些非常简单的事情，并查找了一堆 SO 资源，但无济于事。我正在尝试在使用 drawable 类型背景的按钮上获得波纹效果 shape drawable 。相关文件：

背景按钮：

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1px"
        android:color="#80ffffff" />
    <solid android:color="@android:color/transparent" />
</shape>

--- drawable-v21 文件夹中的 ripple.xml：

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

按钮.xml：

    <Button
                    android:id="@+id/login_button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:layout_weight="1"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:background="@drawable/ripple"

 />

这里有什么问题。谢谢！

原文由 user2511882 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的建议是不要使用 <ripple 标签。我有 2 个原因：完全按照您的意愿做并不是那么容易，您必须为每个背景创建 2 个不同的 .xml 文件。我不喜欢 drawable-v21 文件夹。

我的解决方案是用 --- 包装你的 Button FrameLayout 并使用 android:foreground 属性。这样你就可以拥有任何你想要的背景，并且可以保持涟漪效应。

 <FrameLayout
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_weight="1"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:foreground="?attr/selectableItemBackground">

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/background_button"/>
</FrameLayout>

请注意，我将所有属性和 ID 移到了 FrameLayout 。您应该将 onClickListener 设置为 FrameLayout 而不是 Button 。

顺便说一句， ?attr/selectableItemBackground 很棒。尽可能多地使用它。对于 Android 4.0 到 4.3 的旧设备，它将蓝色 Holo 颜色替换为灰色。

原文由 tasomaniac 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个。

涟漪效应.xml

 <ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#2797e0"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#2797e0" />
    </shape>
</item>

按钮.xml

  <Button
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:background="@drawable/ripple_effect"/>

构建.gradle

    compile 'com.android.support:appcompat-v7:23.1.1'

原文由 Quang Doan 发布，翻译遵循 CC BY-SA 3.0 许可协议