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表示收益，好，說道這里，大家應(yīng)該知道怎么去做了，下面直接貼代碼
這個方法是，畫x,y坐標(biāo)系的，以及上面的日期和收益了
private void drawCoordinate(Canvas canvas) {
//坐標(biāo)系畫筆
Paint coordinatePaint = new Paint();
coordinatePaint.setAntiAlias(true);
coordinatePaint.setStrokeWidth(1);
coordinatePaint.setColor(getResources().getColor(R.color.c5));
//坐標(biāo)系文字畫筆
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)品有個需求啊，就是點擊當(dāng)前日期可以查看我的收益，并且在交匯點上展示出來
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);
}
好了核心的代碼就這么多了，由于我們把它當(dāng)做的是控件再用，那么我們在初始化的時候，肯定會引入一些自定義的樣式表，
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ā)入門與進(jìn)階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)顯示系統(tǒng)實時時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了使用kotlin實現(xiàn)MVP的方式(簡單好用)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
這篇文章主要介紹了DialogFragment運行原理及使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了Android微信分享大圖遇到的問題的解決方法，記錄了微信圖片分享出錯的坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
單例模式，可以說是GOF的23種設(shè)計模式中最簡單的一個。接下來通過本文給大家實例講解android設(shè)計模式系列之單例模式的相關(guān)知識，感興趣的朋友一起看看吧2016-09-09
Android開發(fā)之MediaPlayer多媒體(音頻,視頻)播放工具類
這篇文章主要介紹了Android開發(fā)之MediaPlayer多媒體(音頻,視頻)播放工具類,涉及Android針對音頻文件的讀取、播放、暫停、繼續(xù)等操作實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
StreamConfigurationMap和OutputConfiguration是AndroidCamera2API中用于描述和配置相機(jī)輸出流的關(guān)鍵類,本文介紹Android?Camera?API作用及使用指南,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了Android動態(tài)自定義圓形進(jìn)度條,需要的朋友可以參考下2017-03-03
這篇文章主要給大家介紹了關(guān)于Android實現(xiàn)輕量線性與百分比圖表的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了Android 獲取屏幕尺寸實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06