java - 如何实现带有文本模糊和阴影的Android按钮动画

Question

我想在Android中实现这个按钮动画。下面的示例来自 iOS。我希望阴影在用户单击按钮时消失，并在用户释放按钮后重新出现。

任何帮助将不胜感激。

Answer 1

您需要像下面这样添加颜色。例如，颜色名称是 button_text_color.xml。这是需要放在 color 文件夹中的 .xml 文件。如果 color 文件夹不存在，请在 res 目录中创建一个。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

检查我是否为处于按下状态的白色添加了 50% 的透明度。现在只需将此属性添加到声明它的 Button 中。

现在您需要一个背景可绘制对象，将其放入您的drawable 文件夹中。例如，让我们将 drawable 的名称设为 button_state_list_animator.xml。这应该有以下内容。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

现在您的按钮结构很简单了。

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

这是我的代码的屏幕截图。

您可以使用 library 制作下推动画同样，正如此处的答案中所述。

希望对您有所帮助!