前言
本打算是写一个贝塞尔曲线的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就可实现。
写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类。
public interface WeatherService { //每次请求city_code可变 @GET("{city_code}") Observable<WeatherBean> getCall(@Path("city_code") String code); } 在MainActivity中使用Retrofit,添加requestWeather(String cityId)方法。 @SuppressLint("CheckResult") private void requestWeather(String cityId) { bitmaps.clear(); Retrofit retrofit = new Retrofit.Builder() .baseUrl("http://t.weather.sojson.com/api/weather/city/") .addConverterFactory(GsonConverterFactory.create())//使用Gson .addCallAdapterFactory(RxJava2CallAdapterFactory.create())//使用RxJava .build(); final WeatherService weatherService = retrofit.create(WeatherService.class); //第一次网络请求,获取天气数据 weatherService.getCall(cityId) .subscribeOn(Schedulers.io()) .flatMap((Function<WeatherBean, Observable<WeatherBean>>) 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<Bitmap> target = Glide.with(getApplicationContext()) .asBitmap() .load(url) .submit(); final Bitmap bitmap = target.get(); dataArrayList.add(new MyCurveView.WeatherData(low, high, date, type, bitmap)); } ... //将请求返回的天气数据继续传至主线程的Observer观察者 return Observable.fromArray(weatherBean); }) .observeOn(AndroidSchedulers.mainThread())//切换至主线程 .subscribe(new Observer<WeatherBean>() { @Override public void onSubscribe(Disposable d) { } @SuppressLint("SetTextI18n") @Override public void onNext(WeatherBean weatherBean) { //在主线程中处理得到的数据 } @Override public void onError(Throwable e) { } @Override public void onComplete() { } }); }
自定义View
布局中间展示未来15天天气,数据有日期、最高温度、最低温度、类型、类型图标,其中温度连成两条曲线,整体支持滑动。
我是这样设计的,温度曲线初始为两条直线,为这15天的平均值,然后开始变化,变到对应的值,从而形成曲线效果。
新建MyCurveView.java,继承自View。添加WeatherData内部类,添加对应的属性及get、set方法。
static class WeatherData { private float lowTemp; private float highTemp; private int date; private String type; private Bitmap typeBitmap; WeatherData(float lowTemp, float highTemp, int date, String type, Bitmap typeBitmap) { this.lowTemp = lowTemp; this.highTemp = highTemp; this.date = date; this.type = type; this.typeBitmap = typeBitmap; } ... }
添加setProgress()方法,在网络请求完毕后,调用该方法更新数据和UI。首先调用arrayList保存网络数据,然后在动画中不断更新视图。
public void setProgress(int averageHigh, int averageLow, final int low, int top, ArrayList<WeatherData> innerData) { arrayList(innerData, top, low, averageHigh, averageLow); ValueAnimator animatorHigh = ValueAnimator.ofInt(0, top); animatorHigh.setDuration(1000); animatorHigh.setInterpolator(new AccelerateInterpolator()); animatorHigh.addUpdateListener(valueAnimator -> { mHighPercent = (int)valueAnimator.getAnimatedValue(); invalidate(); }); ValueAnimator animatorLow = ValueAnimator.ofInt(0, low); animatorLow.setDuration(1000); animatorLow.setInterpolator(new AccelerateInterpolator()); animatorLow.addUpdateListener(valueAnimator -> { mLowPercent = (int)valueAnimator.getAnimatedValue(); }); AnimatorSet set = new AnimatorSet(); //两个动画同时进行 set.playTogether(animatorHigh, animatorLow); //监听动画 set.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { //在做动画的时间内,通过该标志位禁止触摸动作 isAnimation = true; } @Override public void onAnimationEnd(Animator animation) { isAnimation = false; } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); set.start(); }
arrayList()方法,除了保存数据外,将温度做个转换,因为初始是从平均值开始变的,mHighPercent在1s的时间内从0变为15日最高温度值,mHighPercent * (innerData.get(i).getHighTemp() – averageHigh) / (max – 0)可以做到在1s的时间内,将当日最高温度从平均值变为实际值,当日最低温度同理。
@SuppressWarnings("PointlessArithmeticExpression") private void arrayList(ArrayList<WeatherData> innerData, int max, int min, int averageHigh, int averageLow) { high = averageHigh; low = averageLow; dataArray.clear(); //保存网络数据 dataArray.addAll(innerData); for (int i = 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 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); measureWidth = widthSize; measureHeight = heightSize; //一个页面展示6天的温度信息,每一天为宽度为mTempWidth mTempWidth = measureWidth / 6; setMeasuredDimension(widthSize, heightSize); }
重写onDraw()。
@SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //为请求到网络数据时,页面显示文字 if (dataArray.size() <= 0) { drawNoDataText(canvas); } else { float startX = mStartX + (mTempWidth / 2); for (int i = 0; i < dataArray.size(); i++) { //绘制天气图标 RectF rectF = new RectF(startX - 30, 300, startX + 30, 360); canvas.drawBitmap(dataArray.get(i).getTypeBitmap(), null, rectF, mCurvePaint); //绘制最高温度 float highTextWidth = mTempTextPaint.measureText((int)(high + mHighPercent * dataArray.get(i).getHighTemp()) + ""); float highTextStartX = 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(); } //绘制最低温度,与绘制最高温度类似 ... //绘制日期 float dayTextWidth = mTextPaint.measureText(dataArray.get(i).getDate() + "日"); float dayStartX = startX - dayTextWidth / 2; float dayTextStartY = 40 + getFontAscentHeight(mTextPaint); drawDayText(canvas, dataArray.get(i).getDate() + "日", dayStartX, dayTextStartY); //绘制天气 float typeTextWidth = mTextPaint.measureText(dataArray.get(i).getType()); float typeTextStartX = startX - typeTextWidth / 2; float typeTextStartY = measureHeight - 40 - getFontDescentHeight(mTextPaint); canvas.drawText(dataArray.get(i).getType(), typeTextStartX, typeTextStartY, mTextPaint); //每绘制完一天,往后移动mTempWidth距离,绘制下一天 startX = startX + mTempWidth; } } }
其中的一些参数是可以根据需要更改的。
重写dispatchTouchEvent()。当滑动到最左边也就是第一天的时候,应该禁止继续向右继续滑动。滑动到最右边同理。
@Override public boolean dispatchTouchEvent(MotionEvent ev) { int dispatchCurrX = (int) ev.getX(); int dispatchCurrY = (int) ev.getY(); switch (ev.getAction()) { ... case MotionEvent.ACTION_MOVE: float deltaX = dispatchCurrX - dispatchTouchX; float deltaY = dispatchCurrY - dispatchTouchY; //竖直滑动的父容器拦截事件 if (Math.abs(deltaY) - Math.abs(deltaX) > 0) { getParent().requestDisallowInterceptTouchEvent(false); } //向右滑动,滑动到左边边界,父容器进行拦截 if ((dispatchCurrX - dispatchTouchX) > 0 && mStartX == 0) { getParent().requestDisallowInterceptTouchEvent(false); } else if ((dispatchCurrX - dispatchTouchX) < 0 && mStartX == -getMoveLength()) { //向左滑动,滑动到右边边界,父容器进行拦截 getParent().requestDisallowInterceptTouchEvent(false); } break; ... } dispatchTouchX = dispatchCurrX; dispatchTouchY = dispatchCurrY; return super.dispatchTouchEvent(ev); }
重写onTouchEvent()。
@SuppressLint("ClickableViewAccessibility") @Override public boolean onTouchEvent(MotionEvent event) { //如果正在执行动画,直接返回 if (isAnimation) { return true; } if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: lastX = event.getX(); //当点击的时候,判断如果是在fling的效果的时候,就停止快速滑动 if (isFling) { removeCallbacks(mScrollRunnable); isFling = false; } break; case MotionEvent.ACTION_MOVE: float currX = event.getX(); mStartX += currX - lastX; //计算每次滑动后的mStartX //向右滑动 if ((currX - lastX) > 0) { if (mStartX > 0) { mStartX = 0; } } else {//向左滑动 if (-mStartX > getMoveLength()) { mStartX = -getMoveLength(); } } lastX = currX; break; case MotionEvent.ACTION_UP: //1s内的滑动速度 mVelocityTracker.computeCurrentVelocity(1000); //计算快速滑动的速度,如果是大于某个值,并且数据的长度大于整个屏幕的长度,那么就允许有fling后逐渐停止的效果 if (Math.abs(mVelocityTracker.getXVelocity()) > 100 && !isFling && measureWidth < dataArray.size() * mTempWidth) { mScrollRunnable = new ScrollRunnable(mVelocityTracker.getXVelocity() / 5); this.post(mScrollRunnable); } break; case MotionEvent.ACTION_CANCEL: break; } return true; } private class ScrollRunnable implements Runnable { private float speed; ScrollRunnable(float speed) { this.speed = speed; } @Override public void run() { if (Math.abs(speed) < 60) { isFling = false; return; } isFling = true; mStartX += speed / 15; //速度有一个渐慢的效果 speed = speed / 1.1f; //向右滑动 if ((speed) > 0) { if (mStartX > 0) { mStartX = 0; } } else { //向右滑动 if (-mStartX > getMoveLength()) { mStartX = -getMoveLength(); } } postDelayed(this, 5); invalidate(); } }
以上为部分主要代码,自定义View就算是完成了。
城市搜索
使用单独一个Activity,使用了DataBinding来做搜索编辑框的绑定,RecyclerView用来展示返回的城市列表,选择其中的某一城市后,通过EventBus将城市信息通知MainActivity。新建CityActivity,添加CityViewHolder类,并在其中添加afterTextChanged(Editable s)方法,在onCreate中完成代码和视图的绑定。
public class CityActivity extends AppCompatActivity { ... @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); //绑定代码和视图 ActivityCityBinding activityCityBinding = DataBindingUtil.setContentView(this, R.layout.activity_city); activityCityBinding.setCityViewHolder(new CityViewHolder()); ... } ... public class CityViewHolder { public void afterTextChanged(Editable s) { } } }
修改对应的activity_city.xml
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="cityPresenter" type="com.sk.simpleweather.CityActivity.CityViewHolder" /> </data> <LinearLayout 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"> <EditText 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}"/> ... </LinearLayout> </layout>
这样,每次修改EditText都会走afterTextChanged()。
接下完成搜索城市的请求。新建CityBean.java,和上面一样,通过GsonFormat自动生成代码,Json数据可以在和风天气的接口文档的数据返回示例中看到。接下来新建CityService.java,添加getCall方法。查看和风天气的接口文档,location和key是必选的,通过@Query注解添加请求URL中的这两个参数。返回类型中的泛型为刚刚完成的CityBean类。
public interface CityService { @GET("find") Observable<CityBean> getCall(@Query("location") String location, @Query("key") String key); }
实现afterTextChanged(),和上面天气数据请求基本一致。
public void afterTextChanged(Editable s) { ... //如果输入为空,直接返回 if (s.toString().equals("")) { return; } Retrofit retrofit = new Retrofit.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(new Observer<CityBean>() { @Override public void onSubscribe(Disposable d) { } @Override public void onNext(CityBean cityBean) { //对获取到的数据进行处理 } @Override public void onError(Throwable e) { } @Override public void onComplete() { ... } }); }
新建CitysAdapter.java,继承自RecyclerView.Adapter,作为RecyclerView的Adapter。
public class CitysAdapter extends RecyclerView.Adapter<CitysAdapter.ViewHolder>{ private ArrayList<String> citys; private Context mContext; private OnItemClick mOnItemClick; CitysAdapter(ArrayList<String> citys, Context parentContext) { this.citys = citys; mContext = parentContext; } void setOnItemClick(OnItemClick onItemClick) { mOnItemClick = onItemClick; } interface OnItemClick { //回调函数,在CityActivity中实现该方法。 void onClick(String city, int position); } static class ViewHolder extends RecyclerView.ViewHolder { private LinearLayout layout; private TextView textView; ViewHolder(@NonNull View itemView) { super(itemView); layout = itemView.findViewById(R.id.city_layout); textView = itemView.findViewById(R.id.city); } } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { if (mContext == null) { mContext = viewGroup.getContext(); } View view = LayoutInflater.from(mContext).inflate(R.layout.city_item, viewGroup, false); return new ViewHolder(view); } @Override public void onBindViewHolder(@NonNull ViewHolder viewHolder, int position) { viewHolder.textView.setText(citys.get(position)); viewHolder.layout.setOnClickListener(v -> mOnItemClick.onClick(citys.get(position), position)); } @Override public int getItemCount() { return citys.size(); } }
添加CityMessageEvent.java,供EventBus使用。
public class CityMessageEvent { private String name; private String cityId; //name和cityId的set、get方法 ... }
在CityActivity中实现上面的onClick()方法。
private CityMessageEvent messageEvent; @Override public void onClick(String city, int position) { 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) public void onMessageEvent(CityMessageEvent messageEvent) { requestWeather(messageEvent.getCityId()); }
最后附上源码地址,有什么疑问及意见欢迎大家指出,后续有时间会对代码进行改进。要运行的话,麻烦在和风天气官网注册一下,自己新建一个工程,使用自己的Key,谢谢~~
项目地址:GitHub
转载请注明:Android开发中文站 » Android简易天气App