写点什么

任性!我开发了一款自己用的天气预报 app,android 双击事件响应

用户头像
Android架构
关注
发布于: 刚刚

首页


如图:



首先分析一下页面结构,红色区域是Activity,绿色区域是一个TitleBar,黄色区域是Viewpage+Fragment,其中背景图和天气特效是在Activity中的。


天气页


天气页在 Fragment 中,包含了某个城市的相关天气信息,主要内容如下:


1,实时天气


实时天气实现了Titanic效果,主要是重写TextView,通过给画笔设置BitmapShader实现波浪效果,然后通过属性动画改变 shader 的偏移量实现动态效果。


2,预警信息


预警信息是通过ViewFlipper实现向上翻页效果,主要是为了应对同时多个预警信息的情况。


3,固定底部


在 Fragment 页面没有滚动的情况下主要分为四个区域如下图:



其中区域 1 在顶部,区域 2 和区域 3 是固定在底部的,因此就需要动态改变空置区域的高度,以适应各种屏幕尺寸。此处通过重写Linearlayout,测量出区域 1,2,3 的高度后再根据屏幕高度以及状态栏、标题栏的高度算出空置区域的高度,在摆放区域 2 时顶部加上空置区域的高度,来达到区域 2、3 固定底部的效果。


4,逐小时


逐小时天气是一个自定义 view,绘制折线图、图标、文字等,然后配合HorizontalScrollView实现滚动效果,当然也可以直接使用Scroller来实现滚动效果。



5,15 天预报


如上图,由于存在横向滚动,且除了中间的折线其他都是文字图标,所以,考虑使用 RecyclerView+自定义 View 实现,相比直接自定义 View,及不用处理滚动问题,也无需绘制那么多文字和图标。


自定义中间 View 时需要给每个 item 传入当前及前后两条数据,绘制折线分两部分,当前中间位置跟前一条数据的连线,以及跟后一条的连线。也就是分别计算当前位置跟前后两条数据的平均值,绘制直线即可。


需要注意的是绘制折线时需要设置线段画笔的线帽为:Cap.SQUARE,可防止折线陡峭时中间出现一丢丢断裂的问题。


6,太阳和月亮



太阳和月亮主要是通过自定义 View 实现,使用属性动画实现太阳和月亮的移动效果,(线条颜色比淡,图片压缩后效果不好)。


背景+特效


背景和特效是在外层 Activity 中,在城市切换时根据当前城市的天气显示不同的背景图和特效。


背景就不说了就是个ImageView,根据不同天气展示不同图片即可。特效也是根据不同天气情况展示不同动画效果,那该如何实现呢?本来想着每个特效都自定义一个 View,不同 View 切换,但是这样太麻烦了,不仅切换起来麻烦,每次新增特效都要修改调用处的代码,不符合开闭原则。


最终决定通过自定义Drawable,切换时只需要给ImageView设置不同 drawable 即可,具体如何实现就不多说了,看代码就好了。


目前实现了晴天,多云,小雨,中雨,大雨,雷雨等天气特效,后面再加入下雪等特效。

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
任性!我开发了一款自己用的天气预报app,android双击事件响应