Android開發(fā)實現(xiàn)繪制淘寶收益圖折線效果示例
更新時間：2017年11月25日 15:21:23 作者：code_xzh
這篇文章主要介紹了Android開發(fā)實現(xiàn)繪制淘寶收益圖折線效果,涉及Android canvas圖形繪制及布局控制相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Android開發(fā)實現(xiàn)繪制淘寶收益圖折線效果。分享給大家供大家參考，具體如下：
實現(xiàn)的效果我一會貼上，我先說下原理，我們知道要實現(xiàn)在canvas上畫線，不就是要搞一個paint嘛，然后首先肯定要設(shè)置下paint的屬性，那么畫文字呢，不就是Textpaint嗎，對，就是這么簡單，接下來怎么畫，折線圖主要分為X軸和y軸，x軸表示日期，y表示收益，好，說道這里，大家應該知道怎么去做了，下面直接貼代碼
這個方法是，畫x,y坐標系的，以及上面的日期和收益了
private void drawCoordinate(Canvas canvas) {
//坐標系畫筆
Paint coordinatePaint = new Paint();
coordinatePaint.setAntiAlias(true);
coordinatePaint.setStrokeWidth(1);
coordinatePaint.setColor(getResources().getColor(R.color.c5));
//坐標系文字畫筆
TextPaint coordinateTextPaint = new TextPaint();
coordinateTextPaint.setAntiAlias(true);
coordinateTextPaint.setTextSize(scaleTextSize);
coordinateTextPaint.setAntiAlias(true);
coordinateTextPaint.setColor(scaleTextColor);
coordinateTextPaint.setTextAlign(Align.CENTER);
//水平的刻度線
float verticalScaleStep = getVerticalScaleStep();
coordinateTextPaint.setTextAlign(Align.RIGHT);
float textHeight = getTextHeight(coordinateTextPaint, "8");
for (int i = 0; i < maxVerticalScaleValue; i++) {
float y = getHeight() - bottomPadding - (verticalScaleStep * i);
canvas.drawLine(leftPadding, y, getWidth() - rightPadding, y, coordinatePaint);
canvas.drawText(i + "", leftPadding - 13, y + textHeight / 2, coordinateTextPaint);
}
//垂直的刻度線
float horizontalScaleStep = getHorizontalScaleStep();
for (int i = 0; i < line.getSize(); i++) {
float x = leftPadding + (horizontalScaleStep * i);
if (i == 0) {
canvas.drawLine(x, topPadding, x, getHeight() - bottomPadding, coordinatePaint);
}
coordinateTextPaint.setColor(mTouchIndex == i ? verticalLineColor : scaleTextColor);
coordinateTextPaint.setTextAlign(i == 0 ? Align.LEFT : Align.CENTER);
canvas.drawText(line.getPoint(i).getX(), x, getHeight() - bottomPadding + textHeight + 10, coordinateTextPaint);
}
}
但是產(chǎn)品有個需求啊，就是點擊當前日期可以查看我的收益，并且在交匯點上展示出來
private void drawCurve(Canvas canvas) {
Paint curvePaint = new Paint();//曲線畫筆
curvePaint.setColor(curveColor);
curvePaint.setAntiAlias(true);
curvePaint.setStrokeWidth(curveStrokeWidth);
float horizontalScaleStep = getHorizontalScaleStep();
float lastXPixels = 0, newYPixels = 0;
float lastYPixels = 0, newXPixels = 0;
float useHeight = getHeight() - bottomPadding - topPadding;
for (int i = 0; i < line.getSize(); i++) {
float yPercent = line.getPoint(i).getY() / maxVerticalScaleValue;
if (i == 0) {
lastXPixels = leftPadding + i * horizontalScaleStep;
lastYPixels = getHeight() - bottomPadding - useHeight * yPercent;
} else {
newXPixels = leftPadding + i * horizontalScaleStep;
newYPixels = getHeight() - bottomPadding - useHeight * yPercent;
canvas.drawLine(lastXPixels, lastYPixels, newXPixels, newYPixels, curvePaint);
lastXPixels = newXPixels;
lastYPixels = newYPixels;
}
line.getPoint(i).fLineX = lastXPixels;
line.getPoint(i).fLineY = lastYPixels;
}
}
點擊交匯點，有文字提示說明，
private void drawTipRect(Canvas canvas) {
if (mTouchIndex == -1) return;
LinePoint point = line.getPoint(mTouchIndex);
float x = point.fLineX;
float y = point.fLineY;
// 描繪豎線
Paint paint = new TextPaint();
PathEffect effects = new DashPathEffect(new float[]{5, 5, 5, 5}, 1);
paint.setPathEffect(effects);
paint.setAntiAlias(true);
paint.setStrokeWidth(verticalLineStrokeWidth);
paint.setColor(verticalLineColor);
canvas.drawLine(x, topPadding, x, getHeight() - bottomPadding, paint);
//描繪交匯圓點
paint.setPathEffect(null);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(Color.WHITE);
canvas.drawCircle(x, y, circleRadius, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(circleColor);
paint.setStrokeWidth(circleStrokeWidth);
canvas.drawCircle(x, y, circleRadius, paint);
float midY = (topPadding + getHeight() - bottomPadding) / 2;
float midX = (leftPadding + getWidth() - rightPadding) / 2;
//描繪圓角矩形
TextPaint textPaint = new TextPaint();
textPaint.setTextSize(tipTextSize);
textPaint.setTextAlign(Align.CENTER);
textPaint.setColor(tipTextColor);
textPaint.setAntiAlias(true);
String label = tipPrefix + point.getY();
float textWidth = textPaint.measureText(label) + 15;
float textHeight = getTextHeight(textPaint, label) + 8;
float hMargin = 10;//水平間距
float vMargin = 8;//垂直間距
float w = textWidth + hMargin * 2;//寬
float h = textHeight + vMargin * 2;//高
RectF rect = new RectF();
if (x > midX) {
rect.right = x - hMargin;
rect.left = x - w;
} else {
rect.left = x + hMargin;
rect.right = x + w;
}
if (y > midY) {
rect.top = y - h;
rect.bottom = y - vMargin;
} else {
rect.bottom = y + h;
rect.top = y + vMargin;
}
Paint roundRectPaint = new Paint();
roundRectPaint.setColor(tipRectColor);
roundRectPaint.setStyle(Paint.Style.FILL);
roundRectPaint.setAntiAlias(true);
canvas.drawRoundRect(rect, 3, 3, roundRectPaint);
// 描繪圓角矩形中間的文字
float roundTextX = (rect.left + rect.right) / 2;
float roundTextY = (rect.top + rect.bottom + getTextHeight(textPaint, label)) / 2;
canvas.drawText(label, roundTextX, roundTextY, textPaint);
}
好了核心的代碼就這么多了，由于我們把它當做的是控件再用，那么我們在初始化的時候，肯定會引入一些自定義的樣式表，
private void initViews(AttributeSet attrs, int defStyle) {
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.LineGraph, defStyle, 0);
scaleTextSize = typedArray.getDimension(R.styleable.LineGraph_scale_text_size, 20);
scaleTextColor = typedArray.getColor(R.styleable.LineGraph_scale_text_color, getResources().getColor(R.color.c5));
tipRectColor = typedArray.getColor(R.styleable.LineGraph_tip_rect_color, getResources().getColor(R.color.c8));
tipTextSize = typedArray.getDimension(R.styleable.LineGraph_tip_text_size, 22);
tipTextColor = typedArray.getColor(R.styleable.LineGraph_tip_text_color, getResources().getColor(R.color.c12));
curveStrokeWidth = typedArray.getDimension(R.styleable.LineGraph_curve_stroke_width, 4);
curveColor = typedArray.getColor(R.styleable.LineGraph_curve_color, getResources().getColor(R.color.c8));
verticalLineStrokeWidth = typedArray.getDimension(R.styleable.LineGraph_vertical_line_stroke_width, 2);
verticalLineColor = typedArray.getColor(R.styleable.LineGraph_vertical_line_color, getResources().getColor(R.color.c8));
circleStrokeWidth = typedArray.getDimensionPixelSize(R.styleable.LineGraph_circle_stroke_width, 3);
circleColor = typedArray.getColor(R.styleable.LineGraph_circle_color, getResources().getColor(R.color.c8));
circleRadius = typedArray.getDimensionPixelSize(R.styleable.LineGraph_circle_radius, 7);
typedArray.recycle();
bottomPadding = dip2px(getContext(), 20);
topPadding = dip2px(getContext(), 10);
leftPadding = dip2px(getContext(), 20);
rightPadding = dip2px(getContext(), 10);
}
樣式表文件我就不多說了，行如下面的格式，
<declare-styleable name="LineGraph"> <attr name="scale_text_size" format="dimension" /> <attr name="scale_text_color" format="color" /> <attr name="tip_text_size" format="dimension" /> <attr name="tip_text_color" format="color" /> <attr name="tip_rect_color" format="color" /> <attr name="curve_stroke_width" format="dimension" /> <attr name="curve_color" format="color" /> <attr name="vertical_line_stroke_width" format="dimension" /> <attr name="vertical_line_color" format="color" /> <attr name="circle_stroke_width" format="dimension" /> <attr name="circle_color" format="color" /> <attr name="circle_radius" format="dimension" /> </declare-styleable>
最后貼上個效果圖：
git下載地址：https://github.com/xiangzhihong/lineview
或者點擊此處本站下載。
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android圖形與圖像處理技巧總結(jié)》、《Android開發(fā)入門與進階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
相關(guān)文章
Android應用開發(fā)中使用GridView網(wǎng)格布局的代碼示例
GridView布局比較基礎(chǔ),可以取代已經(jīng)逐漸淡出人們視線的TableLayout,這里我們就來看一下Android應用開發(fā)中使用GridView網(wǎng)格布局的代碼示例:2016-06-06
這篇文章主要為大家詳細介紹了Android中TabLayout的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Android Studio打包H5網(wǎng)址頁面,封裝成APK
大家好，本篇文章主要講的是Android Studio打包H5網(wǎng)址頁面,封裝成APK，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
這篇文章主要介紹了Android多級樹形菜單的實現(xiàn)方法,很實用的功能,需要的朋友可以參考下2014-08-08
在Android開發(fā)中，launch是我們經(jīng)常用的，今天來看看它是什么原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-11-11
這篇文章主要為大家詳細介紹了flutter日期選擇器，flutter時間選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本篇文章主要介紹了Android之Adapter用法總結(jié)，具有一定的參考價值，有需要的可以了解一下。2016-11-11
這篇文章主要為大家詳細介紹了Android自定義Notification添加點擊事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了Android自定義控件的創(chuàng)建方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
解析Android中實現(xiàn)滑動翻頁之ViewFlipper的使用詳解
有一些場景，我們需要向用戶展示一系列的頁面。比如我們正在開發(fā)一個看漫畫的應用，可能就需要向用戶展示一張一張的漫畫圖片，用戶使用手指滑動屏幕，可以在前一幅漫畫和后一幅漫畫之間切換。這個時候ViewFlipper就是一個很好的選擇2013-05-05