Android開(kāi)發(fā)X Y軸Board的繪制教程示例

更新時(shí)間：2022年12月09日 09:15:20 作者：cxy107750

這篇文章主要為大家介紹了Android開(kāi)發(fā)X Y軸Board的繪制教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

上篇大致介紹了RecyclerChart能夠繪制的圖表，以及一些特有的功能。從這節(jié)開(kāi)始具體地介紹圖表的繪制，本節(jié)先介紹RcyclerChart中一些圖表的相關(guān)輔助的繪制，X、Y軸，以及Board的繪制。

上一章節(jié)有介紹繪制的邏輯都在ItemDecoration中實(shí)現(xiàn)的，而各種圖表基本都有X、Y軸、Board相關(guān)的繪制，所以把他們的相關(guān)邏輯抽象到上層的基類BaseChartItemDecoration, 包含 YAxisRender、XAxisRender、BarBoardRender三個(gè)繪制的Render中顯示相關(guān)的繪制邏輯，子類的相關(guān)的X、Y軸及Board 的相關(guān)繪制可以override單獨(dú)實(shí)現(xiàn), 泛型參數(shù) BaseChartAttrs, BaseYAxis 根據(jù)具體的圖表傳遞不同的類給Render進(jìn)行繪制。

X、Y軸相對(duì)而言并不屬于單個(gè)ItemView的附屬，屬于整個(gè)Chart的附屬，所以單獨(dú)地讓RecyclerView設(shè)置Padding，然后利用padding的空間繪制X、Y軸，以BarChartRecyclerView為例：

1. X軸的繪制

ReycylerView中每個(gè)Item Model 為 RecyclerEntry, 其中包含一個(gè)字段 type, 會(huì)根據(jù)當(dāng)前的位置設(shè)定一個(gè)值。

public static final int TYPE_XAXIS_FIRST = 1;//一個(gè)月
public static final int TYPE_XAXIS_SECOND = 2;//7天的線，需要drawText
public static final int TYPE_XAXIS_THIRD = 3;//最小刻度的線
public static final int TYPE_XAXIS_SPECIAL = 4;//同時(shí)是月線以及7日分隔線
public long timestamp;
public int type;
public LocalDate localDate;

例如，繪制一天步數(shù)的一個(gè)圖表，每半小時(shí)一根柱子，一共48根BarChart, 其中要 0點(diǎn)、6點(diǎn)、12點(diǎn)、18點(diǎn)、24點(diǎn)要顯示X軸坐標(biāo)，則以上幾個(gè)位置對(duì)應(yīng)的type值設(shè)置為 TYPE_XAXIS_SECOND，普通的設(shè)置為 TYPE_XAXIS_THIRD，一般的設(shè)置為 TYPE_XAXIS_THIRD，在創(chuàng)建RecyclerEntry 的list綁定到Adapter的時(shí)候設(shè)定。繪制X軸時(shí)，drawLine 以及drawLabel 都會(huì)依照這個(gè) Entry里的Type來(lái)設(shè)定，具體繪制相關(guān)的Color、size、position等都設(shè)定在 BaseAttrs 中，例如一下繪制X軸的網(wǎng)格線：

//繪制網(wǎng)格 縱軸線
    final public void drawVerticalLine(Canvas canvas, RecyclerView parent, XAxis xAxis) {
        if (!mBarChartAttrs.enableXAxisGridLine){
            return;
        }
        BaseBarChartAdapter mAdapter = (BaseBarChartAdapter) parent.getAdapter();
        List<BarEntry> entries = mAdapter.getEntries();
        int parentTop = parent.getPaddingTop();
        int parentBottom = parent.getHeight() - parent.getPaddingBottom();
        int parentLeft = parent.getPaddingLeft();
        final int childCount = parent.getChildCount();
        mTextPaint.setTextSize(xAxis.getTextSize());
        int parentRight = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            int adapterPosition = parent.getChildAdapterPosition(child);
            if (adapterPosition == RecyclerView.NO_POSITION){
                continue;
            }
            int type = parent.getAdapter().getItemViewType(adapterPosition);
            final int x = child.getRight();
            if (x > parentRight || x < parentLeft) {//超出的時(shí)候就不要畫(huà)了
                continue;
            }
            if (type == BarEntry.TYPE_XAXIS_FIRST || type == BarEntry.TYPE_XAXIS_SPECIAL) {
                if (mBarChartAttrs.enableXAxisFirstGridLine){
                    boolean isNextSecondType = isNearEntrySecondType(entries, xAxis, child.getWidth(), adapterPosition);
                    mLinePaint.setColor(xAxis.firstDividerColor);
                    Path path = new Path();
                    if (isNextSecondType) {
                        path.moveTo(x, parentBottom - mBarChartAttrs.contentPaddingBottom);
                    } else {
                        path.moveTo(x, parentBottom);
                    }
                    path.lineTo(x, parentTop);
                    canvas.drawPath(path, mLinePaint);
                }
            } else if (type == BarEntry.TYPE_XAXIS_SECOND) {
                if (mBarChartAttrs.enableXAxisSecondGridLine){
                    //拿到child 的布局信息
                    PathEffect pathEffect = new DashPathEffect(new float[]{5, 5, 5, 5}, 1);
                    mDashPaint.setPathEffect(pathEffect);
                    mDashPaint.setColor(xAxis.secondDividerColor);
                    Path path = new Path();
                    path.moveTo(x, parentBottom - DisplayUtil.dip2px(1));
                    path.lineTo(x, parentTop);
                    canvas.drawPath(path, mDashPaint);
                }
            } else if (type == BarEntry.TYPE_XAXIS_THIRD) {
                if (mBarChartAttrs.enableXAxisThirdGridLine){
                    //拿到child 的布局信息。 繪制同上。
                    。。。 
                    canvas.drawPath(path, mDashPaint);
                }
            }
        }
    }

