基于ViewPager与TabLayout建立三类图表

  延续昨天，今天使用ViewPager和TabLayout来实战一下，顺便补充一下新知识：

  1.线形图，显示一周的温度情况。

  2.饼状图，2017年互联网教育细分领域投资情况。

  3.柱状图，2013-2017年互联网教育市场的规模。

1.准备

  和昨天一样，导入两个库

implementation 'com.android.support:design:27.1.1'

implementation 'com.github.lecho:hellocharts-library:1.5.8'

  然后把标题栏去掉

2.设计布局

(1).主布局

  主布局没有变化，可以参考我上一篇文章

(2).三个分布局

1.layout_line_chart

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/First"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="8dp"
    android:text="一周的温度情况，具体如下图所示。"
    android:textColor="@android:color/darker_gray"
    android:textSize="14sp"/>
<lecho.lib.hellocharts.view.LineChartView
    android:id="@+id/lv"
    app:layout_constraintTop_toBottomOf="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="480dp" />
</android.support.constraint.ConstraintLayout>

2.layout_pie_chart

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/Second"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:id="@+id/text2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="8dp"
    android:text="2017年互联网教育细分领域投资情况，具体如下图所示。"
    android:textColor="@android:color/darker_gray"
    android:textSize="14sp"/>
<lecho.lib.hellocharts.view.PieChartView
    android:id="@+id/pv"
    app:layout_constraintTop_toBottomOf="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>

3.layout_column_chart

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/Third"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/text3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="8dp"
    android:text=" 现阶段，我国互联网教育市场增长率位居全行业第三，2015 年市场规模达1610 亿元，
    预计到2017 年，将突破2800 亿元。2013-2017年互联网教育市场规模，具体如下图所示。"
    android:textColor="@android:color/darker_gray"
    android:textSize="14sp" />
<lecho.lib.hellocharts.view.ColumnChartView
    android:id="@+id/cv"
    app:layout_constraintTop_toBottomOf="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp" />
</android.support.constraint.ConstraintLayout>

  这三个布局与昨天相差无几，就是多了一个图表的控件，自己悟一下

3.界面逻辑

(1).配置适配器

  这部分代码和昨天一摸一样，可以参考一下昨天的代码

(2).主页逻辑

package com.project.software.myapplication;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.listener.PieChartOnValueSelectListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PieChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.SliceValue;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.ColumnChartView;
import lecho.lib.hellocharts.view.LineChartView;
import lecho.lib.hellocharts.view.PieChartView;

public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private LayoutInflater mInflater;
private View view1;
private View view2;
private View view3;
private List<String> mTitleList = new ArrayList<>(); //页卡标题集合
private List<View> mViewList = new ArrayList<>();   //页卡视图集合

/*第一部分*/
//线形图
private int[] temperature = {25, 27, 26, 25, 26, 27, 24};  //图表的数据点
private String[] lineData = {"周一", "周二", "周三", "周四", "周五", "周六", "周日"};  //X轴的标注
private List<PointValue> pointValues = new ArrayList<PointValue>();
private List<AxisValue> axisValues = new ArrayList<AxisValue>();
private LineChartView lineChartView;

/*第二部分*/
//饼状图
private PieChartView pieChartView;
private PieChartData pieCharData;
private List<SliceValue> sliceValues = new ArrayList<SliceValue>();
private int[] pieData = {8, 24, 35, 23, 10};  //饼状图中的数据（比例）
private int[] color = {
        Color.parseColor("#356fb3")
        , Color.parseColor("#b53633")
        , Color.parseColor("#86aa3d")
        , Color.parseColor("#6a4b90")
        , Color.parseColor("#2e9cba")};  //饼状图每块的颜色
private String[] stateChar = {"高等教育", "职业教育", "语言培训", "K12教育", "其他"};  //每块的名字

/*第三部分*/
//柱状图
private String[] year = new String[]{"2013", "2014", "2015", "2016", "2017"}; //横坐标
private ColumnChartView columnChartView;
private ColumnChartData columnData;
private int[] columnY = {500, 1000, 1500, 2000, 2500, 3000};  //纵坐标

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
}

/**
 * 初始化
 */
