Android圖表庫MPAndroidChart(十四)——在ListView種使用相同的圖表

標籤：code   javascrip   chart   listview   false   component   sample   shadow   context   

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:下篇提供

Android圖表庫MPAndroidChart(十四)——在ListView種使用相同的圖表