简评:使用 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 属性目前支持:

  • translationX, translationY: 控制组件沿 x 和 y 轴移动多少距离。
  • rotation, rotationX, rotationY: 绕中心点旋转,设置 rotation 是 2D 平面旋转,rotationX 和 rotationY 分别是从屏幕内向屏幕外旋转和从左到右旋转,均为 3D 旋转。
  • scaleX, scaleY: 沿 x, y 轴的缩放比例,设置为 1.5 即 1.5 倍。
  • pivotX, pivotY: 设置组件的中心点在哪里,scale 和 rotation 都会根据设置的中心点来变化,默认为几何中心。
  • x, y: 组件最终要出现在相对其父容器的位置。
  • alpha: 组件的透明度,值的范围从 0 到 1,为 0 时完全透明。

然后在 layout 文件中设置组件的 stateListAnimator 值就可以啦:

<TextView
 android:id="@ id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 ... 
 android:stateListAnimator="@animator/selector_animator" />

因为知乎不支持 gif,感兴趣的同学可以点击原文链接查看实现效果。

原文:StateListAnimator

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对Devmax的支持。

聊一聊Android中的StateListAnimator的更多相关文章

  1. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  4. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  5. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  6. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  7. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  8. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  9. 使用 Swift 语言编写 Android 应用入门

    Swift标准库可以编译安卓armv7的内核,这使得可以在安卓移动设备上执行Swift语句代码。做梦,虽然Swift编译器可以胜任在安卓设备上编译Swift代码并运行。这需要的不仅仅是用Swift标准库编写一个APP,更多的是你需要一些框架来搭建你的应用用户界面,以上这些Swift标准库不能提供。简单来说,构建在安卓设备上使用的Swiftstdlib需要libiconv和libicu。通过命令行执行以下命令:gitclonegit@github.com:SwiftAndroid/libiconv-libi

  10. Android – 调用GONE然后VISIBLE使视图显示在错误的位置

    我有两个视图,A和B,视图A在视图B上方.当我以编程方式将视图A设置为GONE时,它将消失,并且它正下方的视图将转到视图A的位置.但是,当我再次将相同的视图设置为VISIBLE时,它会在视图B上显示.我不希望这样.我希望视图B回到原来的位置,这是我认为会发生的事情.我怎样才能做到这一点?编辑–代码}这里是XML:解决方法您可以尝试将两个视图放在RelativeLayout中并相对于彼此设置它们的位置.

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部