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

最新推荐文章于 2024-06-02 21:48:54 发布
最新推荐文章于 2024-06-02 21:48:54 发布
阅读量485 收藏
点赞数
文章标签： 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自定义折线图可左右滑动,Android自定义View实现折线图效果
weixin_29095587的博客
05-25 862
下面就是结果图(每种状态用一个表情图片表示)：一、主页面的布局文件如下：xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"xmlns:app="http://...
Android 自定义天气趋势图,Android之自定义控件实现天气温度折线图和饼状图
weixin_29795345的博客
05-26 846
以前写了个天气的APP，最近把他更新了一个版本，就抽取其中的天气温度折现图这个功能写了这篇博客，来与大家分享，希望对你有所帮助。效果如图：image代码MainActivity.Java/***** 饼状图和天气折线图*/public class MainActivity extends AppCompatActivity {private WeatnerChartView chart1;priv...
android自定义曲线控件,Android自定义折线图
weixin_35452656的博客
05-25 209
今天来撸一个折线图，斜体文本给我整的直难受，当初找了半天就是没有正常能用的， 后来费了半天劲才整明白，哎，画布真是有点搞不懂，不多说，先上图；image.pngimage.png先来初始化一下/*** 初始化画笔*/private void initPaint() {xyPaint = new Paint();xyPaint.setAntiAlias(true);xyPaint.setStroke...
Android 简单/简易折线图的实现
qimeng54321的博客
06-02 138
**创建视图View：LineChart ** 创建lineChart的XML布局放进layout目录里，名称fragment_zt_fragment 封装进入Fragment，方便使用（创建Zt_fragment java类继承Fragment） 具体使用 ** activity对应的布局** ** drawable资源,名称：radius_background04.xml** 这个东西的二次开发性蛮高的，可以根据自己的项目要求进行更改，另外通过取消线条然后再添加线条（数据跟随改变）还可以实现动态效果。
android自定义曲线控件,Android自定义折线图（可拖动显示）
weixin_42502838的博客
05-25 362
废话不多说先上图咯图一至于怎么做呢 咱们可以先获取下折线图数据分析一波{"code": 200,"message": "","data": {"list": [{"day": "2020-10-22","readCount": 0,"okGroupCount": 0,"streamCount": 0,"buyCount": 0},{"day": "2020-10-21","readCount": ...
Android 自定义坐标曲线图（二）
怎么可以吃恐龙呢
03-29 591
继上一篇文章，点击点提示信息，不再使用popupwindow或dialog，还是通过自定义，引入xml布局来实现，适合运用到页面只有一个折线图，也适合RecyclerView中出现多个折线图的情况。
android自定义光滑的曲线图,Android自定义可左右滑动和点击的折线图
weixin_31589331的博客
05-25 881
前言前几天有小盆友让我写一个折线图，可以点击，可以左右滑动。对于折线肯定有很多项目都使用过，所以网上肯定也有很多demo，像AndroidChart、HelloChart之类的，功能相当丰富，效果也很赞，但是太重了，其他的小demo又不符合要求，当然了，我写的自定义折线图的思想也有来自这些小demo，对他们表示感谢。效果图废话不多说，先上效果图：效果是不是很赞，如果上图满足你的需求，那就继续往下看...
Android自定义View实现折线统计图
qq_41008818的博客
12-27 629
Android自定义View实现折线统计图
Android自定义View——一个通用的折线趋势图组件
2401_84520118的博客
04-27 798
【Android 详细知识点思维脑图（技能树）】我个人是做Android开发，已经有十来年了，目前在某创业公司任职CTO兼系统架构师。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。
Android 自定义View之绘制折线图、曲线图
huangyi
07-13 5932
Android 自定义View之绘制折线图、曲线图。上一篇文章根据之前大学同学的一个需求画了一个矩形渐变对比效果图，这篇文章给大家分享一个绘制折线图和曲线图的案列。效果如下：
Android自定义View简易折线图控件（二）
01-04
继续练习自定义View，这次带来的是简易折线图，支持坐标点点击监听，效果如下： 画坐标轴、画刻度、画点、连线。。x、y轴的数据范围是写死的 1 <= x <= 7 ，1 <= y <= 70 。。写活的话涉及到坐标轴刻度...
Android自定义可左右滑动和点击的折线图
08-26
Android自定义可左右滑动和点击的折线图是一种非常实用的图表控件，能够满足各种项目的需求。通过自定义view，开发者可以自由地设置折线图的样式、颜色、文字大小等属性，实现了高度的自定义性。 首先，在自定义...
Android自定义控件
06-10
本压缩包文件"Android自定义控件"提供了一系列的手工绘制的视图组件，涵盖了饼状图、雷达图、阴阳鱼、不规则按钮、贝塞尔曲线、圆形进度条、弧形进度条、折线图、涂鸦和波浪等丰富的自定义视图。这些控件不仅展示出...
自定义折线图Demo
02-18
通过学习和实践"自定义折线图Demo"，开发者不仅能掌握自定义控件的基本原理，还能深入了解Android图形绘制机制，提升在复杂UI设计上的能力。这个Demo的应用场景广泛，可应用于数据分析、股票图表、健康监测等多种...
自定义控件仿天气折线图的绘制，有天气图片 温度显示等
11-07
本文将深入探讨如何根据提供的标题和描述，创建一个自定义控件来模仿天气的折线图，其中包括天气图片和温度显示功能。我们将从以下几个方面进行讨论： 1. **自定义View的基本结构** 自定义控件通常继承自`View`或`...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
最新发布
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值