“阶段一”是指我第一次系统地学习Android开发。这主要是对我的学习过程作个记录。

上一篇阶段一:通过网络请求,获得并解析JSON数据(天气应用)完成了应用的核心功能,接下来就要对它进行优化。今天我先优化它的部分UI和设置一些动画。

首先,说明一下,这部分都是我现学现做的,弄的时候也挺折腾的,所以我想先把整个过程的心得分享一下。

我是打算把应用弄成google的Material design风格,它的内容很多,就这一步来说,只要实现两点,一是显示信息的TextView有阴影,像卡片似的,二是这些TextView是从左向右弹出来的。清楚要实现什么效果之后,就去寻找实现的方法。有这么明确的目的,对于现在的我,最好就是百度一下,因为这么细的地方,工具类的书很少会讲到,然后我还会打开官方提供的API文档和金山词霸。因为这过程有这么几种情况,一是关键词不对,搜不到相关内容,这没办法,只能换关键词继续搜,二是搜到的教程讲得云里雾里的,这有可能是作者的问题,也有可能是我不懂这方面的知识,所以就需要查看API文档,另外即使教程讲得很清楚,最好也查看文档对照一下,除了能了解更多之外,还有就是因为有可能存在版本差异。

另外阅读API文档是比较苦的,不只是因为它是全英文的,还因为它的内容很多。看教程时,看到某些标签或关键词,但又不知道在文档的哪里,可以在Android Studio中输入代码,然后按住ctrl,指向代码,就会显示它是属于哪个包,另外还可以直接按ctrl + shift + N输入关键词,也会显示出来。下面讲解时,我会给出这些标签是在文档的哪里。最后,因为我弄不了它的动态图,所以想看动画效果的朋友可以自己写一下,很简单的两步。

一、实现TextView带阴影

先上效果图

虽然阴影不大,但是应该能看出有什么变化吧。这里跟上一篇相比,多了几个TextView,这都是用来显示天气信息的,只要在上一篇解析JSON数据那里修改一下就可以了。

然后下面是代码,这个我是根据网上的一篇教程来做的

这是一个放在res/drawable/下的xml文件。

下面是先把它添加到styles.xml中,然后在TextView中引用这个style

说明:

(1)这个<layer-list>里面可以存放其它drawable对象,只不过其它对象要包括在<item></item>里面,每一个对象就是一个item。这种关系有点像布局文件中布局方式和其中的view。

(2)<shape>就是画一个形状出来。

(3)<solid>只有color属性,这个标签的作用就是用这个color填充这个形状。

(4)<corners>只有在形状为rectangle矩形时,才有作用,就是把矩形变成圆角。

(5)<item android:left="1dp" android:bottm="1dp">就是控制上层形状偏移,其实这不太像偏移,因为从AS的预览效果来看,它没有移动的感觉,而是减掉了1dp的长度。当然这预览效果也有点怪,在<item>里写一个属性时,能正常预览,但写多一个就完全变形了。

这个实现阴影的原理是两个相同的矩形重叠在一起,然后上层偏移,底层显露的部分就是阴影。所以底层形状的颜色就是阴影的颜色。上层的颜色就是TextView的background颜色。

这里的所有标签的介绍和解释都在下面的这个Drawable中,这个是点击API Guides之后出现的

二、实现TextView从左向右弹出

动画部分内容很多,我蒙了很久,才知道只需View Animation中的Tween animation里的<scale>属性就能做到我要的效果。

先在xml中设置动画属性

这是一个在res/anim/下的xml文件(anim是自己创建的文件夹)

说明:

(1)这里其实可以直接用<scale>作为根元素。

(2)<set>是一个可以包含其它元素的容器,类似于上面的<layer_list>。

(3)fromXScale="0.0",toXScale="1.0",这意思是从无到有,而且最终为正常大小,小于1.0是缩小,大于1.0是放大,所以0.0代表大小为0,1.0代表正常大小。注意这里y轴是没有发生变化的。因为我需要的是TextView在x轴方向上从左向右弹出的效果。如果想从右开始,就把pivotX设置为100%就可以了。

(4)pivotX和pivotY="0%",这意思是动画开始的位置,0%相当于原点,50%就是中点。坐标情况跟之前讲阶段一:drawText的位置问题和Stroke、drawArc的相关问题时提到的一样,x越往右越大,y越往下越大。

(5)其实fromXScale和pivotX这两个属性的关系有点奇妙,好比现在我这里的fromYScale和toYScale都是1.0,这时pivotY="0%"是没意义的,其实删掉这个属性也是没问题的,因为y轴方向没变化,所以也就没有所谓的开始位置。

(6)duration="300",意思是动画从播放到结束用时300毫秒,也就0.3秒,也就是说这个属性是设置动画的持续时间。

