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

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

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

正文

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

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

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

1. X軸的繪制

ReycylerView中每個Item Model 為 RecyclerEntry, 其中包含一個字段 type, 會根據當前的位置設定一個值。

public static final int TYPE_XAXIS_FIRST = 1;//一個月
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;//同時是月線以及7日分隔線
public long timestamp;
public int type;
public LocalDate localDate;

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

//繪制網格 縱軸線
    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) {//超出的時候就不要畫了
                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);
                }
            }
        }
    }

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

//繪制X坐標
    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) {//柱狀圖的寬度比較大的時候，文字居中
                    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的繪制可以根據ChartAttrs中的設置來控制具體顯示哪一種。上面有提到X/Y/Board的繪制會受RecyclerView中的padding來限制繪制的區(qū)域大小，然后具體的Y軸網格線繪制幾格，每格的Label顯示均由YAxis來控制，特殊的需求也支持自定義，之前有介紹過MPChart圖表中Y軸的這個計算，需要跟具體的業(yè)務數據相關聯。得到了YAxis的labelCount 以及具體的Label List 之后，繪制就非常簡單了。

//繪制 Y軸刻度線 橫的網格線
    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;//允許畫 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);
            //設置 recyclerView的 BarChart 內容區(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();
          //通過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的繪制相對而言就簡單了，只需根據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的刻度是不是不用畫，就畫折線了。
      float bottom = parent.getHeight() - parent.getPaddingBottom() - mBarChartAttrs.contentPaddingBottom;
      rectF.set(start, top, end, bottom);
      mBarBorderPaint.setStrokeWidth(mBarChartAttrs.barBorderWidth);
      canvas.drawRect(rectF, mBarBorderPaint);
    }
}

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

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

您可能感興趣的文章: