------------------------------------------------------------------>>> 简单版 ---- Android自定义控件之折线图
效果图：
布局代码:
<!-- 自定义折线图 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:myswitch="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".upgrade.MainActivity"> <custom.view.upgrade.my_line_chart.MyLineChart android:id="@+id/my_line_chart" android:layout_width="400dp" android:layout_height="300dp" android:background="@color/ring_test3"/> </LinearLayout>
设置参数相关的代码：
/** * 自定义折线图 */ MyLineChart myLineChart = findViewById(R.id.my_line_chart); myLineChart.setYItemText(new String[]{"1级", "2级", "3级", "4级", "5级"}); myLineChart.setXItemText(new String[]{"2001", "2002", "2003", "2004", "2005", "2006", "2007"});
自定义折线图View：
package custom.view.upgrade.my_line_chart; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.view.View; public class MyLineChart extends View { private final String TAG = MyLineChart.class.getSimpleName(); public MyLineChart(Context context, AttributeSet attrs) { super(context, attrs); initAction(); } private Paint paintYItem; // 专门用于画Y轴的画笔 private Paint paintXItem; // 专门用于话X轴的画笔 private Paint paintLine; // 线与点共用一个画笔 private Rect rectX = new Rect(); private Rect rectY = new Rect(); private int w; private int h; private String[] xItemText = {}; // X轴的文字 private String[] yItemText = {}; // Y轴的文字 /** * 给使用者设置X轴的文字集合 */ public void setXItemText(String[] xItemText) { this.xItemText = xItemText; } /** * 给使用者设置Y轴的文字集合 */ public void setYItemText(String[] yItemText) { this.yItemText = yItemText; saveYHeightList = new int[yItemText.length]; } private void initAction() { paintYItem = new Paint(); paintYItem.setAntiAlias(true); // 抗锯齿 paintYItem.setColor(Color.RED); paintYItem.setTextSize(40); paintXItem = new Paint(); paintXItem.setAntiAlias(true); paintXItem.setColor(Color.BLUE); paintXItem.setTextSize(40); paintLine = new Paint(); paintLine.setAntiAlias(true); paintLine.setColor(Color.BLACK); paintLine.setTextSize(40); } /** * 测量自身View控件的宽和高，宽和高得到父控件给子控件测量的高宽等 * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); // 精确模式 // MeasureSpec.EXACTLY 当控件设置尺寸的值是多少，控件的宽高就是多少 // 最大模式 // MeasureSpec.AT_MOST 由父控件给出了最大控件，子控件最大只能这么大，当然也可以比父控件小 if (widthMode == MeasureSpec.EXACTLY) { w = widthSize; } if (heightMode == MeasureSpec.EXACTLY) { h = heightSize; } if (heightMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.AT_MOST) { throw new IllegalArgumentException("参数异常，请输入指定大小，例如：200dp"); } setMeasuredDimension(w, h); } private int countYHeight; // 计算记录Y的高度 private int[] saveYHeightList; // 保存Y轴 五级的高度 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (yItemText.length == 0 || xItemText.length == 0) { throw new IllegalArgumentException("参数异常，设置x轴/y轴集合数据值为空"); } // 画Y轴集合数据 for (int y = 0; y< yItemText.length; y++) { countYHeight = (y + 1) * 118; canvas.drawText(yItemText[y], 40, countYHeight, paintYItem); saveYHeightList[y] = countYHeight; } paintLine.getTextBounds(xItemText[0], 0, xItemText[0].length(), rectX); paintLine.getTextBounds(yItemText[0], 0, yItemText[0].length(), rectY); // 画X轴集合的数据 for (int x = 0; x <xItemText.length; x++) { int xLocation = (x + 1) * 122; canvas.drawText(xItemText[x], xLocation, (countYHeight + 80), paintXItem); // 定义线的 开始 到 结束 int tempStartY = 0; int tempStopY = 0; switch (x) { case 0: tempStartY = saveYHeightList[0] - (rectY.height() / 3); tempStopY = saveYHeightList[1] - (rectY.height() / 3); break; case 1: tempStartY = saveYHeightList[1] - (rectY.height() / 3); tempStopY = saveYHeightList[2] - (rectY.height() / 3); break; case 2: tempStartY = saveYHeightList[2] - (rectY.height() / 3); tempStopY = saveYHeightList[3] - (rectY.height() / 3); break; case 3: tempStartY = saveYHeightList[3] - (rectY.height() / 3); tempStopY = saveYHeightList[4] - (rectY.height() / 3); break; case 4: tempStartY = saveYHeightList[4] - (rectY.height() / 3); tempStopY = saveYHeightList[3] - (rectY.height() / 3); break; case 5: tempStartY = saveYHeightList[3] - (rectY.height() / 3); tempStopY = saveYHeightList[1] - (rectY.height() / 3); break; case 6: tempStartY = saveYHeightList[1] - (rectY.height() / 3); break; default: break; } // 画点，注意：X轴需要与点保持一致的位置，只变化Y轴值的位置 canvas.drawCircle(xLocation + (rectX.width() / 2), tempStartY, 20, paintLine); // 画线 if (x < xItemText.length-1) { int xLocationLine = ((x + 1) + 1) * 122; canvas.drawLine(xLocation + (rectX.width() / 2), tempStartY, xLocationLine + (rectX.width() / 2), tempStopY, paintLine); } } } }
------------------------------------------------------------------>>> 升级版 ---- Android自定义控件之折线图
效果图：
背景颜色：
布局代码：
<!-- 自定义折线图 升级版 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:myswitch="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".upgrade.MainActivity"> <custom.view.upgrade.my_line_chart2.MyLineChart2 android:id="@+id/my_line_chart" android:layout_width="match_parent" android:layout_height="300dp" android:background="@color/ring_test3"/> </LinearLayout>
自定义折线图绘制类：
package custom.view.upgrade.my_line_chart2; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.util.Log; import android.view.View; import custom.view.R; public class MyLineChart2 extends View { private final String TAG = MyLineChart2.class.getSimpleName(); public MyLineChart2(Context context, AttributeSet attrs) { super(context, attrs); initView(); } private Paint xyLinePaint; // X轴与Y轴的灰色线的画笔 private final int XY_LINE_SPACE = 120; // X轴Y轴距离左边底边距离间隙值 private String[] yListData = {"7.0", "6.0", "5.0", "4.0", "3.0", "2.0", "1.0", "0.0"}; private String[] xListData = {"活期", "三个月", "六个月", "一年", "两年", "三年", "四年", "五年"}; // 基准利率的画笔 private Paint standardRatePaint; // 真惠存利率 private Paint trueHuicunReatPaint; // 记录X轴文字的位置 private int[] xTextLocation; // 记录Y轴顶部越界值 与底部越界值 private int topDemarcation; private int bottomeDemarcation; // 基准利率动态变化的Y轴值 private int changeY; private int changStopY; // 真惠存利率动态变化的Y轴值 private int changeYHuicun; private int changeStopYHuicun; // 基准利率动态变化的值 private int[] changYList = {200, 400, 300, 350, 500, 450, 300}; // 真惠存动态变化的值 private int[] changYHuicunList = {540, 300, 350, 600, 550, 480, 200}; private Rect rect; // 专门用于画解释信息文字的画笔 private Paint textInfoPaint; private void initView() { xyLinePaint = new Paint(); xyLinePaint.setAntiAlias(true); // 抗锯齿 xyLinePaint.setColor(getResources().getColor(R.color.xyline)); xyLinePaint.setTextSize(22); standardRatePaint = new Paint(); standardRatePaint.setAntiAlias(true); standardRatePaint.setColor(getResources().getColor(R.color.standard_rate)); standardRatePaint.setStyle(Paint.Style.STROKE); standardRatePaint.setStrokeWidth(6); trueHuicunReatPaint = new Paint(); trueHuicunReatPaint.setAntiAlias(true); trueHuicunReatPaint.setColor(getResources().getColor(R.color.true_huicun)); trueHuicunReatPaint.setStyle(Paint.Style.STROKE); trueHuicunReatPaint.setStrokeWidth(6); xTextLocation = new int[xListData.length]; rect = new Rect(); textInfoPaint = new Paint(); textInfoPaint.setAntiAlias(true); textInfoPaint.setColor(getResources().getColor(R.color.xyline)); textInfoPaint.setTextSize(32); } /** * 基准利率七个值 */ public void setStandardData(int[] changYList) { this.changYList = changYList; } /** * 真惠存利率七个值 */ public void setTureHuicunData(int[] changYHuicunList) { this.changYHuicunList = changYHuicunList; } private int viewWidth; // 当前控件的宽度 private int viewHeight; // 当前控件的高度 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // MeasureSpec.EXACTLY 精确模式，指定大小，例如：200dp // MeasureSpec.AT_MOST 最大模式，由父控件控制最大，子控件不能比父控件大，当然可以比父控件小 if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) { viewHeight = MeasureSpec.getSize(heightMeasureSpec); } else if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST) { throw new IllegalArgumentException("高度指定参数异常，请按照，例如：200dp"); } viewWidth = MeasureSpec.getSize(widthMeasureSpec); // 这两个值是根据手机屏幕而变化的 Log.d(TAG, "viewHeight:" + viewHeight + " viewWidth:" + viewWidth); setMeasuredDimension(viewWidth, viewHeight); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 画Y轴的箭头符号 canvas.drawLine(XY_LINE_SPACE, 40, XY_LINE_SPACE + 16, 80, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, 40, XY_LINE_SPACE - 16, 80, xyLinePaint); // 画Y轴线 canvas.drawLine(XY_LINE_SPACE, 40, XY_LINE_SPACE, viewHeight - XY_LINE_SPACE, xyLinePaint); // 画Y轴线中的短线 15根 int startStopY = 0; for (int y=0; y<15; y++) { if (y == 0) { startStopY = 80; } startStopY += 35; canvas.drawLine(XY_LINE_SPACE, startStopY, XY_LINE_SPACE + 20, startStopY, xyLinePaint); } /*canvas.drawLine(XY_LINE_SPACE, startStopY = 100, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint); canvas.drawLine(XY_LINE_SPACE, startStopY += 35, XY_LINE_SPACE + 20, startStopY, xyLinePaint);*/ // 画Y轴线中的信息 字符串 int textY = 0; for (int y2 = 0; y2 < yListData.length; y2 ++) { if (y2 == 0) { textY = 80; topDemarcation = textY; topDemarcation += 60; } textY += 60; bottomeDemarcation = textY; canvas.drawText(yListData[y2], XY_LINE_SPACE - 60, textY, xyLinePaint); } // 画X的箭头符号 canvas.drawLine(viewWidth - (viewWidth / 8), viewHeight - XY_LINE_SPACE, (viewWidth - (viewWidth / 8)) - 40, (viewHeight - XY_LINE_SPACE) - 16, xyLinePaint); canvas.drawLine(viewWidth - (viewWidth / 8), viewHeight - XY_LINE_SPACE, (viewWidth - (viewWidth / 8)) - 40, (viewHeight - XY_LINE_SPACE) + 16, xyLinePaint); // 画X轴线 canvas.drawLine(XY_LINE_SPACE, viewHeight - XY_LINE_SPACE, viewWidth - (viewWidth / 8), viewHeight - XY_LINE_SPACE, xyLinePaint); // 画15根X轴线 int startStopX = 0; for (int x = 0; x<14; x ++) { if (x == 0) { startStopX = XY_LINE_SPACE + 20; } startStopX += 50; canvas.drawLine(startStopX, viewHeight - XY_LINE_SPACE, startStopX, viewHeight - XY_LINE_SPACE - 20, xyLinePaint); } // 画X轴字符串信息 int testX = 0; for (int x2 = 0; x2 < xListData.length; x2 ++) { if (testX == 0) { testX = 110; } testX += 100; xTextLocation[x2] = testX; // 记录X轴方向的文字位置 canvas.drawText(xListData[x2], testX,viewHeight - XY_LINE_SPACE + 40, xyLinePaint); } // 画七个点，X轴方向位置一直不变，Y轴方向的位置是变化的 for (int dianXY = 0; dianXY < xListData.length - 1; dianXY ++) { standardRatePaint.getTextBounds(xListData[dianXY], 0, xListData[dianXY].length(), rect); changeY = changYList[dianXY]; // 如果不等于最后一个，就可以+1 Log.d(TAG, "dianXY:" + dianXY + " changYList.length:" + changYList.length); if (dianXY < changYList.length - 1) { changStopY = changYList[dianXY + 1]; } if (changeY > bottomeDemarcation) { changeY = bottomeDemarcation; } else if (changeY < topDemarcation) { changeY = topDemarcation; } if (changStopY > bottomeDemarcation) { changStopY = bottomeDemarcation; } else if (changStopY < topDemarcation) { changStopY = topDemarcation; } Log.d(TAG, "rect.width():" + rect.width() + " bottomeDemarcation:" + bottomeDemarcation + " topDemarcation:" + topDemarcation + " changeY:" + changeY); standardRatePaint.getTextBounds(yListData[0], 0, yListData[0].length(), rect); canvas.drawCircle(xTextLocation[dianXY] + (rect.width()) ,changeY - rect.height(),10, standardRatePaint); // 画线 开始的X轴与Y轴要增加，结束的X轴与Y轴要减少 if (dianXY < xListData.length - 2) { changeY -= rect.height(); // changStopY += rect.height(); changStopY -= rect.height(); /*changeY += 10; changStopY -= 10;*/ // 画线，线的走向是根据点走的 canvas.drawLine(xTextLocation[dianXY] + (rect.width() + 8), changeY, xTextLocation[dianXY > xListData.length ? xListData.length : dianXY + 1] + (rect.width() - 8), changStopY, standardRatePaint); } /** * 真惠存利率区域 */ changeYHuicun = changYHuicunList[dianXY]; // 如果不等于最后一个，就可以+1 Log.d(TAG, "changYHuicunList.length:" + changYHuicunList.length); if (dianXY < changYHuicunList.length - 1) { changeStopYHuicun = changYHuicunList[dianXY + 1]; } if (changeYHuicun > bottomeDemarcation) { changeYHuicun = bottomeDemarcation; } else if (changeYHuicun < topDemarcation) { changeYHuicun = topDemarcation; } if (changeStopYHuicun > bottomeDemarcation) { changeStopYHuicun = bottomeDemarcation; } else if (changeStopYHuicun < topDemarcation) { changeStopYHuicun = topDemarcation; } trueHuicunReatPaint.getTextBounds(yListData[0], 0, yListData[0].length(), rect); canvas.drawCircle(xTextLocation[dianXY] + (rect.width()) ,changeYHuicun - rect.height(),10, trueHuicunReatPaint); // 画线 开始的X轴与Y轴要增加，结束的X轴与Y轴要减少 if (dianXY < xListData.length - 2) { changeYHuicun -= rect.height(); changeStopYHuicun -= rect.height(); /*changeY += 10; changStopY -= 10;*/ // 画线，线的走向是根据点走的 canvas.drawLine(xTextLocation[dianXY] + (rect.width() + 8), changeYHuicun, xTextLocation[dianXY > xListData.length ? xListData.length : dianXY + 1] + (rect.width() - 8), changeStopYHuicun, trueHuicunReatPaint); } } // 画两个描述：基准利率（%） 真惠存利率（%） int heightLineCircle = XY_LINE_SPACE - (XY_LINE_SPACE / 2); int radius = 10; // 先画一个点 canvas.drawCircle(xTextLocation[2], heightLineCircle, radius, standardRatePaint); // 画点的左边横线 canvas.drawLine(xTextLocation[2] - 6, heightLineCircle, xTextLocation[2] - 70, heightLineCircle, standardRatePaint); // 画点的右边横线 canvas.drawLine(xTextLocation[2] + 6,heightLineCircle,xTextLocation[2] + 70, heightLineCircle, standardRatePaint); // 画文字 canvas.drawText("基准利率（%）", xTextLocation[2] - 90, heightLineCircle + 50, textInfoPaint); // 先画一个点 canvas.drawCircle(xTextLocation[5], heightLineCircle, radius,trueHuicunReatPaint); canvas.drawLine(xTextLocation[5] - 6, heightLineCircle, xTextLocation[5] - 70, heightLineCircle, trueHuicunReatPaint); canvas.drawLine(xTextLocation[5] + 6, heightLineCircle, xTextLocation[5] + 70, heightLineCircle, trueHuicunReatPaint); canvas.drawText("真惠存利率（%）", xTextLocation[5] - 90, heightLineCircle + 50, textInfoPaint); } /** * dp转px * @param dp * @return */ /* private int dip2px(int dp) { float density = getContext().getResources().getDisplayMetrics().density; return (int) (dp * density + 0.5); }*/ }