失眠网 > Android 自定义折线图实现教程

Android 自定义折线图实现教程

时间：2023-02-15 18:25:06

相关推荐

Android 自定义折线图实现教程

前言：

各位同学大家好，有段时间没有给大家更新文章了，具体多久我也记不清楚了。最近重新复习了一下原生安卓的知识点，写了一个安卓原生自定义折线图的效果，就想着分享给大家。希望帮助到各位学习和工作，那份废话不多说我们正式开始。

效果图：

具体实现

自定义：BrokenView

private Context mContext;private int bWidth,bHeight; // 左边距除去下边距的距离private int totalValue, pJValue; // Y的刻度 Y的总值private String xStr="x",yStr="y";private HashMap<Double, Double>map=new HashMap<>();private boolean isShow;private int marginB;private List<Double> dlk=new ArrayList<>();private List<Integer>xList=new ArrayList<>();private Point []mPoints;public BrokenView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);mContext=context;}

对外方法

public void setView(HashMap<Double,Double>map,int totalValue,int pJValue,boolean isShow,int marginB){this.map=map;this.totalValue=totalValue;this.pJValue=pJValue;this.isShow=isShow;this.marginB=marginB;}

重写ondraw 方法

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 把x 坐标从小到大进行排列保存在一个集合里面dlk=Tools.getintformap(map);int height=getHeight();int width=getWidth();bWidth=50;bHeight=height-marginB;int jSzie=totalValue/pJValue;Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);paint.setColor(Color.GRAY); //设置画笔颜色paint.setStrokeWidth(1);paint.setStyle(Paint.Style.STROKE);// 画横轴for (int i = 0; i < jSzie+1; i++) {canvas.drawLine(bWidth,bHeight-(bHeight/jSzie)*i+20,width,bHeight-(bHeight/jSzie)*i+20,paint);// 画Y的刻度drawText(pJValue*i+yStr,bWidth/2,bHeight-(bHeight/jSzie)*i+20,canvas);}// 画竖轴for (int i = 0; i <dlk.size(); i++) {// 把相对于view的x的坐标值找到xList.add(bWidth+(int)((width-bWidth)/dlk.size()*dlk.get(i)));if(isShow){canvas.drawLine(bWidth+(width-bWidth)/dlk.size()*i,20,bWidth+(width-bWidth)/dlk.size()*i,bHeight,paint);}drawText(1+xStr,bWidth+(width-bWidth)/dlk.size()*i,bHeight-20,canvas);}// 把所有的点相对于View的集合找到mPoints=getPotins(dlk,map,totalValue,canvas,xList);paint.setColor(Color.GREEN);paint.setStyle(Paint.Style.STROKE);drawPoints(mPoints,canvas ,paint);paint.setColor(Color.RED);paint.setStyle(Paint.Style.FILL);for (int i = 0; i <mPoints.length ; i++) {canvas.drawRect(paintRect(mPoints[i]),paint);}}

####画横轴

// 画横轴for (int i = 0; i < jSzie+1; i++) {canvas.drawLine(bWidth,bHeight-(bHeight/jSzie)*i+20,width,bHeight-(bHeight/jSzie)*i+20,paint);// 画Y的刻度drawText(pJValue*i+yStr,bWidth/2,bHeight-(bHeight/jSzie)*i+20,canvas);}

####画数轴

// 画竖轴for (int i = 0; i <dlk.size(); i++) {// 把相对于view的x的坐标值找到xList.add(bWidth+(int)((width-bWidth)/dlk.size()*dlk.get(i)));if(isShow){canvas.drawLine(bWidth+(width-bWidth)/dlk.size()*i,20,bWidth+(width-bWidth)/dlk.size()*i,bHeight,paint);}drawText(1+xStr,bWidth+(width-bWidth)/dlk.size()*i,bHeight-20,canvas);}

获得相对于View 所有的点的集合

// 获得相对于View 所有的点的集合private Point []getPotins(List<Double> dlk2, HashMap<Double, Double> map2, int totalValue2,Canvas canvas, List<Integer> xList2) {Point [] points=new Point[dlk2.size()];for (int i = 0; i <points.length ; i++) {int ph=bHeight-(int) (bHeight*(map.get(dlk.get(i))/totalValue2));points[i]=new Point(xList2.get(i),ph+20);}return points;}

绘制刻度方法

private void drawText(String str,int i , int j, Canvas canvas){Paint paint=new Paint();paint.setAlpha(0X0000FF);paint.setTextSize(20);paint.setColor(Color.GRAY);Typeface typeface=Typeface.create("宋体",Typeface.ITALIC);paint.setTypeface(typeface);paint.setTextAlign(Paint.Align.CENTER);canvas.drawText(str,i ,j,paint);}

Tools 工具类

将 HashMap 排序然后添加在list里面并返回

package com.app.broken_demo;import java.util.ArrayList;import java.util.Collections;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Set;public class Tools {public static ArrayList<Double>getintformap(HashMap<Double,Double>map){ArrayList<Double>dlk=new ArrayList<>();@SuppressWarnings("rawtypes")Set set=map.entrySet();@SuppressWarnings("rawtypes")Iterator iterator=set.iterator();while (iterator.hasNext()){@SuppressWarnings("rawtypes")Map.Entry mapentry= (Map.Entry) iterator.next();dlk.add((Double) mapentry.getKey());}Collections.sort(dlk);return dlk;}}

mainactivity测试

package com.app.broken_demo;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.Button;import java.util.HashMap;public class MainActivity extends AppCompatActivity {private HashMap<Double,Double>map=new HashMap<>();private BrokenView brokenView;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);brokenView=findViewById(R.id.menulist);button=findViewById(R.id.btn_add);map.put(0.0,0.0);map.put(1.5,(double) 0);map.put(2.0,25.0);map.put(3.0,20.0);map.put(4.0,32.0);map.put(5.0,41.0);map.put(6.0,16.0);map.put(7.0,36.0);map.put(8.0,26.0);brokenView.setView(map,50,10,false,50);}}