android自定义曲线控件,Android自定义控件实现折线图

最新推荐文章于 2024-06-02 21:48:54 发布
最新推荐文章于 2024-06-02 21:48:54 发布
阅读量482 收藏
点赞数
文章标签： android自定义曲线控件

本文实例实现一个如下图所示的Android折线图，供大家参考，具体内容如下

b3f950c65bf8799d0ef088daa344918d.png

36f00ed2da1a1ce510f3973078d1ef80.png

94b837de8fb3b5e0dd27b24f8f183839.png

首先是控件绘图区域的划分，控件左边取一小部分(控件总宽度的八分之一)绘制表头，右边剩余的部分绘制表格

确定表格的行列数，首先绘制一个三行八列的网格，设置好行列的坐标后开始绘制

/*绘制三条横线*/

for(int i=0;i<3;i++){

canvas.drawLine(textWide, mLineYs[i], totalWidth, mLineYs[i], mPaintLine);

}

/*绘制八条竖线*/

for(int i=0;i<8;i++){

canvas.drawLine(mLineXs[i], 0, mLineXs[i], totalHeight, mPaintLine);

}

网格绘制完成后，开始绘制折线图

根据输入的节点数据，分别绘制两条折线

通过canvas的drawLine方法依次连接两点即可

在每个数据节点处绘制一个小圆，突出显示

/*绘制第一条折线的路径*/

for (int i = 0; i < mPerformance_1.length - 1; i++) {

/*折线图的折线的画笔设置粗一点*/

mPaintLine.setStrokeWidth(5);

/*计算当前节点的坐标值*/

float prePointX =mLineXs[i];

float prePointY =mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_1[i].type]) * animCurrentValue;

/*计算下一个节点的坐标值*/

float nextPointX=mLineXs[i + 1];

float nextPointY=mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_1[i + 1].type]) * animCurrentValue;

/*连接当前坐标和下一个坐标，绘制线段*/

canvas.drawLine(prePointX, prePointY, nextPointX, nextPointY, mPaintLine1);

/*当前节点坐标处绘制小圆*/

canvas.drawCircle(prePointX, prePointY, mSmallDotRadius, mPointPaint);

}

两条折线重合的地方，需要特殊考虑，比如希望两条折线重合的地方折线变为白色

设置下两条折线的画笔即可

mPaintLine2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

mPaintLine1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

934e737722c3a4c031a4b2d66c12924d.png

测试代码及效果;

final Random random=new Random();

final LineChartView myView=(LineChartView)findViewById(R.id.custom_view);

final LineChartView.Performance[] performances1=new LineChartView.Performance[8];

final LineChartView.Performance[] performances2=new LineChartView.Performance[8];

myView.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v){

for(int i=0;i

switch (random.nextInt(2016)%3){

case 0:

performances1[i]= LineChartView.Performance.WIN;

break;

case 1:

performances1[i]= LineChartView.Performance.DRAW;

break;

case 2:

performances1[i]= LineChartView.Performance.LOSE;

break;

default:

performances1[i]= LineChartView.Performance.LOSE;

break;

}

switch (random.nextInt(2016)%3){

case 0:

performances2[i]= LineChartView.Performance.WIN;

break;

case 1:

performances2[i]= LineChartView.Performance.DRAW;

break;

case 2:

performances2[i]= LineChartView.Performance.LOSE;

break;

default:

performances1[i]= LineChartView.Performance.LOSE;

break;

}

}

myView.setPerformances(performances1,performances2);

}

});

2eb3c4f8ea49d96c04322698a677cc99.gif

完整代码如下：

