Android開發(fā)X Y軸Board的繪制教程示例
正文
上篇大致介紹了RecyclerChart能夠繪制的圖表，以及一些特有的功能。從這節(jié)開始具體地介紹圖表的繪制，本節(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軸相對而言并不屬于單個(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è)位置對應(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來設(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í)候就不要畫了
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)的繪制，通過ValueFormatter 來獲取Label，這樣可以將Label的文本內(nèi)容顯示交給設(shè)定ValueFormatter的提供者，ValueFormatter借用的MPChart里的概念。這里通過每個(gè)Entry中的type屬性以及x, timestamp等相關(guān)屬性，自己的需求來控制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è)置來控制具體顯示哪一種。上面有提到X/Y/Board的繪制會(huì)受RecyclerView中的padding來限制繪制的區(qū)域大小，然后具體的Y軸網(wǎng)格線繪制幾格，每格的Label顯示均由YAxis來控制，特殊的需求也支持自定義，之前有介紹過MPChart圖表中Y軸的這個(gè)計(jì)算，需要跟具體的業(yè)務(wù)數(shù)據(jù)相關(guān)聯(lián)。得到了YAxis的labelCount 以及具體的Label List 之后，繪制就非常簡單了。
//繪制 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;//允許畫 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();
//通過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的繪制相對而言就簡單了，只需根據(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的刻度是不是不用畫，就畫折線了。
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 的計(jì)算等，可以參考我代碼里面的Case。
以上就是Android開發(fā)X Y軸Board的繪制教程示例的詳細(xì)內(nèi)容，更多關(guān)于Android Board繪制X Y軸的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)微信朋友圈功，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Android Socket通信詳解的相關(guān)資料,需要的朋友可以參考下2015-12-12
Android中實(shí)現(xiàn)延時(shí)執(zhí)行操作的方法小結(jié)
在Android開發(fā)中我們可能會(huì)有延時(shí)執(zhí)行某個(gè)操作的需求，這篇文章主要介紹了Android中實(shí)現(xiàn)延時(shí)執(zhí)行操作的幾種方法,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Android判斷登錄情況，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Android 中SwipeRefreshLayout與ViewPager滑動(dòng)事件沖突解決方法
這篇文章主要介紹了Android 中SwipeRefreshLayout與ViewPager滑動(dòng)事件沖突解決方法的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android Intent調(diào)用 Uri的方法總結(jié)
這篇文章主要介紹了Android Intent調(diào)用 Uri的方法總結(jié)的相關(guān)資料,這里整理了Android Intent 調(diào)用Uri的常用方法，需要的朋友可以參考下2017-09-09
Android自定義scrollView實(shí)現(xiàn)頂部圖片下拉放大
這篇文章主要為大家詳細(xì)介紹了Android自定義scrollView實(shí)現(xiàn)頂部圖片下拉放大，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android Service總結(jié)及詳細(xì)介紹
本文主要介紹Android Service的知識，這里整理了詳細(xì)資料及簡單實(shí)現(xiàn)示例代碼，有需要的小伙伴可以參考下2016-09-09
Android 使用Glide加載網(wǎng)絡(luò)圖片等比例縮放的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 使用Glide加載網(wǎng)絡(luò)圖片等比例縮放的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了Android split分割特殊字符取名稱的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09