iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >聊一聊Android中的StateListAnimator
  • 311
分享到

聊一聊Android中的StateListAnimator

Android 2022-06-06 11:06:42 311人浏览 安东尼
摘要

简评:使用 StateListAnimator 轻松实现 Material Design 效果。 Material Design 中最基础的一条原则就是 'motion

简评:使用 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

总结

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


--结束END--

本文标题: 聊一聊Android中的StateListAnimator

本文链接: https://www.lsjlt.com/news/28446.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 一文聊聊Node中的stream(流)
    流是用于在 Node.js 中处理流数据,也就是连续字节的抽象接口。 流有 4 种基本类型,本篇文章主要介绍其中两种 —— 可读流和可写流。可读的(Readable)我们可以通过 fs.createReadStream() 创建一个可读流 ...
    99+
    2023-05-14
    stream node nodejs​
  • 聊聊Android中的事件分发机制
    目录Activity的事件分发机制 ViewGroup的事件分发机制 View的事件分发机制 View事件分发机制的本质就是就是MotionEvent事件的分发过程,即MotionE...
    99+
    2024-04-02
  • 一文聊聊node中的path模块
    path 模块是 nodejs 中用于处理文件/目录路径的一个内置模块,可以看作是一个工具箱,提供诸多方法供我们使用,当然都是和路径处理有关的。同时在前端开发中 path 模块出现的频率也是比较高的,比如配置 webpack 的时候等。本文...
    99+
    2023-05-14
    path模块 Node.js
  • 一文聊聊Node中的可读流
    本篇文章带大家解读一下Node.js流源码,深入了解下Node可读流,看看其基本原理、使用方法与工作机制,希望对大家有所帮助!1. 基本概念1.1. 流的历史演变流不是 Nodejs 特有的概念。 它们是几十年前在 Unix 操作系统中引入...
    99+
    2023-05-14
    可读流 node
  • 一文聊聊Node中的net模块
    而客户端和服务端的传输流如下如果角色变成发送者和接受者的时候,传输流如下图:可以看出来传输的过程中,从发送端开始,没经过一层协议都会加上所需要的首部信息.层层把关,层层加码. 然后到了接收端的时候, 就反而行之, 每经过一层都剥去对应的首部...
    99+
    2023-05-14
    net模块 node Node.js
  • 一文聊聊Vue中的KeepAlive组件
    看下面的图更加直观,图片来源一篇讲keepAlive 缓存优化的文章4、如何添加到 vue devtools 组件树上sharedContext.activate = (vnode, container, anchor) => { ...
    99+
    2022-11-22
    前端 Vue.js 前端框架
  • 一文聊聊Node.js中的cluster(集群)
    日常工作中,对 Node.js 的使用都比较粗浅,趁未羊之际,来学点稍微高级的,那就先从 cluster 开始吧。尼古拉斯张三说过,“带着问题去学习是一个比较好的方法”,所以我们也来试一试。当初使用 cluster 时,一直好奇它是怎么做到...
    99+
    2023-05-14
    cluster Node.js
  • 一文聊聊vue3中的ref、toRef、toRefs
    (学习视频分享:vuejs入门教程、编程基础视频)以上就是一文聊聊vue3中的ref、toRef、toRefs的详细内容,更多请关注编程网其它相关文章!...
    99+
    2023-05-14
    Vue
  • 一文聊聊Angular中的管道(PIPE)
    在我们设置好管道之后,浏览器中的时间已经发生了变化了其他管道Angular还提供了其他管道,比如说改变人名币格式的管道(currency):Angular - CurrencyPipehttps://angular.cn/api/commo...
    99+
    2023-05-14
    管道 Angular
  • 一文聊聊Node中的内存控制
    3.内存指标会存在一些认为会回收但是却没有被回收的对象,会导致内存占用无限增长。一旦增长达到v8的内存限制,将会得到内存溢出错误,进而导致进程退出。3.1 查看内存使用情况process.memoryUsage()可以查看内存使用情况。除此...
    99+
    2023-05-14
    前端 Node.js 后端
  • 一起聊聊C++中的智能指针
    目录一:背景二:关键词解析1. auto_ptr2. auto_ptr 多引用问题一:背景 我们知道 C++ 是手工管理内存的分配和释放,对应的操作符就是 new/dele...
    99+
    2024-04-02
  • 一文聊聊Angular中的依赖注入
    译者添加:举个例子 -- 当 classA 使用 classB 的某些功能时,则表示 classA 具有 classB 的依赖。在使用 classA 之前,我们需要创建 classB。推荐文章依赖注入是什么?如何使用它?我们都知道在 Ang...
    99+
    2023-05-14
    前端 JavaScript Angular.js
  • 一起聊聊JavaScript中的声明提升
    以上就是一起聊聊JavaScript中的声明提升的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    JavaScript
  • 一文聊聊Vue中的全局守卫
    Vue中怎么进行全局守卫?下面本篇文章带大家聊聊Vue中的全局守卫,希望对大家有所帮助!前言:项目中大多数都是通过路由来进行跳转的,但是普遍的都会进行登陆验证后才能进入下一页面,这时候就需要守卫了,本博文主要讲解vue中的全局守卫 。全局守...
    99+
    2023-05-14
    全局守卫 Vue
  • 一起聊聊Node中的事件循环
    事件循环是 Node.js 的基本组成部分,通过确保主线程不被阻塞来实现异步编程,了解事件循环对构建高效应用程序至关重要。下面本篇文章就来带大家深入了解Node中的事件循环 ,希望对大家有所帮助!你已经使用 Node.js 一段时间了,构建...
    99+
    2023-05-14
    Node.js 前端 JavaScript
  • 深入聊一聊JDK中的Map和Set
    目录1. 基础知识2.模型3.Map的使用4.Map接口的使用(1)元素的添加和更新操作(2)在Map集合中查询/搜索特定的值(3) 删除Map中指定的value和key ...
    99+
    2022-12-21
    jdk map和set java map有哪些 jdk set集合大小
  • 一文聊聊vue中的指令和插值
    data():存放页面中显示数据的地方<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
    99+
    2022-11-22
    Vue vue.js vue3
  • 一起详细聊聊C#中的Visitor模式
    目录写在前面模式演进举个例子使用了Tpye-Switch的版本尝试使用重载的版本单分派与双分派Visitor模式总结写在前面 Visitor模式在日常工作中出场比较少,如果统计大家不...
    99+
    2024-04-02
  • 一文聊聊Javascript中的执行上下文
    本篇文章带大家聊聊Javascript中的执行上下文,分享一个思考题,通过对思考题的分析,想必会对执行上下文有更加深入的理解。在前面的几篇文章中,我们深入了解了关于执行上下文的三个重要成员:变量对象、作用域链和 this ,本篇文章是前四篇...
    99+
    2023-05-14
    执行上下文 javascript
  • 详细聊一聊algorithm中的排序算法
    目录前言一、algorithm是什么?二、有哪些排序算法?sortrandom_shufflemergereverse总结前言 雨下不停,爱意难眠,说一下algorithm中的几个排...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作