(7)android:interpolator="@android:anim/accelerate_interpolator",这句作用是调用系统提供的速度控制器,这里是调用加速器,加速播放,系统提供的还有其它播放模式的控制器。

然后在.java中设置动画播放

其实我实现的效果是4个显示天气信息的TextView依次弹出来,要做到这个效果,我是在<set>标签中添加android:startOffset="300"这个属性,其实还可以在.java中添加zoominAnimation.setStartOffset(300);这个方法,作用是延迟300毫秒再开始播放动画。当然,要4个TextView依次弹出来,还要分别设置。

上面的<set>、<scale>标签和其它属性,都在上面API文档那图的Animation里有详细介绍,从那里你会知道更多更全的有关Animation的事情。

阶段一:为View设置阴影和弹出动画(天气应用)的更多相关文章

  1. IOS项目之弹出动画终结篇

    在之前写过IOS项目之弹出动画一.IOS项目之弹出动画二.IOS项目之弹出动画三,今天来一个终极封装已经上传到Github上弹出动画总结篇UIPopoverTableView. UIPopoverTa ...

  2. IOS项目之弹出动画二

    在IOS项目之弹出动画一中只是实现也功能,并没有体现面向对象的思想 ,今天就试着把它封装了一下,弹出视图的内容可以根据自定义,此处只是用UIDatePicker来演示 我把它传到了GitHub上    ...

  3. IOS项目之弹出动画三

    前面写了弹出动画两个,今天做商城时又用到了,看着这个用着蛮普遍的,所以记了下来 // // mallMoreView.h // XQB // // Created by City--Online on ...

  4. mac关闭渐隐和弹出动画效果

    苹果系统应用程序的窗口和对话框每次使用的时候都有华丽的特效,但是如果你感觉这种特效显得有点慢(MacGG闲的蛋疼),那该如何取消掉他呢? 方法很简单,打开"终端"(Finder-& ...

  5. IOS项目之弹出动画一

    小区宝首页导航栏左边有一个物业按钮,点击时会出现一个视图动画,之前用的是一个POP第三方,想着几个POP动画就要引用一堆的第三方有点麻烦,就试着自己写了一下,功能实现了,下一步就是优化将其封装一下.下 ...

  6. WPF制作子窗体的弹出动画效果

    创建一个WPF应用程序WpfApplication1,新建个窗体DialogWin <Windowx:Class="WpfApplication1.DialogWin" xm ...

  7. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  8. 【VS开发】MFC动态设置对话框属性 弹出或嵌入

    参考: MFC的对话框CDialog是怎么控制窗口可调整大小的属性的呢?打开资源文件,对话框资源的属性列表中,有一个"Border"项,改变该项的值就可以改变窗口边框风格.实际上w ...

  9. swift uiview弹出动画

    UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.0, ...

随机推荐

  1. 程序员装B指南

    一.准备工作 "工欲善其事必先利其器." 1.电脑不一定要配置高,但是双屏是必须的,越大越好,能一个横屏一个竖屏更好.一个用来查资料,一个用来写代码.总之要显得信息量很大,效率很高 ...

  2. ASP.NET Aries 3.0发布(附带通用API设计及基本教程介绍)

    主要更新: 1:升级处理机制(js请求由同步变更为异步) 2:优化前端JS:包括API和配置方式. 3:增加InputDialog功能. 4:增远远程验证功能. 5:优化权限安全机制. 6:增加一次请 ...

  3. 微信官方开源UI库-WeUI

    概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素 ...

  4. Flexbox 自由的布局

    css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...

  5. 玩转Windows服务系列——给Windows服务添加COM接口

    当我们运行一个Windows服务的时候,一般情况下,我们会选择以非窗口或者非控制台的方式运行,这样,它就只是一个后台程序,没有界面供我们进行交互. 那么当我们想与Windows服务进行实时交互的时候, ...

  6. <a>与文件下载-(下载一)

    <a>可直接下载xls,doc,rar,zip,exe,js文件(图片跟txt文件是直接打开的) <a href="wKioJlJolKeCIzkCADd3Wf7OPI42 ...

  7. JavaScript语言精粹--Function,类,this,对象

    1.类与对象 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它 ...

  8. JavaScript与PHP中正则

    一.JavaScript 有个在线调试正则的工具,点击查看工具.下面的所有示例代码,都可以在codepen上查看到. 1.创建正则表达式 var re = /ab+c/; //方式一 正则表达式字面量 ...

  9. android黑科技——完美解决界面逻辑的数据框架DataBinding(最新)的使用(二)

    昨天我们一起学习了dataBinding的基础用法,我想你可能还停留在它只是不用再findViewById,其实不然,今天我们就来扩展延伸,看看这个框架到底有什么魔力让谷歌官方大力推崇.这里还没看昨天 ...

  10. Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...