使用Retrofit+Rxjava+MPAndroid来显示气温曲线图
这里是抓包抓来API接口：http://aider.meizu.com/app/weather/listWeather?cityIds=101020600
先看一下最终的结果：
好吧，下面就正式开始项目吧~
1.导入第三方库
//okhttp
compile 'com.squareup.okhttp3:okhttp:3.6.0'
compile 'com.squareup.okio:okio:1.11.0'
compile
//butterknife
compile 'com.jakewharton:butterknife:8.5.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'
//Rxjava
compile 'io.reactivex:rxjava:1.1.3'
compile 'io.reactivex:rxandroid:1.1.0'
//Retrofit
compile 'com.squareup.retrofit2:retrofit:2.0.2'
compile 'com.squareup.retrofit2:converter-gson:2.0.2'
compile 'com.squareup.retrofit2:converter-scalars:2.0.2'
compile 'com.squareup.retrofit2:adapter-rxjava:2.0.2'
//gson
compile files('libs/gson-2.6.2.jar')
//MPAndroid
compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
2.初始化设置
-
布局文件
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/andro id" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin " android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.skkk.okhttp3stydy.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:text="Demo" android:gravity="center" android:ems="10" android:id="@+id/editText" /> <Button android:text="下载图片" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/button2" /> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lc_weather_future" android:layout_width="match_parent" android:layout_height="300dp" ></com.github.mikephil.charting.charts.LineChar t> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lc_weather_detail" </LinearLayout> </android.support.v4.widget.NestedScrollView>
很简单，一个标题，一个按钮，一个折线图
-
然后我们设置一个Gson的接收类
...（此处省略）
-
Retrofit的接口文件
public interface WeatherInterface { //http://aider.meizu.com/app/weather/listWeather?cityId s=101010100 @GET("app/weather/listWeather") Observable<WeatherGson> getWeather(@Query("cityIds")String cityIds); } -
初始化网络请求
String baseUrl = "http://aider.meizu.com/"; retrofit = new Retrofit.Builder() .addConverterFactory(GsonConverterFactory.creat e()) .addCallAdapterFactory(RxJavaCallAdapterFactory .create()) .baseUrl(baseUrl) .build(); WeatherInterfaceweatherInterface=retrofit.create(WeatherInt erface.lass)
3.逻辑编写
-
获取被监听者
Observable<WeatherGson> weatherRequest =weatherInterface.getWeather("101020600"); -
网络请求
weatherRequest.subscribeOn(Schedulers.newThread()) -
数据处理（将获取到的Gson数据转化为MPAndroid需求的数据）
这个demo中我们仅仅需要数据中的未来六天日夜间气温变化数据就
1.获取目标数据
//获取未来天气 WeatherDetailsInfo weatherDetailsInfo = weatherGson.getValue().get(0).getWeatherDetailsInfo(); List<Weather> weathers =weatherGson.getValue().get(0).getWeathers();2.转化为MPAndroid需求值List<Entry>
List<Entry> entryListD = new ArrayList<Entry>(); List<Entry> entryListN = new ArrayList<Entry>(); for (int i = 0; i < weathers.size(); i++) { //将天气对象转化为图标中的数据元 entryListD.add(new Entry(i, Float.valueOf(weathers.get(i).getTempDayC()))); entryListN.add(new Entry(i, Float.valueOf(weathers.get(i).getTempNightC()))); //将星期几添加到数组中 days[i] = weathers.get(i).getWeek(); }3.这里还需要设置一下chart中的横轴坐标格式器
//设置X轴的格式 xFormatter = new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return days[(int) value]; } };4.设置折线图数据并返回
List<LineDataSet> lineDataSetList = new ArrayList<LineDataSet>(); lineDataSetList.add(new LineDataSet(entryListD, getString(R.string.future_weather_day))); lineDataSetList.add(new LineDataSet(entryListN, getString //返回直线图数据对象 return lineDataSetList;
4.监听者主线程更新UI
-
接收数据
Observable<WeatherGson> weatherRequest = weatherInterface.getWeather("101020600"); weatherRequest.subscribeOn(Schedulers.newThread()) .subscribeOn(Schedulers.io()) .map(new Func1<WeatherGson, List<LineDataSet>>() { @Override public List<LineDataSet> call(WeatherGson weatherGson) { ... //返回直线图数据对象 return lineDataSetList; } }) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Subscriber<List<LineDataSet>>() { @Override public void onCompleted() { Toast.makeText(MainActivity.this, "完成网络！", Toast.LENGTH_SHORT).show(); } @Override public void onError(Throwable e) { Toast.makeText(MainActivity.this, "网络错误！", Toast.LENGTH_SHORT).show(); } @Override public void onNext(List<LineDataSet> lineDataSetList) { //显示图表 showChart(lineDataSetList); } }); -
更新chart
private void showChart(List<LineDataSet> dataSetList) { //设置日间温度曲线 dataSetList.get(0).setMode(LineDataSet.Mode.HORIZONTAL_BEZIER); dataSetList.get(0).setColor(ContextCompat.getColor(this,R.color.colorAccent)); dataSetList.get(0).setDrawCircleHole(false); dataSetList.get(0).setDrawCircles(false); //设置晚间温度曲线 dataSetList.get(1).setMode(LineDataSet.Mode.HORIZONTAL_BEZIER); dataSetList.get(1).setColor(ContextCompat.getColor(this,R.color.colorPrimaryDark)); dataSetList.get(1).setDrawCircleHole(false); dataSetList.get(1).setDrawCircles(false); //设置数据 LineData dayLineData = new LineData(); LineData infoLineData = new LineData(); for (int i = 0; i < dataSetList.size(); i++) { dayLineData.addDataSet(dataSetList.get(i)); } dayLineData.setValueFormatter(vFormatter); dayLineData.setValueTextSize(8f); dayLineData.setValueTextColor(Color.BLACK); //设置X轴 XAxis dayXAxis = mDayLineChart.getXAxis(); dayXAxis.setDrawGridLines(false); dayXAxis.setPosition(XAxis.XAxisPosition.BOTTOM); dayXAxis.setValueFormatter(xFormatter); //设置Y轴right YAxis axisRight = mDayLineChart.getAxisRight(); axisRight.setDrawAxisLine(false); axisRight.setDrawGridLines(false); axisRight.setDrawLabels(false); //设置Y轴left YAxis axisLeft = mDayLineChart.getAxisLeft(); axisLeft.setDrawAxisLine(false); axisLeft.setDrawGridLines(false); axisLeft.setDrawLabels(false); //设置chart Description description = new Description(); description.setText("气温预测图"); description.setTextSize(15f); description.setTextColor(getResources().getColor(R.color.colorPrimaryDark)); mDayLineChart.setDescription(description); mDayLineChart.setData(dayLineData); mDayLineChart.setMarker(mIMarker); mDayLineChart.invalidate();
5.查看源码
一起进步吧，少年~
点击这里查看源码