public class LineChartView extends View {

private Context context;

/*动画插值器*/

DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();

/*动画刷新的次数*/

private int mDuration = 10;

/*当前动画进度值*/

private int mCurrentTime = 0;

private Performance[] mPerformance_1, mPerformance_2;

/*两条折线的颜色*/

private int mLineColor1, mLineColor2;

/*绘制表头文字画笔*/

private Paint mPaintText = new Paint();

/*绘制表格的画笔*/

private Paint mPaintLine = new Paint();

/*第一条折线的画笔*/

private Paint mPaintLine1 =new Paint();

/*第二条折线的画笔*/

private Paint mPaintLine2 =new Paint();

/*坐标点的小圆点画笔*/

private Paint mPointPaint = new Paint();

private float mSmallDotRadius = 4;

private TypedValue typedValue;

private int mPaintClolor;

/*Handler刷新界面产生动画效果*/

private Handler mHandler = new Handler();

private Runnable mAnimation = new Runnable() {

@Override

public void run() {

if (mCurrentTime < mDuration) {

mCurrentTime++;

LineChartView.this.invalidate();

}

}

};

public LineChartView(Context context) {

super(context);

this.context=context;

init();

}

public LineChartView(Context context, AttributeSet attrs) {

super(context, attrs);

this.context=context;

init();

}

public LineChartView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.context=context;

init();

}

public enum Performance {

WIN(0),

DRAW(1),

LOSE(2);

public int type;

Performance(int type) {

this.type = type;

}

}

public void setPerformances(Performance[] performance1, Performance[] performance2) {

if (performance1 == null) {

performance1 = new Performance[0];

}

if (performance2 == null) {

performance2 = new Performance[0];

}

mPerformance_1 = Arrays.copyOf(performance1, performance1.length > 8 ? 8 : performance1.length);

mPerformance_2 = Arrays.copyOf(performance2, performance2.length > 8 ? 8 : performance2.length);

if (isShown()) {

mCurrentTime = 0;

this.invalidate();

}

}

/**

* 设置折线1的颜色

*

* @param mLineColor1

*/

public void setLineColor1(int mLineColor1) {

this.mLineColor1 = mLineColor1;

}

/**

* 设置折线2的颜色

*

* @param mLineColor2

*/

public void setLineColor2(int mLineColor2) {

this.mLineColor2 = mLineColor2;

}

private void init() {

mLineColor1=Color.BLUE;

mLineColor2 = Color.GREEN;

typedValue=new TypedValue();

context.getTheme().resolveAttribute(R.attr.title_bar,typedValue,true);

mPaintClolor =getResources().getColor(typedValue.resourceId);

final LineChartView.Performance[] performances1=new LineChartView.Performance[8];

final LineChartView.Performance[] performances2=new LineChartView.Performance[8];

final Random random=new Random();

for(int i=0;i

switch (random.nextInt(2016)%3){

case 0:

performances1[i]= LineChartView.Performance.WIN;

break;

case 1:

performances1[i]= LineChartView.Performance.DRAW;

break;

case 2:

performances1[i]= LineChartView.Performance.LOSE;

break;

default:

performances1[i]= LineChartView.Performance.LOSE;

break;

}

switch (random.nextInt(2016)%3){

case 0:

performances2[i]= LineChartView.Performance.WIN;

break;

case 1:

performances2[i]= LineChartView.Performance.DRAW;

break;

case 2:

performances2[i]= LineChartView.Performance.LOSE;

break;

default:

performances1[i]= LineChartView.Performance.LOSE;

break;

}

}

setPerformances(performances1,performances2);

}

/**

* @param canvas

*/

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

/*获取控件总宽高*/

float totalWidth = getWidth();

float totalHeight = getHeight();

/*左边取总宽度的八分之一绘制表格头部*/

float textWide = totalWidth / 8;

/*左边留一点空白*/

float left_offset = 10;

/*折线图的总宽度等于控件的总宽度减去表头和留白*/

float chartWide = totalWidth - textWide - left_offset;

/*一共三行，设置每一行的垂直坐标*/

float[] mLineYs = new float[]{totalHeight / 8, totalHeight / 2, totalHeight * 7 / 8};

/*一共八列，设置每一列的水平坐标*/

float[] mLineXs = new float[]{

textWide + left_offset + chartWide * 0 / 8,

textWide + left_offset + chartWide * 1 / 8,

textWide + left_offset + chartWide * 2 / 8,

textWide + left_offset + chartWide * 3 / 8,

textWide + left_offset + chartWide * 4 / 8,

textWide + left_offset + chartWide * 5 / 8,

textWide + left_offset + chartWide * 6 / 8,

textWide + left_offset + chartWide * 7 / 8,

};

