android自定義折線圖——之簡單的溫度折線圖

阿新 • • 發佈：2019-02-07

最近做了一個類似天氣預告的demo，其中有一個自定義折線圖，在網上找了很多例子，沒有一個合適的，於是只能參考別人的例子，根據自己的想法寫了一套demo.

在做自定義控制元件之前，先熟悉一下paint和canvas的簡單使用。

大概的思路無非就是先畫一個橫縱座標，然後根據點的X軸Y軸的座標，進行畫點畫線畫文字。

最後的效果圖呢如下

然後接下來看定義的折線圖控制元件了

<span style="color:#009900;">package com.yang.draw;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

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.graphics.RectF;
import android.graphics.Paint.Style;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;


class MyChartView extends View{
	
    public static final int RECT_SIZE = 10;      
    //列舉實現座標桌面的樣式風格
    public static enum Mstyle
    {
    	Line,Curve
    }

    private Mstyle mstyle=Mstyle.Line;
    private Point[] mPoints = new Point[100];  
      
    Context context;
    int bheight=0;
    HashMap<Double, Double> map;
    ArrayList<Double> dlk;
    int totalvalue=30;
    int pjvalue=5;
    String xstr,ystr="";//橫縱座標的屬性
    int margint=15;
    int marginb=40;
    int c=0;
    int resid=0;
    Boolean isylineshow;
   
    /**
    * 
    */
    public void SetTuView(HashMap<Double, Double> map,int totalvalue,int pjvalue,String xstr,String ystr,Boolean isylineshow) 
    {
        this.map=map;
        this.totalvalue=totalvalue;
        this.pjvalue=pjvalue;
        this.xstr=xstr;
        this.ystr=ystr;
        this.isylineshow=isylineshow;
   }  

    public MyChartView(Context ct)
    {
    	super(ct);
		this.context=ct;
    }
    
    public MyChartView(Context ct, AttributeSet attrs)
	{
		super( ct, attrs );
		this.context=ct;
	}
    
    public MyChartView(Context ct, AttributeSet attrs, int defStyle) 
	{		 
		super( ct, attrs, defStyle );
		this.context=ct;
	}
    
	@Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        if(c!=0)
        	this.setbg(c);
        if(resid!=0)
        	this.setBackgroundResource(resid);
        dlk=getintfrommap(map);
        int height=getHeight();
        if(bheight==0)
        	bheight=height-marginb;

        int width=getWidth();
        int blwidh=dip2px(context,50);
        int pjsize=totalvalue/pjvalue;//介面佈局的尺寸的比例
        // set up paint  
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        paint.setColor(Color.GRAY);  
        paint.setStrokeWidth(1);  
        paint.setStyle(Style.STROKE);
        for(int i=0;i<pjsize+1;i++)//將頂點的線變為紅色的  警戒線
        {
        	if(i==pjsize)
        		paint.setColor(Color.RED);
        	canvas.drawLine(blwidh,bheight-(bheight/pjsize)*i+margint,width,bheight-(bheight/pjsize)*i+margint, paint);//Y座標
        	drawline(pjvalue*i+"°", blwidh/2, bheight-(bheight/pjsize)*i+margint, canvas);
        }
        ArrayList<Integer> xlist=new ArrayList<Integer>();//記錄每個x的值
        //畫直線（縱向）
        paint.setColor(Color.GRAY);
        if(dlk==null)
        	return;
        for(int i=0;i<dlk.size();i++)
        {
        	xlist.add(blwidh+(width-blwidh)/dlk.size()*i);
        	if(isylineshow)
        	{
        		canvas.drawLine(blwidh+(width-blwidh)/dlk.size()*i,margint,blwidh+(width-blwidh)/dlk.size()*i,bheight+margint, paint);
        	}
        	String day=null;
        	if(dlk.get(i)==1.0){
        		day="Mon";
        	}else if(dlk.get(i)==2.0){
        		day="Tue";
        	}else if(dlk.get(i)==3.0){
        		day="Wed";
        	}else if(dlk.get(i)==4.0){
        		day="Thu";
        	}else if(dlk.get(i)==5.0){
        		day="Fir";
        	}else if(dlk.get(i)==6.0){
        		day="Sat";
        	}else if(dlk.get(i)==7.0){
        		day="Sun";
        	}
        	drawline(day, blwidh+(width-blwidh)/dlk.size()*i, bheight+40, canvas);//X座標
        }

        //點的操作設定
        mPoints=getpoints(dlk, map, xlist, totalvalue, bheight);

        
        paint.setColor(Color.GREEN);  
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(0);
        
