android 多个折线图 最佳视野,自定义View_撸一个多层折线图

最新推荐文章于 2021-06-02 21:41:42 发布
最新推荐文章于 2021-06-02 21:41:42 发布
阅读量264 收藏
点赞数
文章标签： android 多个折线图 最佳视野

看到这个标题，可能有点发懵，啥叫多层折线图啊？这个是我自己取的名字，是因为那天我遇到了这样一个需求。

a7943fd329bb

UI图.png

呐！这还是一个宝塔型的折线图，根据常识，很容易就知道这里面的交互逻辑：一指多控。曾经有一个华丽的需求摆在我的面前，我没有珍惜，后来出了bug被客户怼我才追悔莫及，如果上天能再给我一次机会的话，我一定要自己写一个出来。于是，就有了下面的效果。

a7943fd329bb

效果图.gif

如果gif加载失败，请看这里~

a7943fd329bb

折线图.jpg

这里面全部都是使用canvas绘制的，比如画折线canvas.drawPath，画圆点drawCircle，画坐标线canvas.drawLine，画文字canvas.drawText等等。代码注释写的也比较详细，就不一一介绍了。直接上代码：

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Point;

import android.support.annotation.Nullable;

import android.support.v4.content.ContextCompat;

import android.util.AttributeSet;

import android.util.Log;

import android.view.MotionEvent;

import android.view.View;

import java.util.ArrayList;

import java.util.Collections;

import java.util.Comparator;

import java.util.List;

/**

* 多层折线图控件

* Created by zhuyong on 2018/8/30.

*/

public class MyChatView extends View {

private Context mContext;

private Paint mPaintLine;//折线图

private Paint mPaintCircle;//圆的外边框

private Paint mPaintPoint;//圆内填充

private Paint mPaintBottomLine;//底部X轴

private Paint mPaintLimit;//指示线

private Paint mPaintText;//底部X坐标文字

private int mBottomTextHeight = 50;//底部X轴文字所占总高度，单位dp

private int mSingleLineHeight = 100;//单个折线图的高度，单位dp

private int mPaddingTB = 10;//折线图上下的偏移量，单位dp

private int mLineColor;//折线图的颜色

protected int[] mColors;//几种颜色

private List> mListAll = new ArrayList<>();//数据源

private int mViewWidth;//控件宽高

private int mViewHeight;//控件宽高

public MyChatView(Context context) {

this(context, null);

}

public MyChatView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public MyChatView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

mContext = context;

initView();

}

/**

* 赋值

*

* @param list

*/

public void setData(List> list) {

if (list == null || list.size() == 0) {

return;

}

this.mListAll = list;

invalidate();

}

/**

* 设置折线图颜色

*

* @param position

*/

private void setLineColor(int position) {

mLineColor = mColors[position % mColors.length];

mPaintLine.setColor(mLineColor);

mPaintCircle.setColor(mLineColor);

}

