Material Design-Button的新式样式初探

晏和风
2023-12-01

Material Design-Button的新式样式初探


知识点:

1、md设计的button介绍;

2、如何设置按钮的点击动画;


我们注意到,在android发布了一个新的md设计,我们在很多开发时候,都可以看到最明显的一个变化,那就是按钮居然自带动画效果了,看起来还是很高大上的。究其根源,就是android md设计带来的好处。这里我只讲解button的特性。


新的特性:

Touch feedback(触摸反馈)

在Android L5.0中加入了触摸反馈动画。

其中最明显,最具代表性的就是波纹动画,比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。还有阴影效果也有。

波纹效果(Ripple):

当你使用了Material主题后,波纹动画会自动应用在所有的控件上,我们当然可以来设置其属性来调整到我们需要的效果。

 

可以通过如下代码设置波纹的背景:

默认是不超出边界的波纹

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_refresh"
        android:layout_marginTop="5dp"
        android:text="test 按钮" />

我查到这个默认的颜色是在android_sdk\platforms\android-22\data\res\values\attrs.xml文件里面,要这样引用

android:background="?attr/colorControlHighlight"

android:background=“?android:attr/selectableItemBackground"波纹有边界

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_refresh"
        android:layout_marginTop="5dp"
        android:background="?android:attr/selectableItemBackground"
        android:text="test 按钮" />

android:background=“?android:attr/selectableItemBackgroundBorderless"波纹超出边界,就是一个圆型

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dp"
        android:text="刷新按钮" />

后面两种,按钮的button背景色是变成透明的了。所以我们看到的按钮只是看到了按钮的文字而已。

(注:我发现,我们在button里面写的小写英文字母,然后设备上显示出来是大写的字母。textview则不是。selectableItemBackgroundBorderless是API级别22上的新属性。)

当然我们也可以自定义波纹的颜色,只要在一个XML文件里面设置好颜色就OK了。

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_dark">
    <item>
        <shape
            android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>


这个属性android:textColorHighlight=“#00f”是用来设置波纹的颜色,但是我找了一段时间,发现都没有设置成功。时间关系,我会持续更新文章,找出设置的方法。

如有任何疑问,请及时联系我。



 类似资料: