首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android 天气APP(十二)空气质量、UI优化调整

Android 天气APP(十二)空气质量、UI优化调整

作者头像
晨曦_LLW
发布2020-09-25 15:07:29
7200
发布2020-09-25 15:07:29
举报

前言

这个空气质量包含的就是一些常规的空气指数,比如PM2.5、PM10等数据,相信任何天气APP都会有这些数据,所以我也加上去吧,并且修改一些UI。

正文

功能分两个,但是开发步骤是①空气质量 ②UI优化调整 ③自定义背景图片,本篇文章内容会比较多,建议一次看不完的朋友收藏文章或者关注博主,保留浏览入口。

空气质量

空气质量的接口数据和前面的接口稍有不同,location的参数值这次不再是区/县,而是国控站点,国控站点是什么鬼,这个我也是问了和风天气的客户人员才知道的,其实就是市,城市代码ID点击打开看到

在这里插入图片描述
在这里插入图片描述

具体的信息你可以下载找个文档去仔细了解,首先是访问的地址

https://free-api.heweather.net/s6/air/now?location=深圳&key=3086e91d66c04ce588a7f538f917c7f4

访问拿到的返回数据:

在这里插入图片描述
在这里插入图片描述

把这些数据生成是实体Bean

在这里插入图片描述
在这里插入图片描述

AirNowCityResponse.java代码如下

package com.llw.goodweather.bean;

import java.util.List;

public class AirNowCityResponse {

    private List<HeWeather6Bean> HeWeather6;

    public List<HeWeather6Bean> getHeWeather6() {
        return HeWeather6;
    }

    public void setHeWeather6(List<HeWeather6Bean> HeWeather6) {
        this.HeWeather6 = HeWeather6;
    }

    public static class HeWeather6Bean {
        /**
         * basic : {"cid":"CN101280601","location":"深圳","parent_city":"深圳","admin_area":"广东","cnty":"中国","lat":"22.54700089","lon":"114.08594513","tz":"+8.00"}
         * update : {"loc":"2020-04-30 10:27","utc":"2020-04-30 02:27"}
         * status : ok
         * air_now_city : {"aqi":"47","qlty":"优","main":"-","pm25":"23","pm10":"47","no2":"28","so2":"7","co":"0.6","o3":"95","pub_time":"2020-04-30 09:00"}
         * air_now_station : [{"air_sta":"通心岭子站","aqi":"43","asid":"CNA1356","co":"0.6","lat":"22.5545","lon":"114.1063","main":"-","no2":"10","o3":"104","pm10":"43","pm25":"23","pub_time":"2020-04-30 09:00","qlty":"优","so2":"7"},{"air_sta":"洪湖","aqi":"49","asid":"CNA1357","co":"0.5","lat":"22.5625","lon":"114.117","main":"-","no2":"17","o3":"113","pm10":"49","pm25":"27","pub_time":"2020-04-30 09:00","qlty":"优","so2":"8"},{"air_sta":"华侨城","aqi":"38","asid":"CNA1358","co":"0.5","lat":"22.5417","lon":"113.987","main":"-","no2":"18","o3":"105","pm10":"38","pm25":"20","pub_time":"2020-04-30 09:00","qlty":"优","so2":"6"},{"air_sta":"南海子站","aqi":"47","asid":"CNA1359","co":"0.5","lat":"22.5171","lon":"113.9181","main":"-","no2":"33","o3":"77","pm10":"47","pm25":"25","pub_time":"2020-04-30 09:00","qlty":"优","so2":"5"},{"air_sta":"盐田","aqi":"42","asid":"CNA1360","co":"0.5","lat":"22.5908","lon":"114.263","main":"-","no2":"30","o3":"83","pm10":"42","pm25":"13","pub_time":"2020-04-30 09:00","qlty":"优","so2":"9"},{"air_sta":"龙岗","aqi":"49","asid":"CNA1361","co":"0.6","lat":"22.7267","lon":"114.24","main":"-","no2":"32","o3":"98","pm10":"49","pm25":"27","pub_time":"2020-04-30 09:00","qlty":"优","so2":"9"},{"air_sta":"西乡","aqi":"54","asid":"CNA1362","co":"0.6","lat":"22.5794","lon":"113.891","main":"PM10","no2":"54","o3":"62","pm10":"58","pm25":"24","pub_time":"2020-04-30 09:00","qlty":"良","so2":"5"},{"air_sta":"南澳","aqi":"36","asid":"CNA1363","co":"0.5","lat":"22.5422","lon":"114.494","main":"-","no2":"19","o3":"113","pm10":"33","pm25":"22","pub_time":"2020-04-30 09:00","qlty":"优","so2":"4"},{"air_sta":"葵涌","aqi":"45","asid":"CNA1364","co":"0.5","lat":"22.6342","lon":"114.41","main":"-","no2":"26","o3":"87","pm10":"45","pm25":"18","pub_time":"2020-04-30 09:00","qlty":"优","so2":"4"},{"air_sta":"梅沙","aqi":"40","asid":"CNA1365","co":"0.5","lat":"22.5978","lon":"114.297","main":"-","no2":"20","o3":"100","pm10":"40","pm25":"21","pub_time":"2020-04-30 09:00","qlty":"优","so2":"8"},{"air_sta":"观澜","aqi":"59","asid":"CNA1366","co":"0.8","lat":"22.75","lon":"114.085","main":"PM10","no2":"40","o3":"93","pm10":"68","pm25":"29","pub_time":"2020-04-30 09:00","qlty":"良","so2":"5"}]
         */

        private BasicBean basic;
        private UpdateBean update;
        private String status;
        private AirNowCityBean air_now_city;
        private List<AirNowStationBean> air_now_station;

        public BasicBean getBasic() {
            return basic;
        }

        public void setBasic(BasicBean basic) {
            this.basic = basic;
        }

        public UpdateBean getUpdate() {
            return update;
        }

        public void setUpdate(UpdateBean update) {
            this.update = update;
        }

        public String getStatus() {
            return status;
        }

        public void setStatus(String status) {
            this.status = status;
        }

        public AirNowCityBean getAir_now_city() {
            return air_now_city;
        }

        public void setAir_now_city(AirNowCityBean air_now_city) {
            this.air_now_city = air_now_city;
        }

        public List<AirNowStationBean> getAir_now_station() {
            return air_now_station;
        }

        public void setAir_now_station(List<AirNowStationBean> air_now_station) {
            this.air_now_station = air_now_station;
        }

        public static class BasicBean {
            /**
             * cid : CN101280601
             * location : 深圳
             * parent_city : 深圳
             * admin_area : 广东
             * cnty : 中国
             * lat : 22.54700089
             * lon : 114.08594513
             * tz : +8.00
             */

            private String cid;
            private String location;
            private String parent_city;
            private String admin_area;
            private String cnty;
            private String lat;
            private String lon;
            private String tz;

            public String getCid() {
                return cid;
            }

            public void setCid(String cid) {
                this.cid = cid;
            }

            public String getLocation() {
                return location;
            }

            public void setLocation(String location) {
                this.location = location;
            }

            public String getParent_city() {
                return parent_city;
            }

            public void setParent_city(String parent_city) {
                this.parent_city = parent_city;
            }

            public String getAdmin_area() {
                return admin_area;
            }

            public void setAdmin_area(String admin_area) {
                this.admin_area = admin_area;
            }

            public String getCnty() {
                return cnty;
            }

            public void setCnty(String cnty) {
                this.cnty = cnty;
            }

            public String getLat() {
                return lat;
            }

            public void setLat(String lat) {
                this.lat = lat;
            }

            public String getLon() {
                return lon;
            }

            public void setLon(String lon) {
                this.lon = lon;
            }

            public String getTz() {
                return tz;
            }

            public void setTz(String tz) {
                this.tz = tz;
            }
        }

        public static class UpdateBean {
            /**
             * loc : 2020-04-30 10:27
             * utc : 2020-04-30 02:27
             */

            private String loc;
            private String utc;

            public String getLoc() {
                return loc;
            }

            public void setLoc(String loc) {
                this.loc = loc;
            }

            public String getUtc() {
                return utc;
            }

            public void setUtc(String utc) {
                this.utc = utc;
            }
        }

        public static class AirNowCityBean {
            /**
             * aqi : 47
             * qlty : 优
             * main : -
             * pm25 : 23
             * pm10 : 47
             * no2 : 28
             * so2 : 7
             * co : 0.6
             * o3 : 95
             * pub_time : 2020-04-30 09:00
             */

            private String aqi;
            private String qlty;
            private String main;
            private String pm25;
            private String pm10;
            private String no2;
            private String so2;
            private String co;
            private String o3;
            private String pub_time;

            public String getAqi() {
                return aqi;
            }

            public void setAqi(String aqi) {
                this.aqi = aqi;
            }

            public String getQlty() {
                return qlty;
            }

            public void setQlty(String qlty) {
                this.qlty = qlty;
            }

            public String getMain() {
                return main;
            }

            public void setMain(String main) {
                this.main = main;
            }

            public String getPm25() {
                return pm25;
            }

            public void setPm25(String pm25) {
                this.pm25 = pm25;
            }

            public String getPm10() {
                return pm10;
            }

            public void setPm10(String pm10) {
                this.pm10 = pm10;
            }

            public String getNo2() {
                return no2;
            }

            public void setNo2(String no2) {
                this.no2 = no2;
            }

            public String getSo2() {
                return so2;
            }

            public void setSo2(String so2) {
                this.so2 = so2;
            }

            public String getCo() {
                return co;
            }

            public void setCo(String co) {
                this.co = co;
            }

            public String getO3() {
                return o3;
            }

            public void setO3(String o3) {
                this.o3 = o3;
            }

            public String getPub_time() {
                return pub_time;
            }

            public void setPub_time(String pub_time) {
                this.pub_time = pub_time;
            }
        }

        public static class AirNowStationBean {
            /**
             * air_sta : 通心岭子站
             * aqi : 43
             * asid : CNA1356
             * co : 0.6
             * lat : 22.5545
             * lon : 114.1063
             * main : -
             * no2 : 10
             * o3 : 104
             * pm10 : 43
             * pm25 : 23
             * pub_time : 2020-04-30 09:00
             * qlty : 优
             * so2 : 7
             */

            private String air_sta;
            private String aqi;
            private String asid;
            private String co;
            private String lat;
            private String lon;
            private String main;
            private String no2;
            private String o3;
            private String pm10;
            private String pm25;
            private String pub_time;
            private String qlty;
            private String so2;

            public String getAir_sta() {
                return air_sta;
            }

            public void setAir_sta(String air_sta) {
                this.air_sta = air_sta;
            }

            public String getAqi() {
                return aqi;
            }

            public void setAqi(String aqi) {
                this.aqi = aqi;
            }

            public String getAsid() {
                return asid;
            }

            public void setAsid(String asid) {
                this.asid = asid;
            }

            public String getCo() {
                return co;
            }

            public void setCo(String co) {
                this.co = co;
            }

            public String getLat() {
                return lat;
            }

            public void setLat(String lat) {
                this.lat = lat;
            }

            public String getLon() {
                return lon;
            }

            public void setLon(String lon) {
                this.lon = lon;
            }

            public String getMain() {
                return main;
            }

            public void setMain(String main) {
                this.main = main;
            }

            public String getNo2() {
                return no2;
            }

            public void setNo2(String no2) {
                this.no2 = no2;
            }

            public String getO3() {
                return o3;
            }

            public void setO3(String o3) {
                this.o3 = o3;
            }

            public String getPm10() {
                return pm10;
            }

            public void setPm10(String pm10) {
                this.pm10 = pm10;
            }

            public String getPm25() {
                return pm25;
            }

            public void setPm25(String pm25) {
                this.pm25 = pm25;
            }

            public String getPub_time() {
                return pub_time;
            }

            public void setPub_time(String pub_time) {
                this.pub_time = pub_time;
            }

            public String getQlty() {
                return qlty;
            }

            public void setQlty(String qlty) {
                this.qlty = qlty;
            }

            public String getSo2() {
                return so2;
            }

            public void setSo2(String so2) {
                this.so2 = so2;
            }
        }
    }
}

这个实体Bean的有很多返回值,关键数据在AirNowCityBean,这个里面对应的参数名和描述在下面这张表里,写的时候注意一下就可以了

参数

描述

示例

pub_time

数据发布时间,格式yyyy-MM-dd HH:mm

2017-03-20 12:30

aqi

空气质量指数,AQI和PM25的关系

74

main

主要污染物

pm25

qlty

空气质量,取值范围:优,良,轻度污染,中度污染,重度污染,严重污染,查看计算方式

pm10

pm10

78

pm25

pm25

66

no2

二氧化氮

40

so2

二氧化硫

30

co

一氧化碳

33

o3

臭氧

20

接下来就是写API接口了,打开ApiService.java,在里面增加

在这里插入图片描述
在这里插入图片描述

这一步相信你已经很熟悉了吧,我就不过多的解释了,继续往下走。 接下来打开WeatherContract.java,里面增加空气质量数据的订阅

		/**
         * 空气质量数据
         * @param context
         * @param location
         */
        public void airNowCity(final Context context,String location){
            ApiService service = ServiceGenerator.createService(ApiService.class,0);
            service.getAirNowCity(location).enqueue(new NetCallBack<AirNowCityResponse>() {
                @Override
                public void onSuccess(Call<AirNowCityResponse> call, Response<AirNowCityResponse> response) {
                    if(getView() != null){
                        getView().getAirNowCityResult(response);
                    }
                }

                @Override
                public void onFailed() {
                    if(getView() != null){
                        getView().getDataFailed();
                    }
                }
            });
        }
		//查询空气质量的数据返回
        void getAirNowCityResult(Response<AirNowCityResponse> response);

接下来是MainActivity.java

在这里插入图片描述
在这里插入图片描述

在定位返回的数据里面新增一个city的变量

在这里插入图片描述
在这里插入图片描述

然后有两个地方要进行赋值 ①定位之后

在这里插入图片描述
在这里插入图片描述

②切换城市,点击市级列表的时候赋值

在这里插入图片描述
在这里插入图片描述

请求接口,修改三处地方,定位之后、下拉的时候、点击区/县的时候

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改activity_main.xml布局文件,放在七天天气预报的后面与风车的前面。 在修改布局之前,先自定义一个VIew,这个VIew并不是我自己写的,也是从网络上找的,只不过忘记出处了,因为这种东西网络上一大把,注释都在里面,其实就是一个圆环进度条,增加动画效果了,这种自定义View的代码和样式我都是放在mvplibrary下面的。 首先在style文件中创建样式

在这里插入图片描述
在这里插入图片描述

样式代码如下

	<!--圆环进度条-->
    <declare-styleable name="RoundProgressBar">
        <attr name="round_max_progress" format="float"/>
        <attr name="round_bg_color" format="color"/>
        <attr name="round_stroke_width" format="dimension"/>
        <attr name="round_progress" format="float"/>
        <attr name="round_progress_color" format="color"/>
        <attr name="round_first_text" format="string"/>
        <attr name="round_first_text_color" format="color"/>
        <attr name="round_first_text_size" format="dimension"/>
        <attr name="round_second_text" format="string"/>
        <attr name="round_second_text_color" format="color"/>
        <attr name="round_second_text_size" format="dimension"/>
        <attr name="round_min_text" format="string"/>
        <attr name="round_min_text_color" format="color"/>
        <attr name="round_min_text_size" format="dimension"/>
        <attr name="round_max_text" format="string"/>
        <attr name="round_max_text_color" format="color"/>
        <attr name="round_max_text_size" format="dimension"/>
        <attr name="round_angle_size" format="float"/>
        <attr name="round_start_angle" format="float"/>
    </declare-styleable>

然后创建这个View

在这里插入图片描述
在这里插入图片描述

代码如下:

package com.llw.mvplibrary.view;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import com.llw.mvplibrary.R;

public class RoundProgressBar extends View {

    private int mStrokeWidth = dp2px(8);//圆弧的宽度
    private float mStartAngle = 135;//圆弧开始的角度
    private float mAngleSize = 270;//起点角度和终点角度对应的夹角大小
    private int mArcBgColor;//圆弧背景颜色
    private float mMaxProgress;//最大的进度,用于计算进度与夹角的比例
    private float mCurrentAngleSize;//当前进度对应的起点角度到当前进度角度夹角的大小
    private float mCurrentProgress = 0;//当前进度
    private long mDuration = 2000;//动画的执行时长
    private int mProgressColor;//进度圆弧的颜色
    private String mFirstText = "0";//第一行文本
    private int mFirstTextColor = Color.WHITE;//第一行文本的颜色
    private float mFirstTextSize = 56f;//第一行文本的字体大小
    private String mSecondText = " ";//第二行文本
    private int mSecondTextColor = Color.WHITE;//第二行文本的颜色
    private float mSecondTextSize = 56f;//第二行文本的字体大小
    private String mMinText = "0";//进度最小值
    private int mMinTextColor = Color.WHITE;//最小值文本的颜色
    private float mMinTextSize = 32f;//最小值字体大小
    private String mMaxText = "0";//进度最大值
    private int mMaxTextColor = Color.WHITE;//最大值文本的颜色
    private float mMaxTextSize = 32f;//最大值字体大小


    public RoundProgressBar(Context context) {
        super(context, null);
    }

