原标题：Android简易天气App

前言

本打算是写一个贝塞尔曲线的demo，想了一下哪种场景可以直观的表现出贝塞尔曲线，想到天气预报中的那些24小时和未来几日天气变化正好适用。接着开始构思，开始是打算把数据写死的，然后想了想既然是模拟天气预报，为了真实一点，干脆就从网络获取吧，就找了个天气接口，一看接口还有好多其他的数据，干脆都用了吧。然后又想了一想，既然已经做成天气预报了，切换城市是必须要有的吧。最后就变成了一个简易的天气App。

先上效果图，上面和下面两部分是显示的一些基本数据，中间那个可滑动的未来15日天气就是一开始打算写的贝塞尔曲线部分。选择左上角的城市，会跳转到搜索界面，可以搜索想要查看城市的天气状况。

使用到的知识

网络请求：Retrofit + RxJava

网络数据解析：Gson

天气图标获取：Glide

主界面和搜索界面的消息传递：EventBus

天气变化曲线：自定义View

数据缓存：SharedPreference

视图绑定：ButterKnife

搜索编辑框：DataBinding

搜索结果列表：RecyclerView

准备工作

一共使用了3个接口，一个用来请求天气数据，一个用来请求天气类型的图标，一个用来搜索城市。请求天气的接口为http://t.weather.sojson.com/api/weather/city/city_code，接口及返回Json数据示例https://www.sojson.com/blog/305.html有说明，其中的city_code通过搜索城市的接口得到，使用的是和风天气的接口。返回数据中的天气类型用来请求天气类型图标，也是和风天气的接口。和风天气的官网上有说明。请求天气接口返回的数据是Json格式的，这就需要做Json的解析，我这里用的是Gson。使用Gson是需要与数据相对应的Bean类的，Android Studio中正好有一个插件叫做GsonFormat，可以自动生成对应的Bean类。选择File Settings/Plugins/MarketPlace，搜索GsonFormat，安装就可以了，我这个是已经安装过了。

在app的build.gradle中添加要使用到的依赖。直接都添加好了，已经将后续所有用到的都添加了好了。顺便添加compileOptions和dataBinding两段代码。

android {

...

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

dataBinding {

enabled = true

}

}

dependencies {

...

implementation 'com.android.support:recyclerview-v7:28.0.0'

implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'

implementation 'io.reactivex.rxjava2:rxjava:2.2.6'

implementation 'com.squareup.retrofit2:adapter-rxjava2:2.4.0'

implementation 'com.squareup.retrofit2:converter-gson:2.2.0'

implementation 'com.squareup.retrofit2:retrofit:2.2.0'

implementation 'com.jakewharton:butterknife:9.0.0'

implementation 'com.squareup.okhttp3:okhttp:3.10.0'

implementation 'org.greenrobot:eventbus:3.0.0'

annotationProcessor 'com.jakewharton:butterknife-compiler:9.0.0'

...

}

在project的build.gradle中添加

dependencies {

...

classpath 'com.jakewharton:butterknife-gradle-plugin:9.0.0'

classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'

// NOTE:Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

天气数据网络请求

分为两块，一块是天气和图标的请求，使用RxJava的flatMap操作符将两者连在一起：首先请求天气数据，得到数据后使用flatMap操作符，取出数据中的天气类型进行第二次网络请求，最后在主线程中处理数据。第二块是搜索城市返回城市代码，一个简单的Retrofit + RxJava就可实现。

在https://www.sojson.com/blog/305.html中，有天气接口成功返回值的Json代码示例，去掉中间的注释，只要Json数据。因为使用的Gson，首先准备天气数据的Bean类。新建WeatherBean.java，将光标放到类的括号中，右键选择Generate，选择GsonFormat，把Json代码粘进去，ok，会在类中自动生成对应的代码，看一眼与数据是对应的。

写Retrofit中的service接口。新建WeatherService.java，类型为interface。添加getCall方法，GET请求，因为接口为http://t.weather.sojson.com/api/weather/city/+city_code。每次请求改变city_code即可，通过@Path注解实现。类型Observable< WeatherBean >，其中Observable是因为用了RxJava，WeatherBean就是前面生成的Bean类。

publicinterfaceWeatherService{

//每次请求city_code可变

@GET("{city_code}")

Observable getCall( @Path("city_code")String code);

}

在MainActivity中使用Retrofit，添加requestWeather(String cityId)方法。

@SuppressLint( "CheckResult")

privatevoidrequestWeather(String cityId){

bitmaps.clear;

Retrofit retrofit = newRetrofit.Builder

.baseUrl( "http://t.weather.sojson.com/api/weather/city/")

.addConverterFactory(GsonConverterFactory.create) //使用Gson

.addCallAdapterFactory(RxJava2CallAdapterFactory.create) //使用RxJava

.build;

finalWeatherService weatherService = retrofit.create(WeatherService.class);

//第一次网络请求，获取天气数据

weatherService.getCall(cityId)

.subscribeOn(Schedulers.io)

.flatMap((Function>) weatherBean -> {

...

for(WeatherBean.DataBean.ForecastBean forecastBean : weatherBean.getData.getForecast) {

...

//循环取出每一天的天气类型，添加url

String url = "https://cdn.heweather.com/cond_icon/"+ preferences.getString(forecastBean.getType, "未知"

//使用Glide通过天气类型进行第二次网络请求，获取类型对应天气图标bitmap

FutureTarget target = Glide.with(getApplicationContext)

.asBitmap

.load(url)

.submit;

finalBitmap bitmap = target.get;

dataArrayList.add( newMyCurveView.WeatherData(low, high, date, type, bitmap));

}

...

//将请求返回的天气数据继续传至主线程的Observer观察者

returnObservable.fromArray(weatherBean);

.observeOn(AndroidSchedulers.mainThread) //切换至主线程

.subscribe( newObserver {

@Override

publicvoidonSubscribe(Disposable d){

}

@SuppressLint( "SetTextI18n")

@Override

publicvoidonNext(WeatherBean weatherBean){

//在主线程中处理得到的数据

}

@Override

publicvoid(Throwable e){

}

@Override

publicvoidonComplete{

}

});

}

自定义View

布局中间展示未来15天天气，数据有日期、最高温度、最低温度、类型、类型图标，其中温度连成两条曲线，整体支持滑动。

我是这样设计的，温度曲线初始为两条直线，为这15天的平均值，然后开始变化，变到对应的值，从而形成曲线效果。

新建MyCurveView.java，继承自View。添加WeatherData内部类，添加对应的属性及get、set方法。

staticclassWeatherData{

privatefloatlowTemp;

privatefloathighTemp;

privateintdate;

privateString type;

privateBitmap typeBitmap;

WeatherData( floatlowTemp, floathighTemp, intdate, String type, Bitmap typeBitmap) {

this.lowTemp = lowTemp;

this.highTemp = highTemp;

this.date = date;

this.type = type;

this.typeBitmap = typeBitmap;

}

...

}

添加setProgress方法，在网络请求完毕后，调用该方法更新数据和UI。首先调用arrayList保存网络数据，然后在动画中不断更新视图。

publicvoidsetProgress(intaverageHigh, intaverageLow, finalintlow, inttop, ArrayList innerData){

arrayList(innerData, top, low, averageHigh, averageLow);

ValueAnimator animatorHigh = ValueAnimator.ofInt( 0, top);

animatorHigh.setDuration( 1000);

animatorHigh.setInterpolator( newAccelerateInterpolator);

animatorHigh.addUpdateListener(valueAnimator -> {

mHighPercent = ( int)valueAnimator.getAnimatedValue;

invalidate;

});

ValueAnimator animatorLow = ValueAnimator.ofInt( 0, low);

animatorLow.setDuration( 1000);

animatorLow.setInterpolator( newAccelerateInterpolator);

animatorLow.addUpdateListener(valueAnimator -> {

mLowPercent = ( int)valueAnimator.getAnimatedValue;

});

AnimatorSet set = newAnimatorSet;

//两个动画同时进行

set.playTogether(animatorHigh, animatorLow);

//监听动画

set.addListener( newAnimator.AnimatorListener {

@Override

publicvoidonAnimationStart(Animator animation){

//在做动画的时间内，通过该标志位禁止触摸动作

isAnimation = true;

}

@Override

publicvoidonAnimationEnd(Animator animation){

isAnimation = false;

}

@Override

publicvoidonAnimationCancel(Animator animation){

}

@Override

publicvoidonAnimationRepeat(Animator animation){

}

});

set.start;

}

arrayList方法，除了保存数据外，将温度做个转换，因为初始是从平均值开始变的，mHighPercent在1s的时间内从0变为15日最高温度值，mHighPercent * (innerData.get(i).getHighTemp - averageHigh) / (max - 0)可以做到在1s的时间内，将当日最高温度从平均值变为实际值，当日最低温度同理。

@SuppressWarnings( "PointlessArithmeticExpression")

privatevoidarrayList(ArrayList innerData, intmax, intmin, intaverageHigh, intaverageLow){

high = averageHigh;

low = averageLow;

dataArray.clear;

//保存网络数据

dataArray.addAll(innerData);

for( inti = 0; i < innerData.size; i++) {

//在1s的变化时间内，将值从平均值变为实际值

dataArray. get(i).setHighTemp((innerData. get(i).getHighTemp - averageHigh) / (max - 0));

//在1s的变化时间内，将值从平均值变为实际值

dataArray. get(i).setLowTemp((averageLow - innerData. get(i).getLowTemp) / (min - 0));

}

}

重写onMeasure。

@Override

protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec){

intwidthSize = MeasureSpec.getSize(widthMeasureSpec);

intheightSize = MeasureSpec.getSize(heightMeasureSpec);

measureWidth = widthSize;

measureHeight = heightSize;

//一个页面展示6天的温度信息，每一天为宽度为mTempWidth

mTempWidth = measureWidth / 6;

setMeasuredDimension(widthSize, heightSize);

}

重写onDraw。

@SuppressLint( "DrawAllocation")

@ Override

protectedvoidonDraw(Canvas canvas) {

super.onDraw(canvas);

//为请求到网络数据时，页面显示文字

if(dataArray.size <= 0

drawNoDataText(canvas);

} else{

floatstartX = mStartX + (mTempWidth / 2);

for( inti = 0; i < dataArray.size; i++) {

//绘制天气图标

RectF rectF = newRectF(startX - 30, 300, startX + 30, 360);

canvas.drawBitmap(dataArray. get(i).getTypeBitmap, null, rectF, mCurvePaint);

//绘制最高温度

floathighTextWidth = mTempTextPaint.measureText(( int)(high + mHighPercent * dataArray. get(i).getHighTemp) + "");

floathighTextStartX = startX - highTextWidth / 2;

drawTempText(canvas, ( int)(high + getHighTempByPercent(i)) + "", highTextStartX, ( 140- curve_ratio * getHighTempByPercent(i)));

//curve_ratio为可变值，用于调整显示效果。该值越大温度差效果越明显。

canvas.drawCircle(startX, ( 160- curve_ratio * getHighTempByPercent(i)), 5, circlePaint);

//第一段曲线

if(i == 0) {

highPath.moveTo(startX, ( 160- curve_ratio * getHighTempByPercent(i)));

highControlPt1X = startX + mTempWidth / 4;

highControlPt1Y = 160- curve_ratio * getHighTempByPercent(i);

highControlPt2X = startX + (mTempWidth / 4) * 3;

highControlPt2Y = (( 160- curve_ratio * getHighTempByPercent(i + 1))) - ((( 160- curve_ratio * getHighTempByPercent(i + 2))) - (( 160- curve_ratio * getHighTempByPercent(i)))) / 4;

//3阶贝塞尔曲线

highPath.cubicTo(

highControlPt1X, highControlPt1Y,

highControlPt2X, highControlPt2Y,

startX + mTempWidth, ( 160- curve_ratio * getHighTempByPercent(i + 1)));

canvas.drawPath(highPath, mCurvePaint);

//每次绘制后将画笔恢复

highPath.reset;

}

//中间曲线

if(i != 0&& i < dataArray.size - 2) {

highPath.moveTo(startX, ( 160- curve_ratio * getHighTempByPercent(i)));

highControlPt1X = startX + mTempWidth / 4;

highControlPt1Y = (( 160- curve_ratio * getHighTempByPercent(i))) + ((( 160- curve_ratio * getHighTempByPercent(i + 1))) - (( 160- curve_ratio * getHighTempByPercent(i - 1)))) / 4;

highControlPt2X = startX + (mTempWidth / 4) * 3;

highControlPt2Y = (( 160- curve_ratio * getHighTempByPercent(i + 1))) - ((( 160- curve_ratio * getHighTempByPercent(i + 2))) - (( 160- curve_ratio * getHighTempByPercent(i)))) / 4;

highPath.cubicTo(

highControlPt1X, highControlPt1Y,

highControlPt2X, highControlPt2Y,

startX + mTempWidth, ( 160- curve_ratio * getHighTempByPercent(i + 1)));

canvas.drawPath(highPath, mCurvePaint);

highPath.reset;

}

//最后一段曲线

if(i == dataArray.size - 2) {

highPath.moveTo(startX, ( 160- curve_ratio * getHighTempByPercent(i)));

highControlPt1X = startX + mTempWidth / 4;

highControlPt1Y = (( 160- curve_ratio * getHighTempByPercent(i))) + ((( 160- curve_ratio * getHighTempByPercent(i + 1))) - (( 160- curve_ratio * getHighTempByPercent(i - 1)))) / 4;

highControlPt2X = startX + (mTempWidth / 4) * 3;

highControlPt2Y = 160- curve_ratio * getHighTempByPercent(i + 1);

highPath.cubicTo(

highControlPt1X, highControlPt1Y,

highControlPt2X, highControlPt2Y,

startX + mTempWidth, ( 160- curve_ratio * getHighTempByPercent(i + 1)));

canvas.drawPath(highPath, mCurvePaint);

highPath.reset;

}

//绘制最低温度，与绘制最高温度类似

...

//绘制日期

floatdayTextWidth = mTextPaint.measureText(dataArray. get(i).getDate + "日");

floatdayStartX = startX - dayTextWidth / 2;

floatdayTextStartY = 40+ getFontAscentHeight(mTextPaint);

drawDayText(canvas, dataArray. get(i).getDate + "日", dayStartX, dayTextStartY);

//绘制天气

floattypeTextWidth = mTextPaint.measureText(dataArray. get(i).getType);

floattypeTextStartX = startX - typeTextWidth / 2;

floattypeTextStartY = measureHeight - 40- getFontDescentHeight(mTextPaint);

canvas.drawText(dataArray. get(i).getType, typeTextStartX, typeTextStartY, mTextPaint);

//每绘制完一天，往后移动mTempWidth距离，绘制下一天

startX = startX + mTempWidth;

}

}

}

其中的一些参数是可以根据需要更改的。

重写dispatchTouchEvent。当滑动到最左边也就是第一天的时候，应该禁止继续向右继续滑动。滑动到最右边同理。

@Override

publicbooleandispatchTouchEvent(MotionEvent ev){

intdispatchCurrX = ( int) ev.getX;

intdispatchCurrY = ( int) ev.getY;

switch(ev.getAction) {

...

caseMotionEvent.ACTION_MOVE:

floatdeltaX = dispatchCurrX - dispatchTouchX;

floatdeltaY = dispatchCurrY - dispatchTouchY;

//竖直滑动的父容器拦截事件

if(Math.abs(deltaY) - Math.abs(deltaX) > 0) {

getParent.requestDisallowInterceptTouchEvent( false);

}

//向右滑动，滑动到左边边界，父容器进行拦截

if((dispatchCurrX - dispatchTouchX) > 0&& mStartX == 0) {

getParent.requestDisallowInterceptTouchEvent( false);

} elseif((dispatchCurrX - dispatchTouchX) < 0&& mStartX == -getMoveLength) {

//向左滑动，滑动到右边边界，父容器进行拦截

getParent.requestDisallowInterceptTouchEvent( false);

}

break;

...

}

dispatchTouchX = dispatchCurrX;

dispatchTouchY = dispatchCurrY;

returnsuper.dispatchTouchEvent(ev);

}

重写onTouchEvent。

@SuppressLint( "ClickableViewAccessibility")

@Override

publicbooleanonTouchEvent(MotionEvent event){

//如果正在执行动画，直接返回

if(isAnimation) {

returntrue;

}

if(mVelocityTracker == null) {

mVelocityTracker = VelocityTracker.obtain;

}

mVelocityTracker.addMovement(event);

switch(event.getAction) {

caseMotionEvent.ACTION_DOWN:

lastX = event.getX;

//当点击的时候，判断如果是在fling的效果的时候，就停止快速滑动

if(isFling) {

removeCallbacks(mScrollRunnable);

isFling = false;

}

break;

caseMotionEvent.ACTION_MOVE:

floatcurrX = event.getX;

mStartX += currX - lastX;

//计算每次滑动后的mStartX

//向右滑动

if((currX - lastX) > 0) {

if(mStartX > 0) {

mStartX = 0;

}

} else{ //向左滑动

if(-mStartX > getMoveLength) {

mStartX = -getMoveLength;

}

}

lastX = currX;

break;

caseMotionEvent.ACTION_UP:

//1s内的滑动速度

mVelocityTracker.computeCurrentVelocity( 1000);

//计算快速滑动的速度，如果是大于某个值，并且数据的长度大于整个屏幕的长度，那么就允许有fling后逐渐停止的效果

if(Math.abs(mVelocityTracker.getXVelocity) > 100

&& !isFling && measureWidth < dataArray.size * mTempWidth) {

mScrollRunnable = newScrollRunnable(mVelocityTracker.getXVelocity / 5);

this.post(mScrollRunnable);

}

break;

caseMotionEvent.ACTION_CANCEL:

break;

}

returntrue;

}

以上为部分主要代码，自定义View就算是完成了。

城市搜索

使用单独一个Activity，使用了DataBinding来做搜索编辑框的绑定，RecyclerView用来展示返回的城市列表，选择其中的某一城市后，通过EventBus将城市信息通知MainActivity。新建CityActivity，添加CityViewHolder类，并在其中添加afterTextChanged(Editable s)方法,在onCreate中完成代码和视图的绑定。

publicclassCityActivityextendsAppCompatActivity{

...

@Override

protectedvoidonCreate(@Nullable Bundle savedInstanceState){

super.onCreate(savedInstanceState);

//绑定代码和视图

ActivityCityBinding activityCityBinding = DataBindingUtil.setContentView( this, R.layout.activity_city);

activityCityBinding.setCityViewHolder( newCityViewHolder);

...

}

...

publicclassCityViewHolder{

publicvoidafterTextChanged(Editable s){

}

}

}

修改对应的activity_city.xml

name="cityPresenter"

type="com.sk.simpleweather.CityActivity.CityViewHolder"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="20dp"

android:layout_marginStart="30dp"

android:layout_marginEnd="30dp"

android:orientation="vertical">

android:id="@+id/search_edittext"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="5dp"

android:background="@drawable/et_bgd"

android:focusable="true"

android:textSize="16sp"

android:maxLines="1"

android:singleLine="true"

android:hint="输入城市"

android:textColorHint="#40000000"

android:afterTextChanged="@{cityPresenter.afterTextChanged}"/>

...

这样，每次修改EditText都会走afterTextChanged。

接下完成搜索城市的请求。新建CityBean.java，和上面一样，通过GsonFormat自动生成代码，Json数据可以在和风天气的接口文档的数据返回示例中看到。接下来新建CityService.java，添加getCall方法。查看和风天气的接口文档，location和key是必选的，通过@Query注解添加请求URL中的这两个参数。返回类型中的泛型为刚刚完成的CityBean类。

publicinterfaceCityService{

@GET("find")

Observable getCall( @Query("location")String location,

@Query("key")String key);

}

实现afterTextChanged，和上面天气数据请求基本一致。

publicvoidafterTextChanged(Editable s){

...

//如果输入为空，直接返回

if(s.toString.equals( "")) {

return;

}

Retrofit retrofit = newRetrofit.Builder

.baseUrl( "https://search.heweather.net/")

.addConverterFactory(GsonConverterFactory.create) //使用Gson

.addCallAdapterFactory(RxJava2CallAdapterFactory.create) //使用RxJava

.build;

CityService cityService = retrofit.create(CityService.class);

cityService.getCall(s.toString, KEY)

.subscribeOn(Schedulers.io)

.observeOn(AndroidSchedulers.mainThread)

.subscribe( newObserver {

@Override

publicvoidonSubscribe(Disposable d){

}

@Override

publicvoidonNext(CityBean cityBean){

//对获取到的数据进行处理

}

@Override

publicvoid(Throwable e){

}

@Override

publicvoidonComplete{

...

}

});

}

新建CitysAdapter.java，继承自RecyclerView.Adapter，作为RecyclerView的Adapter。

publicclassCitysAdapterextendsRecyclerView.Adapter{

privateArrayList citys;

privateContext mContext;

privateOnItemClick mOnItemClick;

CitysAdapter(ArrayList citys, Context parentContext) {

this.citys = citys;

mContext = parentContext;

}

voidsetOnItemClick(OnItemClick onItemClick){

mOnItemClick = onItemClick;

}

interfaceOnItemClick{

//回调函数，在CityActivity中实现该方法。

voidonClick(String city, intposition);

}

staticclassViewHolderextendsRecyclerView.ViewHolder{

privateLinearLayout layout;

privateTextView textView;

ViewHolder( @NonNullView itemView) {

super(itemView);

layout = itemView.findViewById(R.id.city_layout);

textView = itemView.findViewById(R.id.city);

}

}

@NonNull

@Override

publicViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, inti){

if(mContext == null) {

mContext = viewGroup.getContext;

}

View view = LayoutInflater.from(mContext).inflate(R.layout.city_item, viewGroup, false);

returnnewViewHolder(view);

}

@Override

publicvoidonBindViewHolder(@NonNull ViewHolder viewHolder, intposition){

viewHolder.textView.setText(citys.get(position));

viewHolder.layout.setOnClickListener(v -> mOnItemClick.onClick(citys.get(position), position));

}

@Override

publicintgetItemCount{

returncitys.size;

}

}

添加CityMessageEvent.java，供EventBus使用。

publicclassCityMessageEvent{

privateString name;

privateString cityId;

//name和cityId的set、get方法

...

}

在CityActivity中实现上面的onClick方法。

privateCityMessageEvent messageEvent;

@ Override

publicvoidonClick(String city, intposition) {

if(mCityBean != null) {

messageEvent.setName(city);

messageEvent.setCityId(mCityBean.getHeWeather6. get( 0).getBasic. get(position).getCid.replace( "CN", ""));

//通过EventBus发射event

EventBus.getDefault.postSticky(messageEvent);

}

finish;

}

修改MainActivity，添加onMessageEvent方法，用来接收EventBus发出的event。接收到数据后，再次请求网络数据。

@Subscribe(threadMode = ThreadMode.MAIN, sticky = true)

publicvoidonMessageEvent(CityMessageEvent messageEvent){

requestWeather(messageEvent.getCityId);

}

最后附上源码地址，有什么疑问及意见欢迎大家指出，后续有时间会对代码进行改进。要运行的话，麻烦在和风天气官网注册一下，自己新建一个工程，使用自己的Key，谢谢~~

项目地址：GitHub

版权声明：本文为CSDN博主「Kai_0825」的原创文章。

原文链接：https://blog.csdn.net/songkai0825/article/details/95257837 返回搜狐，查看更多

责任编辑：