private void initView() {

mColors = new int[]{ContextCompat.getColor(mContext, R.color.colorAccent)

, ContextCompat.getColor(mContext, R.color.colorPrimary)};

mPaintLine = new Paint();

mPaintLine.setStyle(Paint.Style.STROKE);

mPaintLine.setStrokeWidth(2);

mPaintLine.setAntiAlias(true);

mPaintCircle = new Paint();

mPaintCircle.setStyle(Paint.Style.STROKE);

mPaintCircle.setStrokeWidth(3);

mPaintCircle.setAntiAlias(true);

mPaintPoint = new Paint();

mPaintPoint.setStyle(Paint.Style.FILL);

mPaintPoint.setColor(Color.WHITE);

mPaintPoint.setAntiAlias(true);

mPaintBottomLine = new Paint();

mPaintBottomLine.setStyle(Paint.Style.STROKE);

mPaintBottomLine.setStrokeWidth(3);

mPaintBottomLine.setColor(Color.parseColor("#999999"));

mPaintBottomLine.setAntiAlias(true);

mPaintLimit = new Paint();

mPaintLimit.setStyle(Paint.Style.FILL);

mPaintLimit.setStrokeWidth(2);

mPaintLimit.setColor(Color.parseColor("#000000"));

mPaintLimit.setAntiAlias(true);

//画笔->绘制字体

mPaintText = new Paint();

mPaintText.setAntiAlias(true);

mPaintText.setStyle(Paint.Style.FILL);

mPaintText.setColor(Color.parseColor("#666666"));

mPaintText.setTextSize(sp2px(mContext, 14));

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

for (int jjj = 0; jjj < mListAll.size(); jjj++) {

List itemList = mListAll.get(jjj);

if (itemList != null && itemList.size() > 0) {

float mMaxVal = Collections.max(itemList, new MyComparator()).getVal();

Log.i("TAG", "最大值：" + mMaxVal);

setLineColor(jjj);

Path path = new Path();

List pointList = new ArrayList<>();

for (int i = 0; i < itemList.size(); i++) {

int xDiv = 0;

if (itemList.size() > 1) {

xDiv = (mViewWidth - getPaddingLeft() - getPaddingRight()) / (itemList.size() - 1);

}

MyModel item = itemList.get(i);

float x = i * xDiv;

float y = item.getVal() * (dip2px(mContext, mSingleLineHeight - mPaddingTB * 2)) / mMaxVal;

y = ((dip2px(mContext, mSingleLineHeight)) * (jjj + 1)) - dip2px(mContext, mPaddingTB * 2) - y;

if (i == 0) {

path.moveTo(x + getPaddingLeft(), y + dip2px(mContext, mPaddingTB));

} else {

path.lineTo(x + getPaddingLeft(), y + dip2px(mContext, mPaddingTB));

}

/**

* 这里记录一下xy坐标，用于后面绘制小球

*/

Point point = new Point();

point.x = (int) x;

point.y = (int) y;

pointList.add(point);

}

//画折线

canvas.drawPath(path, mPaintLine);

//画小圆球

drawCircle(canvas, pointList, jjj);

//画文字

if (jjj == mListAll.size() - 1) {

drawText(canvas, pointList);

}

}

}

/**

* 画竖线，指示线

*/

if (mLineX > 0) {

canvas.drawLine(mLineX, 0, mLineX, mViewHeight - dip2px(mContext, mBottomTextHeight), mPaintLimit);

}

}

/**

* 画圆和底部X轴

*

* @param canvas

* @param pointList

*/

private void drawCircle(Canvas canvas, List pointList, int jjj) {

for (int i = 0; i < pointList.size(); i++) {

Point point = pointList.get(i);

//画圆圈

canvas.drawCircle(point.x + getPaddingLeft(), point.y + dip2px(mContext, mPaddingTB), 10, mPaintCircle);

if (position == i && mLineX > 0) {

mPaintPoint.setColor(mLineColor);

} else {

mPaintPoint.setColor(Color.WHITE);

}

//填充圆内空间

canvas.drawCircle(point.x + getPaddingLeft(), point.y + dip2px(mContext, mPaddingTB), 9, mPaintPoint);

//画X轴间隔线

canvas.drawLine(point.x + getPaddingLeft(), dip2px(mContext, mSingleLineHeight) * (jjj + 1), point.x + getPaddingLeft(), dip2px(mContext, mSingleLineHeight) * (jjj + 1) - dip2px(mContext, 5), mPaintBottomLine);

}

//底部X轴

canvas.drawLine(0, dip2px(mContext, mSingleLineHeight) * (jjj + 1), mViewWidth, dip2px(mContext, mSingleLineHeight) * (jjj + 1), mPaintBottomLine);

}

/**

* 画文字

*

* @param canvas

* @param pointList

*/

private void drawText(Canvas canvas, List pointList) {

for (int i = 0; i < pointList.size(); i++) {

Point point = pointList.get(i);

//画底部文字

String text = (i + 1) + "";

//获取文字宽度

float textWidth = mPaintText.measureText(text, 0, text.length());

float dx = point.x + getPaddingLeft() - textWidth / 2;

Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();

float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;

float baseLine = dip2px(mContext, mSingleLineHeight) * mListAll.size() + dip2px(mContext, mBottomTextHeight / 2) + dy;

canvas.drawText(text, dx, baseLine, mPaintText);

}

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

/**

* 这里根据数据有多少组来动态计算整个view的高度，然后重新设置尺寸

*/

mViewHeight = dip2px(mContext, mSingleLineHeight) * mListAll.size() + dip2px(mContext, mBottomTextHeight);

mViewWidth = MeasureSpec.getSize(widthMeasureSpec);

setMeasuredDimension(mViewWidth, mViewHeight);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

case MotionEvent.ACTION_MOVE:

getPointLine(event.getX());

}

return true;

}

private float mLineX = 0;

private int position = 0;

/**

* 判断触摸的坐标距离哪个点最近

*

* @param mRawX

*/

private void getPointLine(float mRawX) {

if (mListAll == null || mListAll.size() == 0) {

return;

}

float newLineX = 0;

//触摸在折线区域

if (mRawX <= mViewWidth - getPaddingRight() && mRawX >= getPaddingLeft()) {

if (mListAll.get(0).size() == 1) {

newLineX = getPaddingLeft();

position = 0;

} else {

for (int i = 0; i < mListAll.get(0).size(); i++) {

int xDiv = 0;

if (mListAll.get(0).size() > 1) {

xDiv = (mViewWidth - getPaddingLeft() - getPaddingRight()) / (mListAll.get(0).size() - 1);

}

float x1 = i * xDiv + getPaddingLeft();

float x2 = (i + 1) * xDiv + getPaddingLeft();

//判断触摸在两个点之间时，离谁更近一些

if (mRawX > x1 && mRawX < x2) {

float cneterX = x1 + (x2 - x1) / 2;

if (mRawX > cneterX) {

newLineX = x2;

position = i + 1;

if (position == mListAll.get(0).size()) {

position = i;

}

} else {

newLineX = x1;

position = i;

}

break;

}

}

}

} else if (mRawX < getPaddingLeft()) {//触摸在折线左边

newLineX = getPaddingLeft();

position = 0;

} else {//触摸在折线右边

if (mListAll.get(0).size() == 1) {

newLineX = getPaddingLeft();

position = 0;

} else {

newLineX = mViewWidth - getPaddingRight();

position = mListAll.get(0).size() - 1;

}

}

/**

* 这里判断如果跟上次的触摸结果一样，则不处理

*/

if (mLineX == newLineX) {

return;

}

mLineX = newLineX;

notifyUI(mLineX);

}

/**

* 选中某一组

*

* @param position

*/

public void setPosition(int position) {

try {

this.position = position;

int xDiv = (mViewWidth - getPaddingLeft() - getPaddingRight()) / (mListAll.get(0).size() - 1);

mLineX = position * xDiv + getPaddingLeft();

notifyUI(mLineX);

} catch (Exception e) {

e.printStackTrace();

Log.i("MyChatView", "Exception:" + e);

}

}

private void notifyUI(float mLineX) {

this.mLineX = mLineX;

if (onClickListener != null) {

onClickListener.click(position);

}

invalidate();

}

private OnClickListener onClickListener;

public void setOnClickListener(OnClickListener listener) {

this.onClickListener = listener;

}

public interface OnClickListener {

void click(int position);

}

public static int dip2px(Context context, float dpValue) {

final float scale = context.getResources().getDisplayMetrics().density;

return (int) (dpValue * scale + 0.5f);

}

public static int sp2px(Context context, float spValue) {

final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;

return (int) (spValue * fontScale + 0.5f);

}

private class MyComparator implements Comparator {

public int compare(MyModel o1, MyModel o2) {

return (o1.getVal() < o2.getVal() ? -1 : (o1.getVal() == o2.getVal() ? 0 : 1));

}

}

}

使用：

public class MainActivity extends AppCompatActivity {

private MyChatView view1;

private TextView tv_text;

private List> mListAll = new ArrayList<>();

/**

* 获取随机数

*

* @param range

* @param startsfrom

* @return

*/

protected float getRandom(float range, float startsfrom) {

return (float) (Math.random() * range) + startsfrom;

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

view1 = (MyChatView) findViewById(R.id.view1);

tv_text = (TextView) findViewById(R.id.tv_text);

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

List item = new ArrayList<>();

for (int i1 = 0; i1 < 15; i1++) {

item.add(new MyModel(i1, getRandom(1000, 500)));

}

mListAll.add(item);

}

view1.setData(mListAll);

view1.setOnClickListener(new MyChatView.OnClickListener() {

@Override

public void click(int position) {

update(position);

}

});

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

/**

* 设置默认选中第几组数据

*/

view1.setPosition(new Random().nextInt(15));

}

});

}

private void update(int position) {

tv_text.setText("");

tv_text.append("第" + (position + 1) + "组:\n");

for (int i = 0; i < mListAll.size(); i++) {

tv_text.append("第" + i + "个数据：" + mListAll.get(i).get(position).getVal() + "\n");

}

}

}

GitHub传送门：源码

