自定义View高仿小米天气24小时天气预报折线图

项目地址

HourlyForecastView欢迎star
博客原文
直接从md文件复制过来的 如果版式有问题请查看原文
感谢这位博主给的思路分析文章

需求分析

• 圆点的宽高(宽为固定的，高与该时刻温度值线性相关）
• 虚线宽度的判定（根据数据源来）
• 动画效果（图片总是在 虚线或虚线与屏幕边缘中间）

数据源

饥人谷24小时天气API

饥人谷开放API

Json格式部分如下，完整见上述网址

{
    "status": "OK",
    "hourly": [
        {
            "text": "晴",
            "code": "1",
            "temperature": "17",
            "time": "2017-08-30T02:00:00+08:00"
        },
        {
            "text": "晴",
            "code": "1",
            "temperature": "17",
            "time": "2017-08-30T03:00:00+08:00"
        }
    ]
}

使用Android Studio的插件GsonFormat就能根据Json，自动生成bean类了。

代码块中 … 为省略无关代码 下同

public class HourlyWeatherBean {
   

    /**
     * text : 多云
     * code : 4
     * temperature : 28
     * time : 2017-08-30T02:00:00+08:00
     */

    private String text;
    private String code;
    private String temperature;
    private String time;

    public HourlyWeatherBean(String text, String code, String temperature, String time) {
        this.text = text;
        this.code = code;
        this.temperature = temperature;
        this.time = time;
    }

    ...
    getter 
    setter
    ...
}

初始化与Utils

初始化与默认值

将json数据转换为beanList传给View的initData方法

private void initView() {

        ...
        List<HourlyWeatherBean> hourlyWeatherList = new ArrayList<>();
        Gson gson = new Gson();
        JsonObject jo = new JsonParser().parse(jsonData).getAsJsonObject();
        JsonArray ja = jo.getAsJsonArray("hourly");
        for (JsonElement element : ja) {
            HourlyWeatherBean bean = gson.fromJson(element,