    	if(mstyle==Mstyle.Curve)
    		drawscrollline(mPoints, canvas, paint);
    	else
    		drawline(mPoints, canvas, paint);
    	
        paint.setColor(Color.RED);  
        paint.setStyle(Style.FILL);  
        for (int i=0; i<mPoints.length; i++)
        {  
        	
            canvas.drawRect(pointToRect(mPoints[i]),paint);
            //給點加上文字，也就是溫度，溫度其實就是map的values值。
            float indexty=(mPoints[i].y - RECT_SIZE/2+ mPoints[i].y + RECT_SIZE/2)/2;//y軸座標
            canvas.drawText(getValues(i+1.0)+"°", mPoints[i].x + RECT_SIZE/2+10, indexty, paint);
        }  
    }  

   
    private RectF pointToRect(Point p)
    {  
        return new RectF(p.x -RECT_SIZE/2, p.y - RECT_SIZE/2,p.x + RECT_SIZE/2, p.y + RECT_SIZE/2);             
    }  

    
    private void drawscrollline(Point[] ps,Canvas canvas,Paint paint)
    {
    	Point startp=new Point();
    	Point endp=new Point();
    	for(int i=0;i<ps.length-1;i++)
    	{
    		startp=ps[i];
    		endp=ps[i+1];
    		int wt=(startp.x+endp.x)/2;
        	Point p3=new Point();
        	Point p4=new Point();
        	p3.y=startp.y;
        	p3.x=wt;
        	p4.y=endp.y;
        	p4.x=wt;
        	
        	Path path = new Path();  
            path.moveTo(startp.x,startp.y); 
            path.cubicTo(p3.x, p3.y, p4.x, p4.y,endp.x, endp.y); 
            canvas.drawPath(path, paint);
    		
    	}
    }

    
    private void drawline(Point[] ps,Canvas canvas,Paint paint)
    {
    	Point startp=new Point();
    	Point endp=new Point();
    	for(int i=0;i<ps.length-1;i++)
    	{	
    	startp=ps[i];
    	endp=ps[i+1];
    	canvas.drawLine(startp.x,startp.y,endp.x,endp.y, paint);
    	}
    }
    
  
    private Point[] getpoints(ArrayList<Double> dlk,HashMap<Double, Double> map,ArrayList<Integer> xlist,int max,int h)
    {
    	Point[] points=new Point[dlk.size()];
    	for(int i=0;i<dlk.size();i++)
    	{
    		int ph=h-(int)(h*(map.get(dlk.get(i))/max));
    		
    		points[i]=new Point(xlist.get(i),ph+margint);
    	}
    	return points;
    }
    
   
    private void drawline(String text,int x,int y,Canvas canvas)
    {
    	Paint p = new Paint();
    	p.setAlpha(0x0000ff);   
    	p.setTextSize(20);   
    	String familyName = "宋體";   
    	Typeface font = Typeface.create(familyName,Typeface.BOLD);   
    	p.setTypeface(font);   
    	p.setTextAlign(Paint.Align.CENTER);     
    	canvas.drawText(text, x, y, p);
    }


    public  int dip2px(Context context, float dpValue) 
    {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
    
   
    public  int px2dip(Context context, float pxValue) 
    {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
    //獲取map中的key鍵對應的values值
    private Double getValues(Double d){
    	Object obj = new Object();
    	obj = map.get(d);
    	
    	return (Double) obj;
    }
    //獲取map集合中key的值
    @SuppressWarnings("rawtypes")
	public ArrayList<Double> getintfrommap(HashMap<Double, Double> map)
    {
    	ArrayList<Double> dlk=new ArrayList<Double>();
    	int position=0;
    	if(map==null)
    		return null;
		Set set= map.entrySet();   
		Iterator iterator = set.iterator();
 
		 while(iterator.hasNext())
		{   
			@SuppressWarnings("rawtypes")
			Map.Entry mapentry  = (Map.Entry)iterator.next();  
			Double s=(Double)mapentry.getKey();
			dlk.add((Double)mapentry.getKey());//獲取map中的key值，獲取到的值是無序的
		} 
		 //對key值進行有序的排列，
		 for(int i=0;i<dlk.size();i++)
		 {
			 int j=i+1;  
	            position=i;  
	            Double temp=dlk.get(i);  
	            for(;j<dlk.size();j++)
	            {  
	            	if(dlk.get(j)<temp)
	            	{  
	            		temp=dlk.get(j);  
	            		position=j;  
	            	}  
	            }  
	            
	            dlk.set(position,dlk.get(i)); 
	            dlk.set(i,temp);  
		 }
		return dlk;
    	
    }

    
    
    
    public void setbg(int c)
    {
    	this.setBackgroundColor(c);
    }
    
	public HashMap<Double, Double> getMap() {
		return map;
	}

	public void setMap(HashMap<Double, Double> map) {
		this.map = map;
//		invalidate();//這裡進行重繪，如果在給map賦值之前執行了onDraw方法，則呼叫此方法，否則不需要。
	}

	public int getTotalvalue() {
		return totalvalue;
	}

	public void setTotalvalue(int totalvalue) {
		this.totalvalue = totalvalue;
	}

	public int getPjvalue() {
		return pjvalue;
	}

	public void setPjvalue(int pjvalue) {
		this.pjvalue = pjvalue;
	}

	public String getXstr() {
		return xstr;
	}

	public void setXstr(String xstr) {
		this.xstr = xstr;
	}

	public String getYstr() {
		return ystr;
	}

	public void setYstr(String ystr) {
		this.ystr = ystr;
	}

	public int getMargint() {
		return margint;
	}

	public void setMargint(int margint) {
		this.margint = margint;
	}

	public Boolean getIsylineshow() {
		return isylineshow;
	}

	public void setIsylineshow(Boolean isylineshow) {
		this.isylineshow = isylineshow;
	}

	public int getMarginb() {
		return marginb;
	}

	public void setMarginb(int marginb) {
		this.marginb = marginb;
	}

	public Mstyle getMstyle() {
		return mstyle;
	}

	public void setMstyle(Mstyle mstyle) {
		this.mstyle = mstyle;
	}

	public int getBheight() {
		return bheight;
	}

	public void setBheight(int bheight) {
		this.bheight = bheight;
	}

	public int getC() {
		return c;
	}

	public void setC(int c) {
		this.c = c;
	}

	public int getResid() {
		return resid;
	}

	public void setResid(int resid) {
		this.resid = resid;
	}
    
    
    
}  </span>

程式碼中一些註釋都已經標註，大部分都是一些paint和canvas的用法了，參考連結的文章就可以。

最後就是在主程式碼中給溫度賦值了

<span style="color:#009900;">package com.yang.draw;

import java.util.HashMap;
import java.util.Timer;

import com.yang.draw.MyChartView.Mstyle;
import com.yzxy.draw.R;

import android.os.Bundle;
import android.widget.Button;
import android.app.Activity;

public class MainActivity extends Activity {

	MyChartView tu;
	Button BT_Add;
	Timer mTimer =new Timer();
	HashMap<Double, Double> map;
	Double key=8.0;
	Double value=0.0;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		BT_Add=(Button)findViewById(R.id.bt_add);
		tu= (MyChartView)findViewById(R.id.menulist);
		tu.SetTuView(map,50,10,"x","y",false);
		map=new HashMap<Double, Double>();
		map.put(1.0, 13.0);
    	map.put(2.0, 25.0);
    	map.put(3.0, 32.0);
    	map.put(4.0, 31.0);
    	map.put(5.0, 16.0);
    	map.put(6.0, 36.0);
    	map.put(7.0, 26.0);
    	tu.setTotalvalue(50);
    	tu.setPjvalue(10);
    	tu.setMap(map);
		tu.setMargint(20);
		tu.setMarginb(50);
		tu.setMstyle(Mstyle.Line);
	
	}


}</span>