    public RoundProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs, 0);

    }

    public RoundProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttr(context, attrs);
    }

    /**
     * 设置初始化的参数
     *
     * @param context
     * @param attrs
     */
    private void initAttr(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
        mMaxProgress = array.getFloat(R.styleable.RoundProgressBar_round_max_progress, 500f);
        mArcBgColor = array.getColor(R.styleable.RoundProgressBar_round_bg_color, Color.YELLOW);
        mStrokeWidth = dp2px(array.getDimension(R.styleable.RoundProgressBar_round_stroke_width, 12f));
        mCurrentProgress = array.getFloat(R.styleable.RoundProgressBar_round_progress, 300f);
        mProgressColor = array.getColor(R.styleable.RoundProgressBar_round_progress_color, Color.RED);
        mFirstText = array.getString(R.styleable.RoundProgressBar_round_first_text);
        mFirstTextSize = dp2px(array.getDimension(R.styleable.RoundProgressBar_round_first_text_size, 20f));
        mFirstTextColor = array.getColor(R.styleable.RoundProgressBar_round_first_text_color, Color.RED);
        mSecondText = array.getString(R.styleable.RoundProgressBar_round_second_text);
        mSecondTextSize = dp2px(array.getDimension(R.styleable.RoundProgressBar_round_second_text_size, 20f));
        mSecondTextColor = array.getColor(R.styleable.RoundProgressBar_round_second_text_color, Color.RED);
        mMinText = array.getString(R.styleable.RoundProgressBar_round_min_text);
        mMinTextSize = dp2px(array.getDimension(R.styleable.RoundProgressBar_round_min_text_size, 20f));
        mMinTextColor = array.getColor(R.styleable.RoundProgressBar_round_min_text_color, Color.RED);
        mMaxText = array.getString(R.styleable.RoundProgressBar_round_max_text);
        mMaxTextSize = dp2px(array.getDimension(R.styleable.RoundProgressBar_round_max_text_size, 20f));
        mMaxTextColor = array.getColor(R.styleable.RoundProgressBar_round_max_text_color, Color.RED);
        mAngleSize = array.getFloat(R.styleable.RoundProgressBar_round_angle_size, 270f);
        mStartAngle = array.getFloat(R.styleable.RoundProgressBar_round_start_angle, 135f);
        array.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int centerX = getWidth() / 2;

        RectF rectF = new RectF();
        rectF.left = mStrokeWidth;
        rectF.top = mStrokeWidth;
        rectF.right = centerX * 2 - mStrokeWidth;
        rectF.bottom = centerX * 2 - mStrokeWidth;

        //画最外层的圆弧
        drawArcBg(canvas, rectF);
        //画进度
        drawArcProgress(canvas, rectF);
        //绘制第一级文本
        drawFirstText(canvas, centerX);
        //绘制第二级文本
        drawSecondText(canvas, centerX);
        //绘制最小值文本
        drawMinText(canvas, rectF.left, rectF.bottom);
        //绘制最大值文本
        drawMaxText(canvas, rectF.right, rectF.bottom);

    }


    /**
     * 画最开始的圆弧
     *
     * @param canvas
     * @param rectF
     */
    private void drawArcBg(Canvas canvas, RectF rectF) {
        Paint mPaint = new Paint();
        //画笔的填充样式,Paint.Style.FILL 填充内部;Paint.Style.FILL_AND_STROKE 填充内部和描边;Paint.Style.STROKE 描边
        mPaint.setStyle(Paint.Style.STROKE);
        //圆弧的宽度
        mPaint.setStrokeWidth(mStrokeWidth);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //画笔的颜色
        mPaint.setColor(mArcBgColor);
        //画笔的样式 Paint.Cap.Round 圆形,Cap.SQUARE 方形
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //开始画圆弧
        canvas.drawArc(rectF, mStartAngle, mAngleSize, false, mPaint);
    }

    /**
     * 画进度的圆弧
     *
     * @param canvas
     * @param rectF
     */
    private void drawArcProgress(Canvas canvas, RectF rectF) {
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mStrokeWidth);
        paint.setColor(mProgressColor);
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(rectF, mStartAngle, mCurrentAngleSize, false, paint);
    }


    /**
     * 绘制第一级文字
     *
     * @param canvas  画笔
     * @param centerX 位置
     */
    private void drawFirstText(Canvas canvas, float centerX) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mFirstTextColor);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(mFirstTextSize);
        Rect firstTextBounds = new Rect();
        paint.getTextBounds(mFirstText, 0, mFirstText.length(), firstTextBounds);
        canvas.drawText(mFirstText, centerX, firstTextBounds.height() / 2 + getHeight() * 2 / 5, paint);
    }

    /**
     * 绘制第二级文本
     *
     * @param canvas  画笔
     * @param centerX 文本
     */
    private void drawSecondText(Canvas canvas, float centerX) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mSecondTextColor);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(mSecondTextSize);
        Rect bounds = new Rect();
        paint.getTextBounds(mSecondText, 0, mSecondText.length(), bounds);
        canvas.drawText(mSecondText, centerX, getHeight() / 2 + bounds.height() / 2 +
                getFontHeight(mSecondText, mSecondTextSize), paint);
    }

    /**
     * 绘制最小值文本
     *
     * @param canvas  画笔
     * @param leftX   X轴位置
     * @param bottomY Y轴位置
     */
    private void drawMinText(Canvas canvas, float leftX, float bottomY) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mMinTextColor);
        paint.setTextAlign(Paint.Align.CENTER);//设置绘制方式 中心对齐
        paint.setTextSize(mMinTextSize);
        Rect bounds = new Rect();
        paint.getTextBounds(mMinText, 0, mMinText.length(), bounds);//TextView的高度和宽度
        canvas.drawText(mMinText, leftX + bounds.width() * 4, bottomY+16, paint);
    }

    /**
     * 绘制最大值文本
     *
     * @param canvas  画笔
     * @param rightX  X轴位置
     * @param bottomY Y轴位置
     */
    private void drawMaxText(Canvas canvas, float rightX, float bottomY) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mMaxTextColor);
        paint.setTextAlign(Paint.Align.CENTER);//设置绘制方式 中心对齐
        paint.setTextSize(mMaxTextSize);
        Rect bounds = new Rect();
        paint.getTextBounds(mMaxText, 0, mMaxText.length(), bounds);//TextView的高度和宽度
        canvas.drawText(mMaxText, rightX - bounds.width(), bottomY+16, paint);
    }

    /**
     * 设置最大的进度
     *
     * @param progress
     */
    public void setMaxProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("Progress value can not be less than 0 ");
        }
        mMaxProgress = progress;
    }

    /**
     * 设置当前进度
     *
     * @param progress
     */
    public void setProgress(float progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("Progress value can not be less than 0");
        }
        if (progress > mMaxProgress) {
            progress = mMaxProgress;
        }
        mCurrentProgress = progress;
        float size = mCurrentProgress / mMaxProgress;
        mCurrentAngleSize = (int) (mAngleSize * size);
        setAnimator(0, mCurrentAngleSize);
    }

    /**
     * 设置进度圆弧的颜色
     *
     * @param color
     */
    public void setProgressColor(int color) {
        if (color == 0) {
            throw new IllegalArgumentException("Color can no be 0");
        }
        mProgressColor = color;
    }

    /**
     * 设置圆弧的颜色
     *
     * @param color
     */
    public void setArcBgColor(int color) {
        if (color == 0) {
            throw new IllegalArgumentException("Color can no be 0");
        }
        mArcBgColor = color;
    }

    /**
     * 设置圆弧的宽度
     *
     * @param strokeWidth
     */
    public void setStrokeWidth(int strokeWidth) {
        if (strokeWidth < 0) {
            throw new IllegalArgumentException("strokeWidth value can not be less than 0");
        }
        mStrokeWidth = dp2px(strokeWidth);
    }

    /**
     * 设置动画的执行时长
     *
     * @param duration
     */
    public void setAnimatorDuration(long duration) {
        if (duration < 0) {
            throw new IllegalArgumentException("Duration value can not be less than 0");
        }
        mDuration = duration;
    }

    /**
     * 设置第一行文本
     *
     * @param text
     */
    public void setFirstText(String text) {
        mFirstText = text;
    }

    /**
     * 设置第一行文本的颜色
     *
     * @param color
     */
    public void setFirstTextColor(int color) {
        if (color <= 0) {
            throw new IllegalArgumentException("Color value can not be less than 0");
        }
        mFirstTextColor = color;
    }

    /**
     * 设置第一行文本的大小
     *
     * @param textSize
     */
    public void setFirstTextSize(float textSize) {
        if (textSize <= 0) {
            throw new IllegalArgumentException("textSize can not be less than 0");
        }
        mFirstTextSize = textSize;
    }

    /**
     * 设置第二行文本
     *
     * @param text
     */
    public void setSecondText(String text) {
        mSecondText = text;
    }


    /**
     * 设置第二行文本的颜色
     *
     * @param color
     */
    public void setSecondTextColor(int color) {
        if (color == 0) {
            throw new IllegalArgumentException("Color value can not be less than 0");
        }
        mSecondTextColor = color;
    }

    /**
     * 设置第二行文本的大小
     *
     * @param textSize
     */
    public void setSecondTextSize(float textSize) {
        if (textSize <= 0) {
            throw new IllegalArgumentException("textSize can not be less than 0");
        }
        mSecondTextSize = textSize;
    }

    /**
     * 设置最小值文本
     *
     * @param text
     */
    public void setMinText(String text) {
        mMinText = text;
    }


    /**
     * 设置最小值文本的颜色
     *
     * @param color
     */
    public void setMinTextColor(int color) {
        if (color == 0) {
            throw new IllegalArgumentException("Color value can not be less than 0");
        }
        mMinTextColor = color;
    }

    /**
     * 设置最小值文本的大小
     *
     * @param textSize
     */
    public void setMinTextSize(float textSize) {
        if (textSize <= 0) {
            throw new IllegalArgumentException("textSize can not be less than 0");
        }
        mMinTextSize = textSize;
    }

    /**
     * 设置最大值文本
     *
     * @param text
     */
    public void setMaxText(String text) {
        mMaxText = text;
    }


    /**
     * 设置最大值文本的颜色
     *
     * @param color
     */
    public void setMaxTextColor(int color) {
        if (color == 0) {
            throw new IllegalArgumentException("Color value can not be less than 0");
        }
        mMaxTextColor = color;
    }

    /**
     * 设置最大值文本的大小
     *
     * @param textSize
     */
    public void setMaxTextSize(float textSize) {
        if (textSize <= 0) {
            throw new IllegalArgumentException("textSize can not be less than 0");
        }
        mMaxTextSize = textSize;
    }


    /**
     * 设置圆弧开始的角度
     *
     * @param startAngle
     */
    public void setStartAngle(int startAngle) {
        mStartAngle = startAngle;
    }

    /**
     * 设置圆弧的起始角度到终点角度的大小
     *
     * @param angleSize
     */
    public void setAngleSize(int angleSize) {
        mAngleSize = angleSize;
    }

    /**
     * dp转成px
     *
     * @param dp
     * @return
     */
    private int dp2px(float dp) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dp * density + 0.5f * (dp >= 0 ? 1 : -1));
    }

    /**
     * 设置动画
     *
     * @param start  开始位置
     * @param target 结束位置
     */
    private void setAnimator(float start, float target) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(start, target);
        valueAnimator.setDuration(mDuration);
        valueAnimator.setTarget(mCurrentAngleSize);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mCurrentAngleSize = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

    /**
     * 测量字体的高度
     *
     * @param textStr
     * @param fontSize
     * @return
     */
    private float getFontHeight(String textStr, float fontSize) {
        Paint paint = new Paint();
        paint.setTextSize(fontSize);
        Rect bounds = new Rect();
        paint.getTextBounds(textStr, 0, textStr.length(), bounds);
        return bounds.height();
    }
}