/*绘制表头文字*/

mPaintText.setStyle(Paint.Style.FILL);

mPaintText.setColor(mPaintClolor);

mPaintText.setAlpha(226);

mPaintText.setTextSize(28);

/*从中间开始绘制*/

mPaintText.setTextAlign(Paint.Align.CENTER);

/*测量文字大小，并计算偏移量*/

Paint.FontMetrics fontMetrics = mPaintText.getFontMetrics();

float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;

canvas.drawText("胜场", textWide / 2, mLineYs[0] + textBaseLineOffset, mPaintText);

canvas.drawText("平局", textWide / 2, mLineYs[1] + textBaseLineOffset, mPaintText);

canvas.drawText("负场", textWide / 2, mLineYs[2] + textBaseLineOffset, mPaintText);

/*绘制表格画笔设置*/

mPaintLine.setStyle(Paint.Style.STROKE);

mPaintLine.setAntiAlias(true);

mPaintLine.setColor(mPaintClolor);

mPaintLine.setAlpha(80);

mPaintLine.setStrokeWidth(1);

/*开始绘制表格*/

/*绘制三条横线*/

for(int i=0;i<3;i++){

canvas.drawLine(textWide, mLineYs[i], totalWidth, mLineYs[i], mPaintLine);

}

/*绘制八条竖线*/

for(int i=0;i<8;i++){

canvas.drawLine(mLineXs[i], 0, mLineXs[i], totalHeight, mPaintLine);

}

/*折线图画笔设置*/

mPaintLine1.setStyle(Paint.Style.STROKE);

/*设置透明度，取值范围为0~255，数值越小越透明，0表示完全透明*/

mPaintLine1.setAlpha(0);

mPaintLine1.setAntiAlias(true);

mPaintLine1.setColor(mLineColor1);

mPaintLine1.setStrokeWidth(5);

mPaintLine2.setStyle(Paint.Style.STROKE);

/*设置透明度，取值范围为0~255，数值越小越透明，0表示完全透明*/

mPaintLine2.setAlpha(0);

mPaintLine2.setAntiAlias(true);

mPaintLine2.setColor(mLineColor2);

mPaintLine2.setStrokeWidth(5);

if (typedValue.resourceId==R.color.white){

/*PorterDuff.Mode.SCREEN 上下层都显示。*/

mPaintLine2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

mPaintLine1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

}else {

/*PorterDuff.Mode.DARKEN 上下层都显示。变暗*/

mPaintLine2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));

mPaintLine1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));

}

/*画节点处的小圆点的画笔设置*/

mPointPaint.setStyle(Paint.Style.STROKE);

mPointPaint.setAntiAlias(true);

mPointPaint.setColor(mPaintClolor);

/*计算当前动画进度对应的数值*/

float animCurrentValue = mDecelerateInterpolator.getInterpolation(1.0f * mCurrentTime / mDuration);

mPaintLine.setColor(mLineColor1);

/*绘制第一条折线的路径*/

for (int i = 0; i < mPerformance_1.length - 1; i++) {

/*折线图的折线的画笔设置粗一点*/

mPaintLine.setStrokeWidth(5);

/*计算当前节点的坐标值*/

float prePointX =mLineXs[i];

float prePointY =mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_1[i].type]) * animCurrentValue;

/*计算下一个节点的坐标值*/

float nextPointX=mLineXs[i + 1];

float nextPointY=mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_1[i + 1].type]) * animCurrentValue;

/*连接当前坐标和下一个坐标，绘制线段*/

canvas.drawLine(prePointX, prePointY, nextPointX, nextPointY, mPaintLine1);

/*当前节点坐标处绘制小圆*/

canvas.drawCircle(prePointX, prePointY, mSmallDotRadius, mPointPaint);

}

/*第一个折线图的最后一个节点的坐标*/

float lastPointX=mLineXs[mPerformance_1.length - 1];