關(guān)于XAxis 坐標(biāo)的繪制，通過(guò)ValueFormatter 來(lái)獲取Label，這樣可以將Label的文本內(nèi)容顯示交給設(shè)定ValueFormatter的提供者，ValueFormatter借用的MPChart里的概念。這里通過(guò)每個(gè)Entry中的type屬性以及x, timestamp等相關(guān)屬性，自己的需求來(lái)控制Label.

//繪制X坐標(biāo)
    final public void drawXAxis(Canvas canvas, RecyclerView parent, XAxis xAxis) {
        if (!mBarChartAttrs.enableXAxisLabel){
            return;
        }
        int parentBottom = parent.getHeight() - parent.getPaddingBottom();
        int parentLeft = parent.getPaddingLeft();
        final int childCount = parent.getChildCount();
        mTextPaint.setTextSize(xAxis.getTextSize());
        int parentRight = parent.getWidth() - parent.getPaddingRight();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final int xLeft = child.getLeft();
            final int xRight = child.getRight();
            BarEntry barEntry = (BarEntry) child.getTag();
            String dateStr = xAxis.getValueFormatter().getBarLabel(barEntry);
            if (!TextUtils.isEmpty(dateStr)) {
                int childWidth = child.getWidth();
                float txtWidth = mTextPaint.measureText(dateStr);
                float txtXLeft = 0;
                float txtY = parentBottom - DisplayUtil.dip2px(1);
                if (childWidth > txtWidth) {//柱狀圖的寬度比較大的時(shí)候，文字居中
                    float distance = childWidth - txtWidth;
                    txtXLeft = xLeft + distance / 2;
                } else {
                    txtXLeft = xRight - xAxis.labelTxtPadding - txtWidth;
                }
                float txtXRight = txtXLeft + txtWidth;
                int length = dateStr.length();
                if (DecimalUtil.bigOrEquals(txtXLeft, parentLeft) && DecimalUtil.smallOrEquals(txtXRight, parentRight)) {//中間位置
                    canvas.drawText(dateStr, txtXLeft, txtY, mTextPaint);
                } else if (txtXLeft < parentLeft && txtXRight > parentLeft) {//處理左邊界
                    int displayLength = (int) ((txtXRight - parentLeft) / txtWidth * length);
                    int index = length - displayLength;
                    canvas.drawText(dateStr, index, length, parentLeft, txtY, mTextPaint);
                } else if (txtXRight > parentRight && txtXLeft < parentRight) {//處理右邊界
                    int displayLength = (int) ((parentRight - txtXLeft + 1) / txtWidth * length);
                    int endIndex = displayLength;
                    if (endIndex < length) {
                        endIndex += 1;
                    }
                    canvas.drawText(dateStr, 0, endIndex, txtXLeft, txtY, mTextPaint);
                }
            }
        }
    }

2. Y軸的繪制

Y軸的具體 Left、Right的繪制可以根據(jù)ChartAttrs中的設(shè)置來(lái)控制具體顯示哪一種。上面有提到X/Y/Board的繪制會(huì)受RecyclerView中的padding來(lái)限制繪制的區(qū)域大小，然后具體的Y軸網(wǎng)格線繪制幾格，每格的Label顯示均由YAxis來(lái)控制，特殊的需求也支持自定義，之前有介紹過(guò)MPChart圖表中Y軸的這個(gè)計(jì)算，需要跟具體的業(yè)務(wù)數(shù)據(jù)相關(guān)聯(lián)。得到了YAxis的labelCount 以及具體的Label List 之后，繪制就非常簡(jiǎn)單了。