空气污染指数划分为0-50、51-100、101-150、151-200、201-300和大于300六档。 最小值为0,最大值为500。 接下来修改main_activity.xml布局文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

然后是这一部分的代码,只要修改原来的代码即可

							<!--分隔线 增加UI效果-->
                            <View
                                android:layout_marginTop="8dp"
                                android:layout_marginLeft="20dp"
                                android:layout_marginRight="20dp"
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="@color/white"
                                android:alpha="0.1"/>

                            <!--用于显示逐小时天气-->
                            <androidx.recyclerview.widget.RecyclerView
                                android:padding="12dp"
                                android:id="@+id/rv_hourly"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"/>

                            <!--用于显示天气预报数据-->
                            <androidx.recyclerview.widget.RecyclerView
                                android:paddingLeft="8dp"
                                android:paddingRight="8dp"
                                android:id="@+id/rv"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"/>

                            <!--空气质量-->
                            <LinearLayout
                                android:padding="20dp"
                                android:orientation="vertical"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">
                                <!--标题-->
                                <TextView
                                    android:textSize="18sp"
                                    android:textColor="@color/white"
                                    android:text="空气质量"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"/>

                                <LinearLayout
                                    android:padding="8dp"
                                    android:orientation="horizontal"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content">
                                    <!--污染指数 动画展示-->
                                    <LinearLayout
                                        android:gravity="center"
                                        android:orientation="vertical"
                                        android:layout_width="0dp"
                                        android:layout_height="match_parent"
                                        android:layout_weight="1">
                                        <TextView
                                            android:layout_marginBottom="8dp"
                                            android:textSize="14sp"
                                            android:textColor="#DAEBEE"
                                            android:text="污染指数"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"/>
                                        <!--显示污染指数进度值-->
                                        <com.llw.mvplibrary.view.RoundProgressBar
                                            android:id="@+id/rpb_aqi"
                                            app:round_bg_color="#C6D7F4"
                                            app:round_progress_color="#FBFEF7"
                                            android:layout_gravity="center"
                                            android:layout_width="120dp"
                                            android:layout_height="120dp"/>
                                    </LinearLayout>
                                    <!--其他指数-->
                                    <LinearLayout
                                        android:orientation="vertical"
                                        android:layout_width="0dp"
                                        android:layout_height="wrap_content"
                                        android:layout_weight="1">
                                        <!--PM10-->
                                        <LinearLayout
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <TextView
                                                android:gravity="center"
                                                android:textColor="@color/blue_one"
                                                android:text="PM10"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_pm10"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>

                                        <!--PM2.5-->
                                        <LinearLayout
                                            android:layout_marginTop="12dp"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <TextView
                                                android:gravity="center"
                                                android:textColor="@color/blue_one"
                                                android:text="PM2.5"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_pm25"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>

                                        <!--NO2 二氧化氮-->
                                        <LinearLayout
                                            android:layout_marginTop="12dp"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <LinearLayout
                                                android:gravity="center"
                                                android:layout_width="0dp"
                                                android:layout_height="wrap_content"
                                                android:layout_weight="1">
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="NO"
                                                    android:textSize="12sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="2"
                                                    android:textSize="8sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                            </LinearLayout>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_no2"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>

                                        <!--SO2 二氧化硫-->
                                        <LinearLayout
                                            android:layout_marginTop="12dp"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <LinearLayout
                                                android:gravity="center"
                                                android:layout_width="0dp"
                                                android:layout_height="wrap_content"
                                                android:layout_weight="1">
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="SO"
                                                    android:textSize="12sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="2"
                                                    android:textSize="8sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                            </LinearLayout>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_so2"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>

                                        <!--O3 臭氧-->
                                        <LinearLayout
                                            android:layout_marginTop="12dp"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <LinearLayout
                                                android:gravity="center"
                                                android:layout_width="0dp"
                                                android:layout_height="wrap_content"
                                                android:layout_weight="1">
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="O"
                                                    android:textSize="12sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                                <TextView
                                                    android:textColor="@color/blue_one"
                                                    android:text="3"
                                                    android:textSize="8sp"
                                                    android:layout_width="wrap_content"
                                                    android:layout_height="wrap_content"/>
                                            </LinearLayout>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_o3"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>

                                        <!--CO 一氧化碳-->
                                        <LinearLayout
                                            android:layout_marginTop="12dp"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content">
                                            <TextView
                                                android:gravity="center"
                                                android:textColor="@color/blue_one"
                                                android:text="CO"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                            <TextView
                                                android:gravity="center"
                                                android:id="@+id/tv_co"
                                                android:textColor="@color/white"
                                                android:textSize="12sp"
                                                android:layout_width="0dp"
                                                android:layout_weight="1"
                                                android:layout_height="wrap_content"/>
                                        </LinearLayout>
                                    </LinearLayout>
                                </LinearLayout>
                            </LinearLayout>

                            <!--风力展示-->
                            <LinearLayout
                                android:orientation="vertical"
                                android:padding="20dp"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">

                                <!--标题-->
                                <TextView
                                    android:textSize="18sp"
                                    android:textColor="@color/white"
                                    android:text="风向风力"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"/>

                                <LinearLayout
                                    android:layout_marginTop="8dp"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content">
                                    <RelativeLayout
                                        android:id="@+id/rl_wind"
                                        android:layout_width="130dp"
                                        android:layout_height="120dp">
                                        <!--大风车-->
                                        <com.llw.mvplibrary.view.WhiteWindmills
                                            android:id="@+id/ww_big"
                                            android:layout_width="100dp"
                                            android:layout_height="120dp" />
                                        <!--小风车-->
                                        <com.llw.mvplibrary.view.WhiteWindmills
                                            android:id="@+id/ww_small"
                                            android:layout_width="50dp"
                                            android:layout_height="60dp"
                                            android:layout_alignParentBottom="true"
                                            android:layout_alignParentRight="true"
                                            />
                                    </RelativeLayout>

                                    <LinearLayout
                                        android:gravity="center"
                                        android:orientation="vertical"
                                        android:layout_weight="1"
                                        android:layout_width="0dp"
                                        android:layout_height="match_parent">
                                        <!--风向-->
                                        <TextView
                                            android:id="@+id/tv_wind_direction"
                                            android:textColor="@color/white"
                                            android:textSize="@dimen/sp_14"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"/>
                                        <!--风力-->
                                        <TextView
                                            android:layout_marginTop="20dp"
                                            android:id="@+id/tv_wind_power"
                                            android:textColor="@color/white"
                                            android:textSize="@dimen/sp_14"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"/>
                                    </LinearLayout>
                                </LinearLayout>
                            </LinearLayout>

