Android一個包含表格的表徵圖庫

標籤：round   return   曲線圖   ondraw   arc   超出   star   狀態   onmeasure   

之前有寫過一個圖表lib，但是開發的速度，大多很難跟上產品需求變化的腳步，所以修改了下原先的圖表庫，支援圖表下面能整合table顯示對應的類目，用曲線替換了折線，支援多曲線的顯示，增加了顯示的動畫，，增加了一些可定製的屬性，支援水平柱狀圖和疊加柱狀圖，以及多曲線圖和餅狀圖的顯示

1.

2.各種圖表的使用方式1.餅狀圖 這個和原先的使用一樣，只不過增加了一個動畫，可以參看之前的文章，餅狀圖使用。2.水平多柱狀圖2.1 xml布局

 <wellijohn.org.varchart.hor_bar_with_line_chart.ChartLine        android:id="@+id/chartline"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@color/white"        app:default_x_visible_num="4.2"//一個螢幕中顯示多少列        app:y_interval="40dp"//Y軸的間距        app:y_num_text_max_width="56dp"//y軸左邊的文字的寬度 />還有y_visible_num：y軸需要顯示幾列

2.2 資料設定

public class HorBarActivity extends AppCompatActivity {  //顯示的座標點    private ChartLine mChartline;    //多條折線的座標點    private List<List<DotVo>> mMulListDisDots;    //x軸的點    private String[] mXdots = new String[]{"08/18"            , "08/19",            "08/20", "08/21", "08/22", "08/23", "08/24",            "08/25", "08/26", "08/27", "08/28", "08/29", "09/01", "09/02", "09/23",    };    private double mMax = 44;    private Random rand = new Random();    private List<CategoryVo> mCategoryList;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_hor_bar);        initView();        initMulTestData();        initCategoryList();        try {            mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationOpen(true).setListDisDots(mMulListDisDots).                    setCategoryList(mCategoryList).reDraw();        } catch (YCoordinateException e) {            Log.d("MainActivity", "onCreate: ");            e.printStackTrace();        }    }    /**     * 柱狀圖的資料，是一個list，一個CategoryVo，就是一列中增加一個柱狀     * CategoryVo：{     *      卡券類目的名稱     *      private String categoryName;     *      每個卡券類目的值     *      private List<String> categoryValueList;     * }     */    private void initCategoryList() {        mCategoryList = new ArrayList<>();        mCategoryList.add(new CategoryVo());        mCategoryList.add(new CategoryVo());        mCategoryList.add(new CategoryVo());    }    /**     * 初始化曲線圖,private List<List<DotVo>> mMulListDisDots;     * List<DotVo>>就是一條曲線圖，     */    private void initMulTestData() {        mMulListDisDots = new ArrayList<>();        for (int i = 0; i < 3; i++) {            ArrayList<DotVo> temp = new ArrayList();            DotVo tempDotVo = new DotVo("08/18", rand.nextInt((int) mMax));            temp.add(tempDotVo);            DotVo tempDotVo1 = new DotVo("08/19", rand.nextInt((int) mMax));            temp.add(tempDotVo1);            DotVo tempDotVo2 = new DotVo("08/20", rand.nextInt((int) mMax));            temp.add(tempDotVo2);            DotVo tempDotVo3 = new DotVo("08/21", rand.nextInt((int) mMax));            temp.add(tempDotVo3);            DotVo tempDotVo4 = new DotVo("08/22", rand.nextInt((int) mMax));            temp.add(tempDotVo4);            DotVo tempDotVo5 = new DotVo("08/23", rand.nextInt((int) mMax));            temp.add(tempDotVo5);            DotVo tempDotVo6 = new DotVo("09/02", rand.nextInt((int) mMax));            temp.add(tempDotVo6);            mMulListDisDots.add(temp);        }    }    private void initView() {        mChartline = findViewById(R.id.chartline);    }}

3.疊加柱狀圖3.1 xml布局

<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLayBarChartLine        android:id="@+id/overlay_chart_line"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@color/white"        android:visibility="visible"        app:overlay_default_x_visible_num="4.2"        app:overlay_y_interval="40dp"        app:overlay_y_num_text_max_width="56dp" />

3.2 資料設定，如2.2一樣3.實現的幾個關鍵點3.1 寬度需要重寫，onMeasure，因為的控制項的寬度是大於螢幕的寬度的，寬度是根據顯示的x軸的點和間距，以及y軸座標的文字的所佔的寬度的距離所組成。