//繪制 Y軸刻度線 橫的網(wǎng)格線
    public void drawHorizontalLine(Canvas canvas, RecyclerView parent, T yAxis) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        mLinePaint.setColor(yAxis.getGridColor());
        int top = parent.getPaddingTop();
        int bottom = parent.getHeight() - parent.getPaddingBottom();
        float distance = bottom - mBarChartAttrs.contentPaddingBottom - mBarChartAttrs.contentPaddingTop - top;
        int lineNums = yAxis.getLabelCount();
        float lineDistance = distance / lineNums;
        float gridLine = top + mBarChartAttrs.contentPaddingTop;
        for (int i = 0; i <= lineNums; i++) {
            if (i > 0) {
                gridLine = gridLine + lineDistance;
            }
            Path path = new Path();
            path.moveTo(left, gridLine);
            path.lineTo(right, gridLine);
            boolean enable = false;
            if (i == lineNums && mBarChartAttrs.enableYAxisZero) {
                enable = true;
            } else {
                enable = mBarChartAttrs.enableYAxisGridLine;//允許畫(huà) Y軸刻度
            }
            if (enable) {
                canvas.drawPath(path, mLinePaint);
            }
        }
    }

繪制RightYAxisLabel

//繪制右邊的刻度
    public void drawRightYAxisLabel(Canvas canvas, RecyclerView parent, T yAxis) {
        if (mBarChartAttrs.enableRightYAxisLabel) {
            int right = parent.getWidth();
            int top = parent.getPaddingTop();
            int bottom = parent.getHeight() - parent.getPaddingBottom();
            mTextPaint.setTextSize(yAxis.getTextSize());
            String longestStr = yAxis.getLongestLabel();
            float yAxisWidth = mTextPaint.measureText(longestStr) + mBarChartAttrs.recyclerPaddingRight;
            int paddingRight = computeYAxisWidth(parent.getPaddingRight(), yAxisWidth);
            //設(shè)置 recyclerView的 BarChart 內(nèi)容區(qū)域
            parent.setPadding(parent.getPaddingLeft(), parent.getPaddingTop(), paddingRight, parent.getPaddingBottom());
            float topLocation = top + mBarChartAttrs.contentPaddingTop;
            float containerHeight = bottom - mBarChartAttrs.contentPaddingBottom - topLocation;
            float itemHeight = containerHeight / yAxis.getLabelCount();
          //通過(guò)YAxis獲取 具體的label List.
            HashMap<Float, Float> yAxisScaleMap = yAxis.getYAxisScaleMap(topLocation, itemHeight, yAxis.getLabelCount());
            float txtX = right - parent.getPaddingRight() + yAxis.labelHorizontalPadding;
            for (Map.Entry<Float, Float> entry : yAxisScaleMap.entrySet()) {
                float yAxisScaleLocation = entry.getKey();
                float yAxisScaleValue = entry.getValue();
                String labelStr = yAxis.getValueFormatter().getFormattedValue(yAxisScaleValue);
                float txtY = yAxisScaleLocation + yAxis.labelVerticalPadding;
                canvas.drawText(labelStr, txtX, txtY, mTextPaint);
            }
        }
    }

3. Board 繪制

Board的繪制相對(duì)而言就簡(jiǎn)單了，只需根據(jù)mBarChartAttrs 中的屬性值，以及RecyclerView的padding值，以及繪制顏色背景等繪制即可。

final public void drawBarBorder(@NonNull Canvas canvas, @NonNull RecyclerView parent) {
    if (mBarChartAttrs.enableBarBorder) {
      RectF rectF = new RectF();
      float start = parent.getPaddingLeft();
      float top = parent.getPaddingTop();
      float end = parent.getRight() - parent.getPaddingRight();
      //底部有0的刻度是不是不用畫(huà)，就畫(huà)折線了。
      float bottom = parent.getHeight() - parent.getPaddingBottom() - mBarChartAttrs.contentPaddingBottom;
      rectF.set(start, top, end, bottom);
      mBarBorderPaint.setStrokeWidth(mBarChartAttrs.barBorderWidth);
      canvas.drawRect(rectF, mBarBorderPaint);
    }
}

至此本章節(jié)介紹完畢，相對(duì)而言還是比較簡(jiǎn)單的，YAxis中的label 的計(jì)算等，可以參考我代碼里面的Case。

以上就是Android開(kāi)發(fā)X Y軸Board的繪制教程示例的詳細(xì)內(nèi)容，更多關(guān)于Android Board繪制X Y軸的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: