登录
当前位置： 首页 > 编程笔记 >

Android自定义可左右滑动和点击的折线图

殷德本
2023-03-14
本文向大家介绍Android自定义可左右滑动和点击的折线图，包括了Android自定义可左右滑动和点击的折线图的使用技巧和注意事项，需要的朋友参考一下

前言

       前几天有小盆友让我写一个折线图，可以点击，可以左右滑动。对于折线肯定有很多项目都使用过，所以网上肯定也有很多demo，像AndroidChart、HelloChart之类的，功能相当丰富，效果也很赞，但是太重了，其他的小demo又不符合要求，当然了，我写的自定义折线图的思想也有来自这些小demo，对他们表示感谢。

效果图

      废话不多说，先上效果图：

效果是不是很赞，如果上图满足你的需求，那就继续往下看。

自定义折线图的步骤：

1、自定义view所需要的属性

确定所需要的自定义view的属性，然后在res/values目录下，新建一个attrs.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!-- xy坐标轴颜色 -->
 <attr name="xylinecolor" format="color" />
 <!-- xy坐标轴宽度 -->
 <attr name="xylinewidth" format="dimension" />
 <!-- xy坐标轴文字颜色 -->
 <attr name="xytextcolor" format="color" />
 <!-- xy坐标轴文字大小 -->
 <attr name="xytextsize" format="dimension" />
 <!-- 折线图中折线的颜色 -->
 <attr name="linecolor" format="color" />
 <!-- x轴各个坐标点水平间距 -->
 <attr name="interval" format="dimension" />
 <!-- 背景颜色 -->
 <attr name="bgcolor" format="color" />
 <!--是否在ACTION_UP时，根据速度进行自滑动，建议关闭，过于占用GPU-->
 <attr name="isScroll" format="boolean" />
 <declare-styleable name="chartView">
  <attr name="xylinecolor" />
  <attr name="xylinewidth" />
  <attr name="xytextcolor" />
  <attr name="xytextsize" />
  <attr name="linecolor" />
  <attr name="interval" />
  <attr name="bgcolor" />
  <attr name="isScroll" />
 </declare-styleable>
</resources>

2、在自定义view的构造方法中获取我们的自定义属性：

public ChartView(Context context) {
  this(context, null);
 }
 
 public ChartView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs, defStyleAttr);
  initPaint();
 }
 
 /**
  * 初始化
  *
  * @param context
  * @param attrs
  * @param defStyleAttr
  */
 private void init(Context context, AttributeSet attrs, int defStyleAttr) {
  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.chartView, defStyleAttr, 0);
  int count = array.getIndexCount();
  for (int i = 0; i < count; i++) {
   int attr = array.getIndex(i);
   switch (attr) {
    case R.styleable.chartView_xylinecolor://xy坐标轴颜色
     xylinecolor = array.getColor(attr, xylinecolor);
     break;
    case R.styleable.chartView_xylinewidth://xy坐标轴宽度
     xylinewidth = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, xylinewidth, getResources().getDisplayMetrics()));
     break;
    case R.styleable.chartView_xytextcolor://xy坐标轴文字颜色
     xytextcolor = array.getColor(attr, xytextcolor);
     break;
    case R.styleable.chartView_xytextsize://xy坐标轴文字大小
     xytextsize = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, xytextsize, getResources().getDisplayMetrics()));
     break;
    case R.styleable.chartView_linecolor://折线图中折线的颜色
     linecolor = array.getColor(attr, linecolor);
     break;
    case R.styleable.chartView_interval://x轴各个坐标点水平间距
     interval = (int) array.getDimension(attr, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, interval, getResources().getDisplayMetrics()));
     break;
    case R.styleable.chartView_bgcolor: //背景颜色
     bgcolor = array.getColor(attr, bgcolor);
     break;
    case R.styleable.chartView_isScroll://是否在ACTION_UP时，根据速度进行自滑动
     isScroll = array.getBoolean(attr, isScroll);
     break;
   }
  }
  array.recycle();
 }
 /**
  * 初始化畫筆
  */
 private void initPaint() {
  xyPaint = new Paint();
  xyPaint.setAntiAlias(true);
  xyPaint.setStrokeWidth(xylinewidth);
  xyPaint.setStrokeCap(Paint.Cap.ROUND);
  xyPaint.setColor(xylinecolor);
  xyTextPaint = new Paint();
  xyTextPaint.setAntiAlias(true);
  xyTextPaint.setTextSize(xytextsize);
  xyTextPaint.setStrokeCap(Paint.Cap.ROUND);
  xyTextPaint.setColor(xytextcolor);
  xyTextPaint.setStyle(Paint.Style.STROKE);
  linePaint = new Paint();
  linePaint.setAntiAlias(true);
  linePaint.setStrokeWidth(xylinewidth);
  linePaint.setStrokeCap(Paint.Cap.ROUND);
  linePaint.setColor(linecolor);
  linePaint.setStyle(Paint.Style.STROKE);
 }

3、获取一写基本点

这些基本点包括：xy轴的原点坐标，第一个点的x轴的初始化坐标值以及其最大值和最小值。这些参数可以在onLayout（）方法里面获取。

 @Override
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
  if (changed) {
   //这里需要确定几个基本点，只有确定了xy轴原点坐标，第一个点的X坐标值及其最大最小值
   width = getWidth();
   height = getHeight();
   //Y轴文本最大宽度
   float textYWdith = getTextBounds("000", xyTextPaint).width();
   for (int i = 0; i < yValue.size(); i++) {//求取y轴文本最大的宽度
    float temp = getTextBounds(yValue.get(i) + "", xyTextPaint).width();
    if (temp > textYWdith)
     textYWdith = temp;
   }
   int dp2 = dpToPx(2);
   int dp3 = dpToPx(3);
   xOri = (int) (dp2 + textYWdith + dp2 + xylinewidth);//dp2是y轴文本距离左边，以及距离y轴的距离
//   //X轴文本最大高度
   xValueRect = getTextBounds("000", xyTextPaint);
   float textXHeight = xValueRect.height();
   for (int i = 0; i < xValue.size(); i++) {//求取x轴文本最大的高度
    Rect rect = getTextBounds(xValue.get(i) + "", xyTextPaint);
    if (rect.height() > textXHeight)
     textXHeight = rect.height();
    if (rect.width() > xValueRect.width())
     xValueRect = rect;
   }
   yOri = (int) (height - dp2 - textXHeight - dp3 - xylinewidth);//dp3是x轴文本距离底边，dp2是x轴文本距离x轴的距离
   xInit = interval + xOri;
   minXInit = width - (width - xOri) * 0.1f - interval * (xValue.size() - 1);//减去0.1f是因为最后一个X周刻度距离右边的长度为X轴可见长度的10%
   maxXInit = xInit;
  }
  super.onLayout(changed, left, top, right, bottom);
 }

4、利用ondraw（）方法进行绘制

 @Override
 protected void onDraw(Canvas canvas) {
//  super.onDraw(canvas);
  canvas.drawColor(bgcolor);
  drawXY(canvas);
  drawBrokenLineAndPoint(canvas);
 }
 
 /**
  * 绘制折线和折线交点处对应的点
  *
  * @param canvas
  */
 private void drawBrokenLineAndPoint(Canvas canvas) {
  if (xValue.size() <= 0)
   return;
  //重新开一个图层
  int layerId = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
  drawBrokenLine(canvas);
  drawBrokenPoint(canvas);
  // 将折线超出x轴坐标的部分截取掉
  linePaint.setStyle(Paint.Style.FILL);
  linePaint.setColor(bgcolor);
  linePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
  RectF rectF = new RectF(0, 0, xOri, height);
  canvas.drawRect(rectF, linePaint);
  linePaint.setXfermode(null);
  //保存图层
  canvas.restoreToCount(layerId);
 }
 /**
  * 绘制折线对应的点
  *
  * @param canvas
  */
 private void drawBrokenPoint(Canvas canvas) {
  float dp2 = dpToPx(2);
  float dp4 = dpToPx(4);
  float dp7 = dpToPx(7);
  //绘制节点对应的原点
  for (int i = 0; i < xValue.size(); i++) {
   float x = xInit + interval * i;
   float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
   //绘制选中的点
   if (i == selectIndex - 1) {
    linePaint.setStyle(Paint.Style.FILL);
    linePaint.setColor(0xffd0f3f2);
    canvas.drawCircle(x, y, dp7, linePaint);
    linePaint.setColor(0xff81dddb);
    canvas.drawCircle(x, y, dp4, linePaint);
    drawFloatTextBox(canvas, x, y - dp7, value.get(xValue.get(i)));
   }
   //绘制普通的节点
   linePaint.setStyle(Paint.Style.FILL);
   linePaint.setColor(Color.WHITE);
   canvas.drawCircle(x, y, dp2, linePaint);
   linePaint.setStyle(Paint.Style.STROKE);
   linePaint.setColor(linecolor);
   canvas.drawCircle(x, y, dp2, linePaint);
  }
 }
 /**
  * 绘制显示Y值的浮动框
  *
  * @param canvas
  * @param x
  * @param y
  * @param text
  */
 private void drawFloatTextBox(Canvas canvas, float x, float y, int text) {
  int dp6 = dpToPx(6);
  int dp18 = dpToPx(18);
  //p1
  Path path = new Path();
  path.moveTo(x, y);
  //p2
  path.lineTo(x - dp6, y - dp6);
  //p3
  path.lineTo(x - dp18, y - dp6);
  //p4
  path.lineTo(x - dp18, y - dp6 - dp18);
  //p5
  path.lineTo(x + dp18, y - dp6 - dp18);
  //p6
  path.lineTo(x + dp18, y - dp6);
  //p7
  path.lineTo(x + dp6, y - dp6);
  //p1
  path.lineTo(x, y);
  canvas.drawPath(path, linePaint);
  linePaint.setColor(Color.WHITE);
  linePaint.setTextSize(spToPx(14));
  Rect rect = getTextBounds(text + "", linePaint);
  canvas.drawText(text + "", x - rect.width() / 2, y - dp6 - (dp18 - rect.height()) / 2, linePaint);
 }
 /**
  * 绘制折线
  *
  * @param canvas
  */
 private void drawBrokenLine(Canvas canvas) {
  linePaint.setStyle(Paint.Style.STROKE);
  linePaint.setColor(linecolor);
  //绘制折线
  Path path = new Path();
  float x = xInit + interval * 0;
  float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(0)) / yValue.get(yValue.size() - 1);
  path.moveTo(x, y);
  for (int i = 1; i < xValue.size(); i++) {
   x = xInit + interval * i;
   y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
   path.lineTo(x, y);
  }
  canvas.drawPath(path, linePaint);
 }
 /**
  * 绘制XY坐标
  *
  * @param canvas
  */
 private void drawXY(Canvas canvas) {
  int length = dpToPx(4);//刻度的长度
  //绘制Y坐标
  canvas.drawLine(xOri - xylinewidth / 2, 0, xOri - xylinewidth / 2, yOri, xyPaint);
  //绘制y轴箭头
  xyPaint.setStyle(Paint.Style.STROKE);
  Path path = new Path();
  path.moveTo(xOri - xylinewidth / 2 - dpToPx(5), dpToPx(12));
  path.lineTo(xOri - xylinewidth / 2, xylinewidth / 2);
  path.lineTo(xOri - xylinewidth / 2 + dpToPx(5), dpToPx(12));
  canvas.drawPath(path, xyPaint);
  //绘制y轴刻度
  int yLength = (int) (yOri * (1 - 0.1f) / (yValue.size() - 1));//y轴上面空出10%,计算出y轴刻度间距
  for (int i = 0; i < yValue.size(); i++) {
   //绘制Y轴刻度
   canvas.drawLine(xOri, yOri - yLength * i + xylinewidth / 2, xOri + length, yOri - yLength * i + xylinewidth / 2, xyPaint);
   xyTextPaint.setColor(xytextcolor);
   //绘制Y轴文本
   String text = yValue.get(i) + "";
   Rect rect = getTextBounds(text, xyTextPaint);
   canvas.drawText(text, 0, text.length(), xOri - xylinewidth - dpToPx(2) - rect.width(), yOri - yLength * i + rect.height() / 2, xyTextPaint);
  }
  //绘制X轴坐标
  canvas.drawLine(xOri, yOri + xylinewidth / 2, width, yOri + xylinewidth / 2, xyPaint);
  //绘制x轴箭头
  xyPaint.setStyle(Paint.Style.STROKE);
  path = new Path();
  //整个X轴的长度
  float xLength = xInit + interval * (xValue.size() - 1) + (width - xOri) * 0.1f;
  if (xLength < width)
   xLength = width;
  path.moveTo(xLength - dpToPx(12), yOri + xylinewidth / 2 - dpToPx(5));
  path.lineTo(xLength - xylinewidth / 2, yOri + xylinewidth / 2);
  path.lineTo(xLength - dpToPx(12), yOri + xylinewidth / 2 + dpToPx(5));
  canvas.drawPath(path, xyPaint);
  //绘制x轴刻度
  for (int i = 0; i < xValue.size(); i++) {
   float x = xInit + interval * i;
   if (x >= xOri) {//只绘制从原点开始的区域
    xyTextPaint.setColor(xytextcolor);
    canvas.drawLine(x, yOri, x, yOri - length, xyPaint);
    //绘制X轴文本
    String text = xValue.get(i);
    Rect rect = getTextBounds(text, xyTextPaint);
    if (i == selectIndex - 1) {
     xyTextPaint.setColor(linecolor);
     canvas.drawText(text, 0, text.length(), x - rect.width() / 2, yOri + xylinewidth + dpToPx(2) + rect.height(), xyTextPaint);
     canvas.drawRoundRect(x - xValueRect.width() / 2 - dpToPx(3), yOri + xylinewidth + dpToPx(1), x + xValueRect.width() / 2 + dpToPx(3), yOri + xylinewidth + dpToPx(2) + xValueRect.height() + dpToPx(2), dpToPx(2), dpToPx(2), xyTextPaint);
    } else {
     canvas.drawText(text, 0, text.length(), x - rect.width() / 2, yOri + xylinewidth + dpToPx(2) + rect.height(), xyTextPaint);
    }
   }
  }
 }

5、点击的处理以及左右

重写ontouchEven()方法，来处理点击和滑动

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  if (isScrolling)
   return super.onTouchEvent(event);
  this.getParent().requestDisallowInterceptTouchEvent(true);//当该view获得点击事件，就请求父控件不拦截事件
  obtainVelocityTracker(event);
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    startX = event.getX();
    break;
   case MotionEvent.ACTION_MOVE:
    if (interval * xValue.size() > width - xOri) {//当期的宽度不足以呈现全部数据
     float dis = event.getX() - startX;
     startX = event.getX();
     if (xInit + dis < minXInit) {
      xInit = minXInit;
     } else if (xInit + dis > maxXInit) {
      xInit = maxXInit;
     } else {
      xInit = xInit + dis;
     }
     invalidate();
    }
    break;
   case MotionEvent.ACTION_UP:
    clickAction(event);
    scrollAfterActionUp();
    this.getParent().requestDisallowInterceptTouchEvent(false);
    recycleVelocityTracker();
    break;
   case MotionEvent.ACTION_CANCEL:
    this.getParent().requestDisallowInterceptTouchEvent(false);
    recycleVelocityTracker();
    break;
  }
  return true;
 }

点击的处理是计算当前点击的X、Y坐标范围进行判断点击的是那个点

 /**
  * 点击X轴坐标或者折线节点
  *
  * @param event
  */
 private void clickAction(MotionEvent event) {
  int dp8 = dpToPx(8);
  float eventX = event.getX();
  float eventY = event.getY();
  for (int i = 0; i < xValue.size(); i++) {
   //节点
   float x = xInit + interval * i;
   float y = yOri - yOri * (1 - 0.1f) * value.get(xValue.get(i)) / yValue.get(yValue.size() - 1);
   if (eventX >= x - dp8 && eventX <= x + dp8 &&
     eventY >= y - dp8 && eventY <= y + dp8 && selectIndex != i + 1) {//每个节点周围8dp都是可点击区域
    selectIndex = i + 1;
    invalidate();
    return;
   }
   //X轴刻度
   String text = xValue.get(i);
   Rect rect = getTextBounds(text, xyTextPaint);
   x = xInit + interval * i;
   y = yOri + xylinewidth + dpToPx(2);
   if (eventX >= x - rect.width() / 2 - dp8 && eventX <= x + rect.width() + dp8 / 2 &&
     eventY >= y - dp8 && eventY <= y + rect.height() + dp8 && selectIndex != i + 1) {
    selectIndex = i + 1;
    invalidate();
    return;
   }
  }
 }

处理滑动的原理，就是通过改变第一个点的X坐标，通过改变这个基本点，依次改变后面的X轴的点的坐标。

最后在布局里面应用就可以啦，我就不贴代码啦！

总结：

项目还是有缺点的：

（1）左右滑动时，抬起手指仍然可以快速滑动；代码里面给出了一种解决方案，但是太过于暂用资源，没有特殊要求不建议使用，所以给出一个boolean类型的自定义属性isScroll，true：启动，反之亦然；还有一种解决方案就是外面再加一层横向ScrollView，请读者自行解决，也很简单，只需要稍作修改即可。

（2）点击的时候忘记添加回调，只有添加了回调在可以在activity或者fragment里面获取点击的内容；代码很简单，自行脑补。

项目地址1
项目地址2

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

 类似资料：
  • Android自定义控件实现可左右滑动的导航条

    本文向大家介绍Android自定义控件实现可左右滑动的导航条，包括了Android自定义控件实现可左右滑动的导航条的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现可左右滑动导航条的具体代码，供大家参考，具体内容如下 先上效果图： 这个控件其实算是比较轻量级的，相信不少小伙伴都能做出来。因为项目中遇到了一些特殊的定制要求，所以就自己写了一个，这里放出来。 首先来分析下

  • Android嵌套RecyclerView左右滑动替代自定义view

    本文向大家介绍Android嵌套RecyclerView左右滑动替代自定义view，包括了Android嵌套RecyclerView左右滑动替代自定义view的使用技巧和注意事项，需要的朋友参考一下 以前的左右滑动效果采用自定义scrollview或者linearlayout来实现，recyclerview可以很好的做这个功能，一般的需求就是要么一个独立的左右滑动效果，要么在一个列表里的中间部分一

  • Android自定义左右或上下滑动翻页效果

    本文向大家介绍Android自定义左右或上下滑动翻页效果，包括了Android自定义左右或上下滑动翻页效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android自定义左右或上下滑动翻页展示的具体代码，供大家参考，具体内容如下 该自定义的效果和ViewPage+Fragment差不多 上下滑动翻页，继承ScrollView 左右滑动翻页，继承HorizontalScrollVi

  • Android自定义View实现左右滑动选择出生年份

    本文向大家介绍Android自定义View实现左右滑动选择出生年份，包括了Android自定义View实现左右滑动选择出生年份的使用技巧和注意事项，需要的朋友参考一下 自定义view的第三篇，模仿的是微博运动界面的个人出生日期设置view，先看看我的效果图： 支持设置初始年份，左右滑动选择出生年份，对应的TextView的值也会改变。这个动画效果弄了好久，感觉还是比较生硬，与微博那个还是有点区别。

  • jQuery：向左滑动和向右滑动

    问题内容： 我所看到的和jQuery的。左右滑动的功能/方式如何？ 问题答案： 您可以使用jQueryUI中的其他效果来执行此操作： 快速示例：

  • 从左右两侧滑动的Android滑动菜单

    我试着让滑动抽屉菜单和脸书应用程序中的一样。我在这里提出了很多像这样的问题。找到了很多库，但它们都在不同的库中从左向右或从右向左滑动。我想让它从两侧滑动，通过顶部栏中的两个按钮从左向右和从右向左滑动。有人能帮我吗。 提前感谢。

相关阅读

jQuery：向左滑动和向右滑动Android手势左右滑动效果自定义Spring AOP左右+ @TransactionalAndroid自定义控件实现折线图Android 使用ViewPager实现图片左右循环滑动自动播放

相关文章

GWT Highcharts 折线图如何自定义视图 + 如何自定义异常GWT Google Charts 折线图2.5.0 构建一个可复用的自定义BaseAdapterOpenCV绘制折线

相关问答

如何从右向左滑动菜单如何在android中设置左右两个自定义动作栏按钮？滑动ExandableListView在DrawerLayout表单从右到左在java中，如何将JTable上的左键点击动作调整为右键点击？为android google-maps-api-2中的自定义标记定义一个可点击/可触摸区域

相关工具

自定义Table View折叠效果左右菜单Demo气球左右摇摆折线图Demo自定义的TabBar

相关文档

Android 开发技术前线进击的 PythonAndroid Animation 动画详解Java 并发性和多线程自己动手写 servlet 容器
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.