前言：
各位同學大家好，有段時間沒有給大家更新文章了择浊，具體多久我也記不清楚了伤靠。最近重新復習了一下原生安卓的知識點婿着，寫了一個安卓原生自定義折線圖的效果，就想著分享給大家。希望幫助到各位學習和工作竟宋，那份廢話不多說我們正式開始。
效果圖：
image.png
具體實現(xiàn)
-
自定義 ：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);
}
-
畫數(shù)軸
// 畫豎軸
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);
}
}
最后總結(jié)
自定義折線圖主要是對于要繪制的 點的坐標的處理 然后依次畫出橫軸刻度 以及數(shù)軸刻度形纺。最后將獲取到的現(xiàn)在畫出線即可 丘侠。最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻更多有用的代碼分享給大家逐样。各位同學如果覺得文章還不錯 蜗字，麻煩給關(guān)注和star，小弟在這里謝過啦!
