前言
这个空气质量包含的就是一些常规的空气指数，比如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,这个里面对应的参数名和描述在下面这张表里，写的时候注意一下就可以了
接下来就是写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.getPm2p5());//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展示。如果你在写作过程中遇到什么问题，及时提出来，我会最快回复你的。