float lastPointY= mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_1[mPerformance_1.length - 1].type]) * animCurrentValue;

/*绘制最后一个节点的外围小圆*/

canvas.drawCircle(lastPointX,lastPointY ,mSmallDotRadius, mPointPaint);

/*绘制第二条折线*/

mPaintLine.setColor(mLineColor2);

for (int i = 0; i < mPerformance_2.length - 1; i++) {

/*折线图的折线的画笔设置粗一点*/

mPaintLine.setStrokeWidth(5);

/*计算当前节点的坐标值*/

float prePointX =mLineXs[i];

float prePointY =mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_2[i].type]) * animCurrentValue;

/*计算下一个节点的坐标值*/

float nextPointX=mLineXs[i + 1];

float nextPointY=mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_2[i + 1].type]) * animCurrentValue;

/*连接当前坐标和下一个坐标，绘制线段*/

canvas.drawLine(prePointX, prePointY, nextPointX, nextPointY, mPaintLine2);

/*当前节点坐标处绘制小圆*/

canvas.drawCircle(prePointX, prePointY, mSmallDotRadius, mPointPaint);

}

/*第一个折线图的最后一个节点的坐标*/

lastPointX=mLineXs[mPerformance_2.length - 1];

lastPointY= mLineYs[2] - (mLineYs[2] - mLineYs[mPerformance_2[mPerformance_2.length - 1].type]) * animCurrentValue;

/*绘制最后一个节点的外围小圆*/

canvas.drawCircle(lastPointX,lastPointY ,mSmallDotRadius, mPointPaint);

