柱状图：可以设置字体大小，颜色，柱子的颜色，点击事件，背景色，动态设置y轴的单位。
---------------------------柱状图-----------------------
-----------------------------自定义类 HistogramView -------------------------------
package com.zhuoshi.inspecting.mvp.ui.view.views;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Looper;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import com.zhuoshi.inspecting.R;
public class HistogramView extends View {
private Paint xLinePaint;// 坐标轴 轴线 画笔：
private Paint hLinePaint;// 坐标轴水平内部 虚线画笔
private Paint titlePaint;// 绘制文本的画笔
private Paint paint;// 矩形画笔 柱状图的样式信息
public static int[] progress;//显示各个柱状的数据
public static int[] aniProgress;// 实现动画的值
private final int TRUE = 1;// 在柱状图上显示数字
public static int[] text;// 设置点击事件，显示哪一条柱状的信息
private Bitmap bitmap;
// 坐标轴左侧的数标
public static String[] ySteps;
// X坐标轴底部地址
public static String[] xWeeks;
private int flag;// 是否使用动画
private HistogramAnimation ani;
private static final String TAG = "HistogramView";
public HistogramView(Context context) {
super(context);
init();
}
public HistogramView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
Log.d(TAG, "init: "+"progress:"+progress.length+"--aniProgress:"+aniProgress.length+"--text:"+text.length+"--ySteps:"+ySteps.length+"--xWeeks:"+xWeeks.length);
for (int i = 0; i < xWeeks.length; i++) {
Log.d(TAG, "xWeeks: "+xWeeks.toString());
}
ani = new HistogramAnimation();
ani.setDuration(2000);
xLinePaint = new Paint();
hLinePaint = new Paint();
titlePaint = new Paint();
paint = new Paint();
// 给画笔设置颜色
xLinePaint.setColor(Color.DKGRAY);
hLinePaint.setColor(Color.LTGRAY);
titlePaint.setColor(getResources().getColor(R.color.bottomtabtext));
// 加载画图
bitmap = BitmapFactory
.decodeResource(getResources(), R.drawable.orangeback);
}
public void start(int flag) {
this.flag = flag;
this.startAnimation(ani);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d(TAG, "onDraw: 3");
int width = getWidth();
int height = getHeight() - dp2px(50);
// 绘制底部的线条
canvas.drawLine(dp2px(30), height + dp2px(3), width - dp2px(30), height
+ dp2px(3), xLinePaint);
int leftHeight = height - dp2px(5);// 左侧外周的 需要划分的高度：
int hPerHeight = leftHeight / (ySteps.length-1);// 动态划分虚线
hLinePaint.setTextAlign(Paint.Align.CENTER);
//设置虚线
for (int i = 0; i < ySteps.length-1; i++) {
canvas.drawLine(dp2px(30), dp2px(10) + i * hPerHeight, width
- dp2px(30), dp2px(10) + i * hPerHeight, hLinePaint);
}
// 绘制 Y 周坐标
titlePaint.setTextAlign(Paint.Align.RIGHT);
//x轴下方字体大小
titlePaint.setTextSize(sp2px(9));
titlePaint.setAntiAlias(true);
titlePaint.setStyle(Paint.Style.FILL);
// 设置左部的数字
for (int i = 0; i < ySteps.length; i++) {
canvas.drawText(ySteps[i], dp2px(25), dp2px(13) + i * hPerHeight,
titlePaint);
}
// 绘制 X 周 做坐标
int xAxisLength = width - dp2px(30);
int columCount = xWeeks.length + 1;
int step = xAxisLength / columCount;
if (xWeeks!=null && titlePaint!=null && step>=0) {
for (int i = 0; i < columCount - 1; i++) {
canvas.drawText(xWeeks[i].substring(0,3)+"..", dp2px(35) + step * (i + 1), height
+ dp2px(20), titlePaint);
}
}
// 绘制矩形
if (aniProgress != null && aniProgress.length > 0) {
int maxIndex = progress[0];//定义最大值为该数组的第一个数
int minIndex = progress[0];//定义最小值为该数组的第一个数
for (int i = 0; i < progress.length; i++) {
if(maxIndex < progress[i]){
maxIndex = progress[i];
}
if(minIndex > progress[i]){
minIndex = progress[i];
}
}
for (int i = 0; i < aniProgress.length; i++) {// 循环遍历将柱状图形画出来
int value = aniProgress[i];
paint.setAntiAlias(true);// 抗锯齿效果
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(sp2px(12));// 字体大小
paint.setColor(getResources().getColor(R.color.bottomtabtext));//字体颜色
Rect rect = new Rect();// 柱状图的形状
rect.left = step * (i + 1);
rect.right = dp2px(30) + step * (i + 1);
int rh = 0;
//y轴坐标
if (maxIndex <= 5){
rh = (int) (leftHeight - leftHeight * (value / 5.0));
}else if (maxIndex <=10 ){
rh = (int) (leftHeight - leftHeight * (value / 10.0));
} else if(maxIndex <= 50 ){
rh = (int) (leftHeight - leftHeight * (value / 50.0));
}else if (maxIndex <= 200){
rh = (int) (leftHeight - leftHeight * (value / 200.0));
}else if (maxIndex<= 400){
rh = (int) (leftHeight - leftHeight * (value / 400.0));
}
rect.top = rh + dp2px(10);
rect.bottom = height;
canvas.drawBitmap(bitmap, null, rect, paint);
// 是否显示柱状图上方的数字
if (this.text[i] == TRUE) {
canvas.drawText(value + "", dp2px(15) + step * (i + 1)
- dp2px(15), rh + dp2px(5), paint);
}
}
}
}
private int dp2px(int value) {
float v = getContext().getResources().getDisplayMetrics().density;
return (int) (v * value + 0.5f);
}
private int sp2px(int value) {
float v = getContext().getResources().getDisplayMetrics().scaledDensity;
return (int) (v * value + 0.5f);
}
/**
* 设置点击事件，是否显示数字
*/
public boolean onTouchEvent(MotionEvent event) {
int step = (getWidth() - dp2px(30)) / xWeeks.length;
int x = (int) event.getX();
for (int i = 0; i < xWeeks.length; i++) {
if (x > (dp2px(10) + step * (i + 1) - dp2px(15))
&& x < (dp2px(10) + step * (i + 1) + dp2px(15))) {
text[i] = 1;
for (int j = 0; j < xWeeks.length; j++) {
if (i != j) {
text[j] = 0;
}
}
if (Looper.getMainLooper() == Looper.myLooper()) {
invalidate();
} else {
postInvalidate();
}
}
}
return super.onTouchEvent(event);
}
/**
* 集成animation的一个动画类
*
* @author 李垭超
*/
private class HistogramAnimation extends Animation {
protected void applyTransformation(float interpolatedTime,
Transformation t) {
super.applyTransformation(interpolatedTime, t);
if (interpolatedTime < 1.0f && flag == 2) {
for (int i = 0; i < aniProgress.length; i++) {
aniProgress[i] = (int) (progress[i] * interpolatedTime);
}
} else {
for (int i = 0; i < aniProgress.length; i++) {
aniProgress[i] = progress[i];
}
}
invalidate();
}
}
}
-----------------布局文件-----------------
<com.zhuoshi.inspecting.mvp.ui.view.views.HistogramView
android:id="@+id/histogramview1"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="10dp"
/>-------------------调用赋值的方法-------------------
/**
* 解析后赋值的方法
*/
////设置数组长度
//HistogramView.progress = new int[hdtop_list.size()];
////给View中赋值
//for (int j = 0; j < hdtop_list.size(); j++) {
//
// HistogramView.progress[j] = hdtop_list.get(j).getHd_count();
//}
//进度，和柱状图上方的数值
ArrayList<Integer> sectionList = new ArrayList<>();
sectionList.add(1);
sectionList.add(4);
sectionList.add(5);
sectionList.add(3);
sectionList.add(4);
sectionList.add(198);
sectionList.add(9);
sectionList.add(1);
/**
* y轴坐标,根据数值的大小不同设置不同单位的y轴坐标
*/
if (Collections.max(sectionList) <= 5) {
HistogramView.ySteps = new String[]{"5", "4", "3", "2", "1", "0"};
} else if (Collections.max(sectionList) <= 10) {
HistogramView.ySteps = new String[]{"10", "8", "6", "4", "2", "0"};
} else if (Collections.max(sectionList) <= 50) {
HistogramView.ySteps = new String[]{"50", "40", "30", "20", "10", "0"};
} else if (Collections.max(sectionList) <= 200) {
HistogramView.ySteps = new String[]{"200", "150", "100", "50", "0"};
} else if (Collections.max(sectionList) <= 400) {
HistogramView.ySteps = new String[]{"400", "300", "200", "100", "0"};
}
//进度
HistogramView.progress = new int[]{"1","4","5","3","4","189","9","1"};
HistogramView.aniProgress = new int[]{"1","4","5","3","4","189","9","1"};
//x轴
HistogramView.xWeeks = new String[]{"上海","北京","重庆","山西","济南","广西","南京","深圳"};
//[]中长度为8，说明有8个柱子设置点击事件
HistogramView.text = new int[0，0，0，0，0，0，0，0];
---------------------------折线图---------------------------
折线图可以设置字体，线的颜色，折点的点击事件，和数值，可以水平滑动。
-------------------------自定义类 ChartView--------------------------
package com.zhuoshi.inspecting.mvp.ui.view.views;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import com.zhuoshi.inspecting.R;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class ChartView extends View {
//xy坐标轴颜色
private int xylinecolor = 0xe2e2e2;
//xy坐标轴宽度
private int xylinewidth = dpToPx(1);
//xy坐标轴文字颜色
private int xytextcolor = 0xcccccc;
//xy坐标轴文字大小
private int xytextsize = spToPx(12);
//折线图中折线的颜色
private int linecolor = 0x06ea41;
//x轴各个坐标点水平间距
private int interval = dpToPx(40);
//背景颜色
private int bgcolor = 0x191919;
//是否在ACTION_UP时，根据速度进行自滑动，没有要求，建议关闭，过于占用GPU
private boolean isScroll = false;
//绘制XY轴坐标对应的画笔
private Paint xyPaint;
//绘制XY轴的文本对应的画笔
private Paint xyTextPaint;
//画折线对应的画笔
private Paint linePaint;
private int width;
private int height;
//x轴的原点坐标
private int xOri;
//y轴的原点坐标
private int yOri;
//第一个点X的坐标
private float xInit;
//第一个点对应的最大Y坐标
private float maxXInit;
//第一个点对应的最小X坐标
private float minXInit;
//x轴坐标对应的数据
private List<String> xValue = new ArrayList<>();
//y轴坐标对应的数据
private List<Integer> yValue = new ArrayList<>();
//折线对应的数据
private Map<String, Integer> value = new HashMap<>();
//点击的点对应的X轴的第几个点，默认1
private int selectIndex = 1;
//X轴刻度文本对应的最大矩形，为了选中时，在x轴文本画的框框大小一致
private Rect xValueRect;
//速度检测器
private VelocityTracker velocityTracker;
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();
}
/**
* 初始化畫筆
*/
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);
}
/**
* 初始化
*
* @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();
}
@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);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@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(0x06ea41);
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
*/
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
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);
}
}
}
}
private float startX;
@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;
}
//是否正在滑动
private boolean isScrolling = false;
/**
* 手指抬起后的滑动处理
*/
private void scrollAfterActionUp() {
if (!isScroll)
return;
final float velocity = getVelocity();
float scrollLength = maxXInit - minXInit;
if (Math.abs(velocity) < 10000)//10000是一个速度临界值，如果速度达到10000，最大可以滑动(maxXInit - minXInit)
scrollLength = (maxXInit - minXInit) * Math.abs(velocity) / 10000;
ValueAnimator animator = ValueAnimator.ofFloat(0, scrollLength);
animator.setDuration((long) (scrollLength / (maxXInit - minXInit) * 1000));//时间最大为1000毫秒，此处使用比例进行换算
animator.setInterpolator(new DecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
if (velocity < 0 && xInit > minXInit) {//向左滑动
if (xInit - value <= minXInit)
xInit = minXInit;
else
xInit = xInit - value;
} else if (velocity > 0 && xInit < maxXInit) {//向右滑动
if (xInit + value >= maxXInit)
xInit = maxXInit;
else
xInit = xInit + value;
}
invalidate();
}
});
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
isScrolling = true;
}
@Override
public void onAnimationEnd(Animator animator) {
isScrolling = false;
}
@Override
public void onAnimationCancel(Animator animator) {
isScrolling = false;
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animator.start();
}
/**
* 获取速度
*
* @return
*/
private float getVelocity() {
if (velocityTracker != null) {
velocityTracker.computeCurrentVelocity(1000);
return velocityTracker.getXVelocity();
}
return 0;
}
/**
* 点击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;
}
}
}
/**
* 获取速度跟踪器
*
* @param event
*/
private void obtainVelocityTracker(MotionEvent event) {
if (!isScroll)
return;
if (velocityTracker == null) {
velocityTracker = VelocityTracker.obtain();
}
velocityTracker.addMovement(event);
}
/**
* 回收速度跟踪器
*/
private void recycleVelocityTracker() {
if (velocityTracker != null) {
velocityTracker.recycle();
velocityTracker = null;
}
}
public int getSelectIndex() {
return selectIndex;
}
public void setSelectIndex(int selectIndex) {
this.selectIndex = selectIndex;
invalidate();
}
public void setxValue(List<String> xValue) {
this.xValue = xValue;
}
public void setyValue(List<Integer> yValue) {
this.yValue = yValue;
invalidate();
}
public void setValue(Map<String, Integer> value) {
this.value = value;
invalidate();
}
public void setValue(Map<String, Integer> value, List<String> xValue, List<Integer> yValue) {
this.value = value;
this.xValue = xValue;
this.yValue = yValue;
invalidate();
}
public List<String> getxValue() {
return xValue;
}
public List<Integer> getyValue() {
return yValue;
}
public Map<String, Integer> getValue() {
return value;
}
/**
* 获取丈量文本的矩形
*
* @param text
* @param paint
* @return
*/
private Rect getTextBounds(String text, Paint paint) {
Rect rect = new Rect();
paint.getTextBounds(text, 0, text.length(), rect);
return rect;
}
/**
* dp转化成为px
*
* @param dp
* @return
*/
private int dpToPx(int dp) {
float density = getContext().getResources().getDisplayMetrics().density;
return (int) (dp * density + 0.5f * (dp >= 0 ? 1 : -1));
}
/**
* sp转化为px
*
* @param sp
* @return
*/
private int spToPx(int sp) {
float scaledDensity = getContext().getResources().getDisplayMetrics().scaledDensity;
return (int) (scaledDensity * sp + 0.5f * (sp >= 0 ? 1 : -1));
}
}
---------------------布局文件---------------------
xmlns:app="http://schemas.android.com/apk/res-auto"
<com.zhuoshi.inspecting.mvp.ui.view.views.ChartView
android:id="@+id/chartview"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_centerInParent="true"
app:interval="50dp"
app:isScroll="false"
app:linecolor="@color/tripnum"
app:xylinecolor="#e2e2e2"
app:xylinewidth="1dp"
app:xytextcolor="#cccccc"
app:xytextsize="12sp"
/>------------------------调用赋值的方法----------------------
//x轴坐标对应的数据
private List<String> xValue = new ArrayList<>();
//y轴坐标对应的数据
private List<Integer> yValue = new ArrayList<>();
//折线对应的数据
private Map<String, Integer> value = new HashMap<>();
//折线图数据
for (int i = 0; i < 30; i++) {
xValue.add((i + 1) + "");
value.put((i + 1) + "", (int) (Math.random() * 181));//60--240
}
for (int i = 0; i < 5; i++) {
yValue.add(i * 60);
}
ChartView chartView = v.findViewById(R.id.chartview);
chartView.setValue(value, xValue, yValue);翻译自：https://www.2cto.com/kf/201503/384731.html （柱状图）
https://blog.csdn.net/u014544193/article/details/54313257 （折线图）
http://www.codesocang.com/gn-drawing/38444.html Android开发一个非常实用的Chart折线图功能
https://blog.csdn.net/ww897532167/article/details/77334345 折线图，柱状图等各种图，进去之后再最下方去下载源码。