专栏首页Android、鸿蒙开发Android 天气APP(十二)空气质量、UI优化调整

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

前言

这个空气质量包含的就是一些常规的空气指数,比如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展示。如果你在写作过程中遇到什么问题,及时提出来,我会最快回复你的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 天气APP(十四)修复UI显示异常、优化业务代码逻辑、增加详情天气显示

    在上一篇文章中增加了自定义背景的功能的同时也遗留了一些问题,为阅读者带来的不便,敬请谅解,在这一篇中将会优化这些问题,同时优化业务逻辑代码,做到用最少的代码量办...

    晨曦_LLW
  • Android 在一个APP里打开另一个APP

    不知道你们有没有注意过,每次打开一些软件的时候都会有广告引导页,有时候手滑点到了,会有进入手机上的另一个APP,这有没有引起你的注意呢?

    晨曦_LLW
  • Android 天气APP(二十三)增加灾害预警、优化主页面UI

    天气预报光有普通天气总感觉好少了点什么,所以和风天气给补上了,那就是灾害天气的预警,灾害预警API可以获取指定城市的极端天气预警数据。

    晨曦_LLW
  • 安卓自定义列表dialog

    这个形式也是最常用的,不过最近需要用到列表信息Dialog,原生的不光样式不能满足需求,而且是开发电视端的APP,需要对焦点进行特殊处理,所以就需要自定义...

    先知先觉
  • 9.indicate、xutils、json

    六月的雨
  • 12、json、GridView、缓存

    六月的雨
  • Android使用Spinner实现城市级联下拉框

    最近写一个使用Spinner实现城市级联下拉框的Dome,现在总结一下,第一次写博客,互相学习。

    砸漏
  • 这个控件你必须会用!—ListView+GirdView合集

    ListView 列表视图,直接继承了 AbsListView,是一个以垂直方式在项目中显示 View视图的列表。ListView的数据项,来自一个继承了 Li...

    下码看花
  • 错误操作怎么办?用他让你不再害怕!—Dialog最详解

    Hi,好久不见,甚是想念各位花粉,为了感谢花粉们长久以来的支持,本篇文章继续分享Android中非常实用的干货— Dialog(对话框)!那么什么叫 Dialo...

    下码看花
  • 在Android界面上显示和获取Logcat日志输出的方法

    当我们设置好之后,我们还需要一个process类,作用通俗来讲就是用Java代码来进行adb命令行操作代码是:

    砸漏

扫码关注云+社区

领取腾讯云代金券