简评:使用 StateListAnimator 轻松实现 Material Design 效果。
Material Design 中最基础的一条原则就是 'motion provides meaning',也就是当用户和你的 app 交互时应当提供合理的视觉反馈。标准做法是使用官方提供的 StateListDrawable 来为控件实现交互效果。
StateListAnimator 是和 Material Design 一同在 API 21 引入的,可以用来方便的实现交互反馈的视觉效果,今天这篇文章就讲解了 StateListAnimator 的用法。
在以前,我们处理 Button,TextView 等控件的点击效果时,通常是定义一个 selector,为按下和普通情况分别设置颜色。但这样的效果一方面不够动人,另一方面也不符合 Material Design 的规范。
Material Design 规范推荐 Button 等控件应当以材质的方式表现,当接触到手指时上升。因此 Material Design 对组件有了 z 轴这个概念,也就是高度。z 值越大,组件离界面底层(水平面)越远,投影越重。
那我们怎么来实现组件在 z 轴(高度)上的变化效果呢?这就需要用到今天讲到的 StateListAnimator 了。
首先,让我们创建一个 animator 资源文件夹,在其中创建一个 selector_animator.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleX" android:valueTo="1.025" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleY" android:valueTo="1.025" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="4dp" android:valueType="floatType" /> </set> </item> <item> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleX" android:valueTo="1.0" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="scaleY" android:valueTo="1.0" android:valueType="floatType" /> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </set> </item> </selector>
代码很简单,当处于按下情况时,组件沿 x, y 轴扩大 1.025 倍并升高 4dp(会在组件四周产生投影效果)。
需要注意其中的 propertyName 属性目前支持:
然后在 layout 文件中设置组件的 stateListAnimator 值就可以啦:
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" ... android:stateListAnimator="@animator/selector_animator" />
因为知乎不支持 gif,感兴趣的同学可以点击原文链接查看实现效果。
原文:StateListAnimator
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。