private void init() {
    mViewPager = (ViewPager) findViewById(R.id.view);
    mTabLayout = (TabLayout) findViewById(R.id.tabs);
    mInflater = LayoutInflater.from(this);
    view1 = mInflater.inflate(R.layout.layout_line_chart, null);
    view2 = mInflater.inflate(R.layout.layout_pie_chart, null);
    view3 = mInflater.inflate(R.layout.layout_column_chart, null);
    //添加页卡视图
    mViewList.add(view1);
    mViewList.add(view2);
    mViewList.add(view3);
    //添加页卡标题
    mTitleList.add("线形图");
    mTitleList.add("饼状图");
    mTitleList.add("柱状图");
    mTabLayout.setTabMode(TabLayout.MODE_FIXED);   //设置tab模式，当前为系统默认模式
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));   //添加选项卡
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2)));
    ViewPagerAdapter mAdapter = new ViewPagerAdapter(mViewList, mTitleList);
    mViewPager.setAdapter(mAdapter);                 //给ViewPager设置适配器
    mTabLayout.setupWithViewPager(mViewPager);       //将TabLayout和ViewPager关联起来。
    mTabLayout.setTabsFromPagerAdapter(mAdapter);    //给Tabs设置适配器

    /**
     * 第一部分
     */
    //线形图
    lineChartView = (LineChartView) view1.findViewById(R.id.lv);
    setAxisXLables(); //获取x轴的标注
    setAxisPoints();  //设置坐标点
    initLineChart();  //初始化线形图

    /**
     * 第二部分
     */
    //饼状图
    pieChartView = (PieChartView) view2.findViewById(R.id.pv);
    pieChartView.setOnValueTouchListener(selectListener);//为饼状图设置事件监听器
    setPieChartData();
    initPieChart();

    /**
     * 第三部分
     */
    //柱状图
    columnChartView = (ColumnChartView) view3.findViewById(R.id.cv);
    initColumnChart();
}

/**
 * 针对线形图
 */
//设置X轴的标注
private void setAxisXLables() {
    for (int i = 0; i < lineData.length; i++) {
        axisValues.add(new AxisValue(i).setLabel(lineData[i]));
    }
}
//设置线形图中的每个数据点
private void setAxisPoints() {
    for (int i = 0; i < temperature.length; i++) {
        pointValues.add(new PointValue(i, temperature[i]));
    }
}
//初始化线形图
private void initLineChart() {
    //设置线的颜色、形状等属性
    Line line = new Line();
    line.setColor(Color.parseColor("#33b5e5"));
    line.setShape(ValueShape.CIRCLE);  //线形图上数据点的形状为圆形
    line.setCubic(false);             //曲线是否平滑，即是曲线还是折线
    line.setHasLabels(true);         //曲线的数据坐标是否加上备注
    line.setHasLines(true);         //是否显示线条，如果为false 则没有曲线只显示点
    line.setHasPoints(true);       //是否显示圆点，如果为false 则没有圆点只显示线
    line.setValues(pointValues);
    List<Line> lines = new ArrayList<Line>();
    lines.add(line);
    LineChartData data = new LineChartData();
    data.setLines(lines);
    //X轴
    Axis axisX = new Axis();
    axisX.setHasTiltedLabels(true);    //X轴字体是斜的显示还是直的，true是倾斜显示
    axisX.setTextColor(Color.BLACK);  //设置字体颜色
    axisX.setMaxLabelChars(5);        //设置坐标轴标签显示的最大字符数
    axisX.setValues(axisValues);     //填充X轴的坐标名称
    data.setAxisXBottom(axisX);      //设置x轴在底部
    axisX.setHasLines(true);         //x 轴分割线
    //Y轴
    Axis axisY = new Axis();
    data.setAxisYLeft(axisY);          //设置Y轴在左侧
    axisY.setTextColor(Color.BLACK); //设置字体颜色
    axisY.setMaxLabelChars(5);       //设置坐标轴标签显示的最大字符数
    //设置线形图的行为属性，如支持缩放、滑动以及平移
    lineChartView.setInteractive(true);
    lineChartView.setZoomType(ZoomType.HORIZONTAL); //设置缩放类型为水平缩放
    lineChartView.setMaxZoom((float) 2);            //最大放大比例
    lineChartView.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
    lineChartView.setLineChartData(data);
    lineChartView.setVisibility(View.VISIBLE);
}

/**
 * 针对饼状图
 */
