Android图表库MPAndroidChart(十四)——在ListView种使用相同的图表

Posted 2020-08-23 刘某人程序员

android图表库MPAndroidChart(十四)——在ListView种使用相同的图表

---

各位好久不见，最近挺忙的，所有博客更新的比较少，这里今天说个比较简单的图表，那就是在ListView中使用相同的图标，因为我们在下篇会讲解使用不同的图表，相同的图表还是比较简单的，我们来看下效果图

具体怎么去实现呢，这里我们先写点铺垫，比如我们需要一个基类的Activity

ViewPagerBaseActivity

package com.liuguilin.mpandroidchartsample.activity;
/*
 *  项目名：  MPAndroidChartSample 
 *  包名：    com.liuguilin.mpandroidchartsample.activity
 *  文件名:   ViewPagerBaseActivity
 *  创建者:   LGL
 *  创建时间:  2016/12/13 16:28
 *  描述：    TODO
 */

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

import com.liuguilin.mpandroidchartsample.R;

public abstract class ViewPagerBaseActivity extends FragmentActivity {

    protected String[] mMonths = new String[] {
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"
    };

    protected String[] mParties = new String[] {
            "Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H",
            "Party I", "Party J", "Party K", "Party L", "Party M", "Party N", "Party O", "Party P",
            "Party Q", "Party R", "Party S", "Party T", "Party U", "Party V", "Party W", "Party X",
            "Party Y", "Party Z"
    };


    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    protected float getRandom(float range, float startsfrom) {
        return (float) (Math.random() * range) + startsfrom;
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        overridePendingTransition(R.anim.move_left_in_activity, R.anim.move_right_out_activity);
    }
}

这个基类只是作为我们使用很多重复的东西包括年月日的换算，可以不用理会，我们本篇就只需要用到一个方法就好了，这里写了两个动画

move_left_in_activity

<?xml version="1.0" encoding="utf-8"?>
<translate 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:duration="300"
      android:fromXDelta="-100%p" 
      android:toXDelta="0%p">
</translate>

move_right_out_activity

<?xml version="1.0" encoding="utf-8"?>
<translate 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:duration="300"
      android:fromXDelta="0%p" 
      android:toXDelta="100%p">
</translate>

就是简单的平移动画，好的，我们正式开始实现了，在我们的xml中，我们只需要实现一个ListView就行

activity_listview_char

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/mListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

正在的逻辑其实还是在适配器的getView里

ListViewBarChartActivity

package com.liuguilin.mpandroidchartsample.activity;
/*
 *  项目名：  MPAndroidChartSample 
 *  包名：    com.liuguilin.mpandroidchartsample.activity
 *  文件名:   ListViewBarChartActivity
 *  创建者:   LGL
 *  创建时间:  2016/12/2 13:41
 *  描述：    在ListView中使用相同图表
 */

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.liuguilin.mpandroidchartsample.R;

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

public class ListViewBarChartActivity extends ViewPagerBaseActivity {

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

        initView();
    }

    private void initView() {
        ListView lv = (ListView) findViewById(R.id.mListView);
        ArrayList<BarData> list = new ArrayList<BarData>();
        // 20 items
        for (int i = 0; i < 20; i++) {
            list.add(generateData(i + 1));
        }
        ChartDataAdapter cda = new ChartDataAdapter(getApplicationContext(), list);
        lv.setAdapter(cda);
    }

    private class ChartDataAdapter extends ArrayAdapter<BarData> {

        public ChartDataAdapter(Context context, List<BarData> objects) {
            super(context, 0, objects);
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            BarData data = getItem(position);
            ViewHolder holder = null;
            if (convertView == null) {
                holder = new ViewHolder();
                convertView = LayoutInflater.from(getContext()).inflate(R.layout.list_item_barchart, null);
                holder.chart = (BarChart) convertView.findViewById(R.id.chart);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }

            data.setValueTextColor(Color.BLACK);
            holder.chart.getDescription().setEnabled(false);
            holder.chart.setDrawGridBackground(false);

            XAxis xAxis = holder.chart.getXAxis();
            xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
            xAxis.setDrawGridLines(false);

            YAxis leftAxis = holder.chart.getAxisLeft();
            leftAxis.setLabelCount(5, false);
            leftAxis.setSpaceTop(15f);

            YAxis rightAxis = holder.chart.getAxisRight();
            rightAxis.setLabelCount(5, false);
            rightAxis.setSpaceTop(15f);

            holder.chart.setData(data);
            holder.chart.setFitBars(true);
            holder.chart.animateY(700);
            return convertView;
        }

        private class ViewHolder {
            BarChart chart;
        }
    }

    private BarData generateData(int cnt) {
        ArrayList<BarEntry> entries = new ArrayList<BarEntry>();
        for (int i = 0; i < 12; i++) {
            entries.add(new BarEntry(i, (float) (Math.random() * 70) + 30));
        }
        BarDataSet d = new BarDataSet(entries, "New DataSet " + cnt);
        d.setColors(ColorTemplate.VORDIPLOM_COLORS);
        d.setBarShadowColor(Color.rgb(203, 203, 203));

        ArrayList<IBarDataSet> sets = new ArrayList<IBarDataSet>();
        sets.add(d);

        BarData cd = new BarData(sets);
        cd.setBarWidth(0.9f);
        return cd;
    }
}

可以看到，这里我们只是实现了一个listview，在适配器里面写上我数据的实现，然后随机20个item就OK了，还是相当的简单的，对吧，这只是一种思路，可以这样理解，为我们下篇做铺垫，我们下篇讲述的是不同的图表，这样才有搞头

Sample:下篇提供