其中大家要注意的是，我在給控制元件賦值時（tu.setMap(map)），onDraw方法還未執行，所以我將控制元件中的重繪方法invalidate()給注掉了，所以提醒大家，如果tu.setMap(map)執行比較靠後的話，在自定義控制元件中，給map賦值後加上重繪方法invalidate()。

android 自定義控件之簡單的loading框

void stroke color mat pri htm img 溫習時機　　好吧，久不動android，感覺自己已經快是條鹹魚了，趁著這周的開發任務已完成，下周的開發計劃未下來之際，來溫習一下android的自定義控件，於是就有了下面這個醜陋的玩意　　　　實現起

Android自定義控制元件之《折線圖的繪製》

金融軟體裡的行情分時圖，這是我們最常見的折線圖，當然了，折線圖的用途並不僅僅侷限於此，像一般在一定區間內，為了更好的能顯示出幅度的變化，那麼用折線圖來展示無疑是最符合效果的，當然了，網上也有很多的第

自定義控制元件之kotlin繪製折線圖和曲線圖

概述今天花了一天時間繪製了一個自定義的曲線圖和折線圖的自定義控制元件,可以說現在是身心疲憊了,有點累,下班回家寫這篇部落格總結下自己的繪製思路,如果有人喜歡的話,麻煩給個star了_; 其實這類曲線,折線和柱狀圖的庫現在特別多,而且也已經特別成熟了,