//设置饼状图中的数据
private void setPieChartData() {
    for (int i = 0; i < pieData.length; ++i) {
        SliceValue sliceValue = new SliceValue((float) pieData[i], color[i]);
        sliceValues.add(sliceValue);//添加到集合中
    }
}
//初始化饼状图
private void initPieChart() {
    pieCharData = new PieChartData();
    pieCharData.setHasLabels(true);                     //显示标签
    pieCharData.setHasLabelsOnlyForSelected(false);     //不用点击显示占的百分比
    pieCharData.setHasLabelsOutside(false);             //数据是否显示在饼图外侧
    pieCharData.setValues(sliceValues);                 //填充数据
    pieCharData.setCenterCircleColor(Color.WHITE);      //设置环形中间的颜色
    pieCharData.setHasCenterCircle(true);               //是否显示中心圆
    pieCharData.setCenterCircleScale(0.5f);             //设置中心圆所占饼图的比例
    pieCharData.setCenterText1("数据");                 //设置中心圆默认显示的文字
    pieChartView.setPieChartData(pieCharData);          //为饼图设置数据
    pieChartView.setValueSelectionEnabled(true);        //选择饼状图中的块会变大
    pieChartView.setAlpha(0.9f);                        //设置透明度
    pieChartView.setCircleFillRatio(1f);                //设置饼图大小,占整个View的比例
}
//数据所占的百分比
private String calPercent(int i) {
    String result = "";
    int sum = 0;
    for (int j = 0; j < pieData.length; j++) {
        sum += pieData[j];
    }
    result = String.format("%.2f", (float) pieData[i] * 100 / sum) + "%";
    return result;
}
//饼状图的事件监听器
PieChartOnValueSelectListener selectListener = new PieChartOnValueSelectListener() {
    @Override
    public void onValueDeselected() {
    }
    @Override
    public void onValueSelected(int arg0, SliceValue value) {
        //选择对应图形后，在中间部分显示相应信息
        pieCharData.setCenterText1(stateChar[arg0]);   //中心圆中的第一文本
        pieCharData.setCenterText2(value.getValue() + "（" + calPercent(arg0) + ")");
    }
};

/**
 * 针对柱状图
 */
//初始化柱状图
private void initColumnChart() {
    List<AxisValue> axisValues = new ArrayList<AxisValue>();  //存储X轴标注
    List<AxisValue> axisYValues = new ArrayList<AxisValue>(); //存储Y轴标注
    List<Column> columns = new ArrayList<Column>();
    List<SubcolumnValue> subcolumnValues;             //存储
    for (int k = 0; k < columnY.length; k++) {
        axisYValues.add(new AxisValue(k).setValue(columnY[k]));
    }
    for (int i = 0; i < year.length; ++i) {
        subcolumnValues = new ArrayList<SubcolumnValue>();
        for (int j = 0; j < 1; ++j) {
            switch (i + 1) {
                case 1:
                    subcolumnValues.add(new SubcolumnValue(924, ChartUtils.COLOR_BLUE));
                    break;
                case 2:
                    subcolumnValues.add(new SubcolumnValue(1220, ChartUtils.COLOR_GREEN));
                    break;
                case 3:
                    subcolumnValues.add(new SubcolumnValue(1610, ChartUtils.COLOR_RED));
                    break;
                case 4:
                    subcolumnValues.add(new SubcolumnValue(2125, ChartUtils.COLOR_ORANGE));
                    break;
                case 5:
                    subcolumnValues.add(new SubcolumnValue(2805, ChartUtils.COLOR_VIOLET));
                    break;
            }
        }
        // 点击柱状图就展示数据量
        axisValues.add(new AxisValue(i).setLabel(year[i]));
        columns.add(new Column(subcolumnValues).setHasLabelsOnlyForSelected(true));
    }
    //X轴
    Axis axisX = new Axis(axisValues);
    axisX.setHasLines(false);
    axisX.setTextColor(Color.BLACK);
    //Y轴
    Axis axisY = new Axis(axisYValues);
    axisY.setHasLines(true);           //设置Y轴有线条显示
    axisY.setTextColor(Color.BLACK);   //设置文本颜色
    axisY.setMaxLabelChars(5);         //设置坐标轴标签显示的最大字符数
    //设置柱状图的相关属性
    columnData = new ColumnChartData(columns);
    columnData.setAxisXBottom(axisX);   //设置X轴在底部
    columnData.setAxisYLeft(axisY);     //设置Y轴在左侧
    columnChartView.setColumnChartData(columnData);
    columnChartView.setValueSelectionEnabled(true);    //设置柱状图可以被选择
    columnChartView.setZoomType(ZoomType.HORIZONTAL);  //设置缩放类型为水平缩放
}
}

  这里面很多代码都是在昨天代码的基础上填充的关于图表的代码，用来设置图表的一些属性，而且新代码几乎都给了注释，便于读者查看。

  最后，老规矩，放图

  最最最后，纠正一下昨天的错误，一个非常低级的错误，导致我敲了一上午没搞出来，因为今天的代码有很多是延续昨天的，不然我还真不知道昨天敲错了，就是适配器里面的ViewPagerAdapter，我敲成了ViewPaperAdapter，emmmmm，就差一个字母，而且这个错误是在新建类的时候，也就是为这个类起名字的时候犯的错，所以导致昨天的文章后面全部延续了这个名字，也就没有报错，但是今天的代码是我重新敲的，这回名字没有没有敲错，代码报错了。哈哈。活该啊，谁让自己把名字都能敲错。

              此文Over