Android 自定义折线图实现教程

原创

xq9527 2022-05-01 17:08:13 博主文章分类：android ©著作权

文章标签 android android studio android-studio java i++ 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者xq9527的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言：

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

效果图：

Android 自定义折线图实现教程_i++

具体实现

自定义：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 方法

@Override
    protected 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;
    @Override
    protected 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);

    }
}