網站首頁 編程語言 正文
正文
上篇大致介紹了RecyclerChart能夠繪制的圖表，以及一些特有的功能。從這節開始具體地介紹圖表的繪制，本節先介紹RcyclerChart中一些圖表的相關輔助的繪制，X、Y軸，以及Board的繪制。
上一章節有介紹繪制的邏輯都在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，在創建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來限制繪制的區域大小，然后具體的Y軸網格線繪制幾格，每格的Label顯示均由YAxis來控制，特殊的需求也支持自定義，之前有介紹過MPChart圖表中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 內容區域
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);
}
}
至此本章節介紹完畢，相對而言還是比較簡單的，YAxis中的label 的計算等，可以參考我代碼里面的Case。
原文鏈接：https://juejin.cn/post/7163268579704438821
相關推薦
- 2022-07-28 詳解Python?Flask框架的安裝及應用_python
- 2023-02-15 Go?Comparable?Type原理深入解析_Golang
- 2022-04-02 vscode?采用C++17版本進行編譯的實現_C 語言
- 2022-03-26 postman模擬post請求的四種請求體_相關技巧
- 2023-07-16 uniapp 小程序 filters 過濾日期
- 2023-11-22 Linux fatal: unable to access ‘https://github xxxx
- 2022-08-29 Python繪制散點圖之可視化神器pyecharts_python
- 2022-06-20 go語言實現屏幕截圖的示例代碼_Golang
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速