使用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.查看源码

一起进步吧，少年~
点击这里查看源码