请叫我麻花
关注
如何将多个一维图像绘制成一张三维图像？基于matlab实现
qq_38941890的博客
09-12 3393
当我们有多个时间序列或者类似的数据，如何将他们绘制在同一张三维图像中，方便观察呢？
Android复式折线图,即表格折线图,可支持多条折线显示
11-07
Android复式折线图,即表格折线图,可支持多条折线显示 基于IDEA的项目源码
android 多个折线图 最佳视野,Android 折线图 进阶版
weixin_42377196的博客
05-26 387
在看该文章时 可以先看看初级版效果图Paste_Image.png跟初级版相比， 加入了 框线文本数据的适配，横线数量适配，传入参数适配那么我们需要多加入几个参数/**图表的最大值*/private float maxVlaue=27.55f;/**图表的最小值*/private float minValue=-19.12f;/**要计算的总值*/private float calculateVa...
android 自定义折线图
weixin_34357436的博客
06-29 75
看图：   比较简陋，主要是通过canvas画上去的： package com.example.democurvegraph.view; import java.util.ArrayList; import android.content.Context; import android.graphics.Canvas; import android.graphics.Co...
Android实现多条动态折线图的绘制
08-27
Android实现动态折线图的绘制，可绘制多条折线。根据各种方法进行线条的状态改变。使用第三方封装chart组件进行开发。
Android图表库HelloChart绘制多折线图
陈正的博客
09-30 3103
一、效果图二、实现步骤1.添加依赖库compile 'com.github.lecho:hellocharts-android:v1.5.8'2.布局文件<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:
android绘制折线图开源,安卓 使用开源AChartEngine图表库画折线图
weixin_42253260的博客
06-02 723
安卓 使用开源AChartEngine图表库画折线图一、简述记--使用AChartEngine开源图表库绘制简单的折线图。AChartEngine是一个开源的Android图表库，可以用来画折线图、面积图、条形图、柱形图、组合图表等等。简单的折线图例子：链接: https://pan.baidu.com/s/1ed3wiBEde4FgSNADTjfdQg 提取码: w3a2开源库acharten...
Android-ExtraMapUtils一个Android库实现更方便在Google地图上标记绘制多边形和折线
08-13
在Android应用开发中，Google Maps API是一个强大的工具，它允许开发者在应用程序中集成地图功能，包括定位、导航、路线规划等。然而，当需要在地图上绘制复杂的图形，如多边形和折线时，原始API可能会显得较为繁琐...
android 曲线图自己改造后的 一个页面可以放多个
10-24
本项目针对这一需求，提供了一个经过改造的曲线图组件，使得开发者在一个页面上可以展示多个曲线图，增强用户体验并提供丰富的交互功能。 这个自定义的Android曲线图组件允许用户进行左右和上下拖动，这在处理大...
Qt6绘制折现图完整工程，折线图支持缩放等操作。
03-21
同时，`QChart`允许添加多个系列，通过调整它们的顺序和透明度，可以实现多层折线图的堆叠效果。 至于项目中的"32_QChart_BrokenLine"文件，很可能是包含了一个具体的示例代码或者是一个已完成的工程模板。这个文件...
Android-LineChart图标显示多条曲线
04-13
使用LineChart，显示多条曲线
andorid MPChart控件 实现多条折线图网格背景
06-19
android 实现多条折线图对比曲线显示，自定义折现背景，个人在MpChart基础上修改，希望能给各位提供帮助，谢谢。。。。。。。
android自定义折线图曲线图
10-15
绘制简单折线图表，和绘制复杂的曲线图表，支持多条折线曲线，可以设置X,Y值，设置折线颜色等，和颜色渐变
Android折线图多条数据实时动态更新，控制折线图上数据的精度
03-31
利用MPAndroidChart实现多条数据更新，控制折线图上数据的显示精度
Android自定义View实现折线图效果
09-01
介绍的是一个折线图控件，用来显示一系列的状态，并可以进行滑动。有需要的可以参考借鉴。
Android自定义横线滑动折线图，点击，加载更多
YanLiabcd的博客
10-28 1247
项目地址：https://github.com/604982372/HorizontalLine 实现步骤： 1.设置属性； 2.绘制内容； 3.处理滑动事件； 4.添加选中，滑动更多功能。 设置属性 1.在attrs.xml文件中添加设置：   &lt;declare-styleable name="HorizontalLineView"&gt; &lt;...
android 曲线图 简书,Android 折线图的统计功能（多条折线）
weixin_36054444的博客
06-02 853
image叔本华先生说：要么孤独，要么庸俗。独处是选择，是自发认识自己最好的途径。我们能做的就是独处的时间，踏踏实实的做好当下该做的。不迷失过去，也不惊恐于将来。不要着急让生活给予你所有的答案，有时候，你要拿出耐心等。生活的美好，总在你不经意的时候盛装莅临。*废话少说先上原型图image.png第一步：依赖： implementation 'com.github.PhilJay:MPAndroid...
android+自定义折现图,Android自定义折线图
weixin_35531726的博客
05-26 376
效果图:imageimage设计图标注:image1.自定义折线图LineChartView的属性,可以参照上面给出的标注图:2.在布局文件使用自定义的属性值画图,自定义一个LineChartView嵌套在HorizontalScrollView下面,让LineChartView可以左右滑动;android:layout_width="match_parent"android:layout_hei...
Android 上自定义的复式折线图(三)
无论何时都不要停止学习，这是改变自己的必要条件
06-30 770
Android 上自定义的复式折线图(一) Android 上自定义的复式折线图(二) 有兴趣的话可以看下前面两篇文章,这几天也对其做了很多处理,尽量将其做的更加完美 这次修改也主要是为了然Y轴不动,表格可以进行水平滚动 其中做了以下支持: 设置左边控件的宽度设置两个控件父控件的宽度X,Y字体跟表格的距离设置XY轴的颜色X,Y字体颜色跟大小表格颜色是否显示表格是否显示虚线设置
Android定制折线图教程：自定义View实现详解
在Android开发中，自定义控件的折线图是一种常见的视觉效果，尤其对于学习曲线的新手来说，它可能显得有些复杂。本文将深入浅出地讲解如何通过自定义View来实现折线图，以提高开发者对此的理解和实践能力。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值