阶段一：一个简单的天气预报应用的完整实现过程

Posted 2020-07-30

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

 

上一篇阶段一：一个简单的天气预报应用的完整实现过程（一）完成了应用的核心功能，接下来就要对它进行优化。今天我先优化它的部分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的事情。