mHandler.postDelayed(mAnimation, 20);

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Cherry-GeGe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android图表控件MPChart-柱状+折线组合图表基本使用
czssltt的博客
03-24 9786
一、效果图 双模式效果：柱形图加折线图，双y轴，从右向左滑动… 二、实现代码 1. 加入依赖 implementation 'com.github.PhilJay:MPAndroidChart:v3.0.2' 2. 布局中加入组合图标签 <com.github.mikephil.charting.charts.CombinedChart android:id="@+id/chart" android:layout_width="ma
Android开发自定义控件实现一个折线图
聚精会神搞建设
05-18 4996
实现一个如下图所示的折线图 首先是控件绘图区域的划分，控件左边取一小部分（控件总宽度的八分之一）绘制表头，右边剩余的部分绘制表格 确定表格的行列数，首先绘制一个三行八列的网格，设置好行列的坐标后开始绘制 /*绘制三条横线*/ canvas.drawLine(textWide, mLineYs[0], totalWidth, mLineYs[0], mPaintLine);
Android自定义View——曲线图
热门推荐
菜鸟的自我修养
09-27 1万+
之前在博客里面已经介绍过了一种自定义绘制饼图的方法，今天再来介绍一种自定义绘制曲线图的方法。博主之前做过折线图，但是这里需要曲线图，简单的 drawLine 肯定是不行了，查了资料有人推荐用贝塞尔曲线绘制，这里对贝塞尔曲线就不做详细说明了。用贝塞尔曲线绘图的，首先对初学者来说比较麻烦，控制点的不易确定，再者，我看了网上的一些例子，发现贝塞尔曲线画出来的曲线图，跟我们平时画的曲线图还是有一点出入的，
android自定义曲线控件,Android自定义折线图
weixin_35036735的博客
05-25 128
list = new ArrayList<>();private Listlist2 = new ArrayList<>();private Canvas canvas;public yuanxing(Context context) {super(context);initPaint();}public yuanxing(Context context, @Nullabl...
Android 简单/简易折线图的实现
最新发布
qimeng54321的博客
06-02 127
**创建视图View：LineChart ** 创建lineChart的XML布局放进layout目录里，名称fragment_zt_fragment 封装进入Fragment，方便使用（创建Zt_fragment java类继承Fragment） 具体使用 ** activity对应的布局** ** drawable资源,名称：radius_background04.xml** 这个东西的二次开发性蛮高的，可以根据自己的项目要求进行更改，另外通过取消线条然后再添加线条（数据跟随改变）还可以实现动态效果。
android自定义View之曲线图
05-03
一个简单的曲线图来标识数据，开始以为很简单，android已经有那么多的开源图表库了，什么achartenginee,hellochart，mpandroidchart等等，下载Demo一找，都强大到有点不适合我这个小小的展示功能了，直是无语了。于是只能自已去画了，继承自View去重绘。
Android MPAndroidChart --折线图
qq_38524537的博客
02-09 4951
Android MPAndroidChart -- 折线图
android自定义控件教程,Android自定义控件的一般方法
weixin_33544435的博客
05-25 1676
前言在开发AndroidUI时，如果想要做出自己想要的特定的外观效果，就不可能只依赖Android原生组件，虽然说随着Android的版本更迭其原生组件的美观度有了很大的提升，但是对于一个完整的App来说，它们很难与我们想要的整体效果保持一致，所以这个时候我们就需要自定义组件来实现特定的效果。本文将介绍实现基本的自定义组件的方法，并完成一个自定义的EditText做为示例。自定义组件基本步骤继承V...
Android自定义View简易折线图控件（二）
01-04
继续练习自定义View，这次带来的是简易折线图，支持坐标点点击监听，效果如下： 画坐标轴、画刻度、画点、连线。。x、y轴的数据范围是写死的 1 <= x <= 7 ，1 <= y <= 70 。。写活的话涉及到坐标轴刻度...
Android自定义可左右滑动和点击的折线图
08-26
Android自定义可左右滑动和点击的折线图是一种非常实用的图表控件，能够满足各种项目的需求。通过自定义view，开发者可以自由地设置折线图的样式、颜色、文字大小等属性，实现了高度的自定义性。 首先，在自定义...
Android自定义控件
06-10
本压缩包文件"Android自定义控件"提供了一系列的手工绘制的视图组件，涵盖了饼状图、雷达图、阴阳鱼、不规则按钮、贝塞尔曲线、圆形进度条、弧形进度条、折线图、涂鸦和波浪等丰富的自定义视图。这些控件不仅展示出...
android自定义折线图表格控件
04-16
android自定义折线图表格控件 采用自己在画布绘制实现的一个折线图控件 支持多条线的展示以及各种自定义的方法
android自定义折线图曲线图
10-15
绘制简单折线图表，和绘制复杂的曲线图表，支持多条折线曲线，可以设置X,Y值，设置折线颜色等，和颜色渐变
自定义折线图Demo
02-18
通过学习和实践"自定义折线图Demo"，开发者不仅能掌握自定义控件的基本原理，还能深入了解Android图形绘制机制，提升在复杂UI设计上的能力。这个Demo的应用场景广泛，可应用于数据分析、股票图表、健康监测等多种...
自定义控件仿天气折线图的绘制，有天气图片 温度显示等
11-07
本文将深入探讨如何根据提供的标题和描述，创建一个自定义控件来模仿天气的折线图，其中包括天气图片和温度显示功能。我们将从以下几个方面进行讨论： 1. **自定义View的基本结构** 自定义控件通常继承自`View`或`...
Android 曲线图-自定义控件
qq_37630270的博客
07-29 970
android 曲线图
MPAndroidChart之动态折线图
A125679880的博客
04-14 2047
MPAndroidChart之动态折线图
安卓自定义控件之折线图
子敬的技术博客
07-03 726
自定义控件之折线图 目标： 效果图： 需求： 1、      折线图是固定的，不会滑动，但是随着点数的增多间距逐渐变小（需要在一页中可以看见全部的点）。 2、      横轴的数字也是随着点数的增多保持好间距。 3、      折现需要平滑一点 实现思路 因为没有滑动功能，所以思路比较简单。就是画线和画数字。根据点的多少来决定纵轴间的间距和下面数字之间的间距。
android 自定义进度条控件
09-19
好的，关于 Android 自定义进度条控件的实现，我可以为您提供一些思路和示例代码。 首先，我们需要继承自 View 或者 ProgressBar，然后在 onDraw 方法中实现自己的绘制逻辑。具体来说，需要绘制背景、进度条和文本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值