Android 自定義控件之繼承ViewGroup創建新容器

多個 osi count() arc ron min ole tro 定位歡迎大家來學習本節內容，前幾節我們已經學習了其他幾種自定義控件，分別是Andriod 自定義控件之音頻條及 Andriod 自定義控件之創建可以復用的組合控件還沒有學習的同學請先去學習下，因為本節將

Android 自定義控件之日期選擇控件

gin pri 選中 att files ger bottom null count() 效果如下: 調用的代碼: @OnClick(R.id.btn0) public void btn0() { final AlertDialog dialog

android--------自定義控件之 ViewGroup

lines resolv else 指定並且 bsp view att param 前面幾篇講了自定義控件的組合控件，地址：http://www.cnblogs.com/zhangqie/p/8985612.html 今天這篇博文主要來說說自定義控件的 ViewGr

Android自定義控制元件之區域性圖片放大鏡--BiggerView

零、前言：本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法，你也將對onMesure有更深的認識 2.關於bitmap的簡單處理，及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡)，前者為後者作為鋪墊。 4.最後會

Android 自定義View例項之進度圓環

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android 自定義View例項之 “京東跑”

【Android 自定義View】之PermuteView

1.前言最近在專案迭代時，遇到新的UI需求，如下：看到之後我分析了一下有那些實現方式： 1.使用第三款庫分別實現上下部分的UI功能。 2.讓UI做圖片，同background+press實現。 3.自定義View實現。第 1

Android自定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理汽車之家的下拉重新整理分為三個狀態：第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀

Android自定義控制元件之實現滑動選擇開關

前言：今天我們仿照著Google給我們提供的Switch控制元件來進行一次模仿，自己動手打造一個可以換滑動圖片以及背景的圖片。 -----------------分割線--------------- 先看一下google提供的Switc控制元件：其實用法很簡單就當普通的

Android 自定義控制元件之繼承view

一.自定義控制元件的型別: 1.繼承view（自繪檢視：view中的內容是我們自己繪製出來的，需要重寫onDraw方法） 2.繼承已有原生控制元件 3.自定義組合控制元件（將系統原生的控制元件組合到一起）本

android自定義控制元件之圓形進度條（帶動畫）

首先貼上圖片：額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了下面說重點，如何來寫一個這樣的自定義控制元件。首先，需要有一個灰色的底圖，來作為未填充時的進度條；然後，根據傳入的當前進度值，繪製填充時的進度圓

Android自定義控制元件之百分比圓環進度條

首先我們先來看一下效果分析我們來看這個進度條應該分為3個小部分 1.中間的圓 2.外邊的圓環 3.中間的文字分開畫這3部分就是需要我們自己畫出來的，因此我們需要3根畫筆 //設定中心園的畫筆

Android自定義控制元件之圓形頭像

重寫ImageView public class CircleImageView extends ImageView { private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; p

Android 自定義控制元件之命運之輪（抽獎轉盤）

1 思路首先肯定是要繪製扇形的，每一個獎品為一個扇形區分開，然後在扇形中得有當前獎品的說明，最後讓這個輪盤轉起來就行了。說起來很簡單，但是在繪製的時候，特別是繪製文字的時候還有有一些細節需要注意的，也不是難點，只是要理清楚那些地方應該怎麼去畫，怎麼獲取需要繪製的座標。

Android 自定義控制元件之ViewPager Indicator實現方式

介紹 ViewPager 的Indicator實現兩種效果如下圖所示：效果一效果二佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln

Android自定義控制元件之掃描動畫UI

前言最近有一個需求，就是做一個掃描的UI，看了很多掃描動畫，發現酷狗的掃描動畫挺漂亮的，所以就做了一個相似的掃描動畫，廢話不多說，先看一下最終的效果吧。最終效果圖介紹首先我們看一下這個效果，它由以下幾部分組成： 1.中間一個音符圖片

Android自定義控制元件之測量onMeasure

由上圖可知，語法角度：子類可以重寫onMeasure，只能繼承View的measure，setMeasuredDimension方法。測量流程分為兩種情況討論：容器控制元件ViewGroup，原始的View(非容器控制元件)。原始的View測量，只需要測量自己的寬高；而容器控制元件需要先測量所有的子View

android自定義折線圖——之簡單的溫度折線圖

相關推薦