上一篇: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展示。如果你在写作过程中遇到什么问题,及时提出来,我会最快回复你的。
下一篇:Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整