        int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);        int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);        int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);        int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);        int resultWidthSize = 0;        int resultHeightSize = 0;        int resultWidthMode = MeasureSpec.EXACTLY;//用來對childView進行計算的        int resultHeightMode = MeasureSpec.EXACTLY;        int paddingWidth = getPaddingLeft() + getPaddingRight();        int paddingHeight = getPaddingTop() + getPaddingBottom();        ViewGroup.LayoutParams thisLp = getLayoutParams();        switch (widthParentMeasureMode) {            //父類不加限制給子類            case MeasureSpec.UNSPECIFIED:                //這個代表在布局寫死了寬度                if (thisLp.width > 0) {                    resultWidthSize = thisLp.width;                    resultWidthMode = MeasureSpec.EXACTLY;                } else {                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);                    resultWidthMode = MeasureSpec.UNSPECIFIED;                }                break;            case MeasureSpec.AT_MOST:                //這個代表在布局寫死了寬度                if (thisLp.width > 0) {                    resultWidthSize = thisLp.width;                    resultWidthMode = MeasureSpec.EXACTLY;                } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {                    resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);                    resultWidthMode = MeasureSpec.AT_MOST;                } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);                    resultWidthMode = MeasureSpec.AT_MOST;                }                break;            case MeasureSpec.EXACTLY:                //這個代表在布局寫死了寬度                if (thisLp.width > 0) {                    resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);                    resultWidthMode = MeasureSpec.EXACTLY;                } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {                    resultWidthSize = widthParentMeasureSize;                    resultWidthMode = MeasureSpec.EXACTLY;                } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);                    resultWidthMode = MeasureSpec.AT_MOST;                }                break;        }        setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),                MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));

3.2 規劃固定的地區，在超出地區的部分不可見，這個在之前用的bitmap來實現，總感覺彆扭，後面讀官方的源碼的時候，瞭解了canvas的clipRect方法，我們在繪製這塊的時候，onDraw方法中調用

    int clipRestoreCount = canvas.save();    canvas.clipRect(mContentRect);//繪製之前調用    doDraw();//進行想要的繪製    canvas.restoreToCount(clipRestoreCount);//繪製完成調用restoreToCount恢複到繪製這塊之前的狀態

3.3 動畫我們基本都可以用ValueAnimator來實現，比如說餅狀圖：他的一個繪製是0-360的角度的轉變，我們就可以

    private void startPathAnim(long duration) {        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 360);        valueAnimator.setDuration(duration);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mDrawAngle = (float) animation.getAnimatedValue();                ViewCompat.postInvalidateOnAnimation(CirclePercentChart.this);            }        });        valueAnimator.start();    }

然後通過mDrawAngle來控制每次繪製的角度，這樣就可以有從0-360度繪製的感覺，那個柱狀圖的動畫也是一樣的，以不變應萬變。

3.4 貝茲路徑繪製的演算法

    if (i == 0) {// 第一條為二階貝塞爾        path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);// 起點    } else {        float cpx = preX + (mDots[0] - preX) / 2.0f;        path.cubicTo(cpx, preY + (mLastHorLineY - preY) * mPhaseY,                cpx, mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY,                mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);}

在繪製貝茲路徑，我仔細去查過這些控制點的計算規則，有根據三點，來計算出兩個控制點，但是這樣繪製出來在三個點內部曲線是很平滑的，但是在接下來的第四個點的銜接的時候，感覺不是很好，所以我還是用了上面的計算方法來計算控制點，演算法我貼出來，參數分別是1，2，3的x和y座標和彎曲係數

public static ControlPonits getControlPoints(double x0, double y0, double x1, double y1, double x2, double y2, double paramCoefficient) {        double d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));        double d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));        double fa = paramCoefficient * d01 / (d01 + d12);   // scaling factor for triangle Ta        double fb = paramCoefficient * d12 / (d01 + d12);   // ditto for Tb, simplifies to fb=t-fa        double p1x = x1 - fa * (x2 - x0);    // x2-x0 is the width of triangle T        double p1y = y1 - fa * (y2 - y0);    // y2-y0 is the height of T        double p2x = x1 + fb * (x2 - x0);        double p2y = y1 + fb * (y2 - y0);        ControlPonits tempControlPoints = new ControlPonits();        tempControlPoints.beforeControlPointX = (float) p1x;        tempControlPoints.beforeControlPointY = (float) p1y;        tempControlPoints.afterControlPointX = (float) p2x;        tempControlPoints.afterControlPointY = (float) p2y;        return tempControlPoints;    }

3.library引入方式

step 1. Add it in your root build.gradle at the end of repositories:allprojects {repositories {...maven { url ‘https://jitpack.io‘ }}}Step 2. Add the dependencydependencies {        compile ‘com.github.WelliJohn:charts:1.0.0‘}

github地址,您的點贊和star是我繼續開源的最大動力。

Android一個包含表格的表徵圖庫