接下来在mvplibrary中的res文件下新建一个colors.xml

在这里插入图片描述
在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="arc_bg_color">#C6D7F4</color>
    <color name="arc_progress_color">#FBFEF7</color>
    <color name="white">#ffffff</color>
    <color name="black">#000000</color>
    <color name="blue_one">#9FC8E9</color>
    <color name="transparent">#00000000</color>
    <color name="transparent_bg">#22000000</color>
</resources>

然后在MainActivity中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
	//空气质量数据返回
    @Override
    public void getAirNowCityResult(Response<AirNowCityResponse> response) {
        dismissLoadingDialog();//关闭弹窗
        if (("ok").equals(response.body().getHeWeather6().get(0).getStatus())) {
            //UI显示
            AirNowCityResponse.HeWeather6Bean.AirNowCityBean data = response.body().getHeWeather6().get(0).getAir_now_city();
            if (!ObjectUtils.isEmpty(data) && data != null) {
                //污染指数
                rpbAqi.setMaxProgress(500);//最大进度,用于计算
                rpbAqi.setMinText("0");//设置显示最小值
                rpbAqi.setMinTextSize(32f);
                rpbAqi.setMaxText("500");//设置显示最大值
                rpbAqi.setMaxTextSize(32f);
                rpbAqi.setProgress(Float.valueOf(data.getAqi()));//当前进度
                rpbAqi.setArcBgColor(getResources().getColor(R.color.arc_bg_color));//圆弧的颜色
                rpbAqi.setProgressColor(getResources().getColor(R.color.arc_progress_color));//进度圆弧的颜色
                rpbAqi.setFirstText(data.getQlty());//空气质量描述  取值范围:优,良,轻度污染,中度污染,重度污染,严重污染
                rpbAqi.setFirstTextSize(44f);
                rpbAqi.setSecondText(data.getAqi());//空气质量值
                rpbAqi.setSecondTextSize(64f);
                rpbAqi.setMinText("0");
                rpbAqi.setMinTextColor(getResources().getColor(R.color.arc_progress_color));

                tvPm10.setText(data.getPm10());//PM10
                tvPm25.setText(data.getPm10());//PM2.5
                tvNo2.setText(data.getNo2());//二氧化氮
                tvSo2.setText(data.getSo2());//二氧化硫
                tvO3.setText(data.getO3());//臭氧
                tvCo.setText(data.getCo());//一氧化碳
            }
        } else {
            ToastUtils.showShortToast(context, response.body().getHeWeather6().get(0).getStatus());
        }
    }

然后运行一下:

在这里插入图片描述
在这里插入图片描述

这样,空气质量就完成了,UI也只是小改动而已,主要是空气质量数据的请求的UI展示。如果你在写作过程中遇到什么问题,及时提出来,我会最快回复你的。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-05-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 正文
    • 空气质量
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档