ZqChart 自定義折線圖

一個折線的view

折線在某些地方要使用到,這個在android中是沒有可以直接使用的控件的,zqChart就可以完成普通的折線的需求

如下圖

S70605-18053556.jpg

github鏈接
很多的自定義View

直接看使用方法

布局文件

 <com.example.cloud.zqchart.ZqChart
     android:id="@+id/chart"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"/>

mainactivity中的使用

public class MainActivity extends AppCompatActivity {
    private ZqChart mchart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mchart = (ZqChart) findViewById(R.id.chart);
        ArrayList<Chart> datas = new ArrayList<>();

        for (int i = 0; i < 12; i++) {
            for (int i1 = 0; i1 < 30; i1++) {
                Chart chart=new Chart();
                chart.dateDay= i1+1;
                chart.dateMonth= i+1;
                chart.money= new Random().nextInt(50)+100;
                datas.add(chart);
            }
        }
        mchart.setDatas(datas);
    }
}

實現(xiàn)的方法,主要是extend view,完成基本的圖形繪制

自定義view (代碼有點多,寫好了注釋了的,可以慢慢看,還有一個實體類,在后面附上)

public class ZqChart extends View {
    private Paint mPaintbg;
    private Paint mPaintMonthbg;
    private Paint mPaintLine;
    private Paint mPaintText;
    private Paint mPaintChoose;
    private Paint mPaintTouch;
    private int defaultWidth;
    private int defaultUnitHeight;
    List<Chart> datas;
    TreeSet<Chart> months;
    private int mChooseMonth;

    private List<Chart> mDatasSingle;
    private Chart mTouch;
    private float lastX;
    private float mDMoneyRateW;
    private int mMeasuredWidth;



    public ZqChart(Context context) {
        super(context);
        init();
    }


    public ZqChart(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ZqChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaintbg = new Paint();
        mPaintbg.setAntiAlias(true);
        mPaintbg.setStyle(Paint.Style.FILL);
        mPaintbg.setColor(Color.DKGRAY);
        mPaintMonthbg = new Paint();
        mPaintMonthbg.setAntiAlias(true);
        mPaintMonthbg.setStyle(Paint.Style.FILL);
        mPaintMonthbg.setColor(Color.BLACK);

        mPaintLine = new Paint();
        mPaintLine.setAntiAlias(true);
        mPaintLine.setStyle(Paint.Style.STROKE);
        mPaintLine.setColor(Color.WHITE);
        mPaintTouch = new Paint();
        mPaintTouch.setAntiAlias(true);
        mPaintTouch.setStyle(Paint.Style.STROKE);
        mPaintTouch.setStrokeWidth(3);
        mPaintTouch.setColor(Color.WHITE);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setStyle(Paint.Style.FILL);
        mPaintText.setColor(Color.WHITE);
        mPaintText.setTextSize(25);

        mPaintChoose = new Paint();
        mPaintChoose.setAntiAlias(true);
        mPaintChoose.setStyle(Paint.Style.FILL);
        mPaintChoose.setColor(Color.WHITE);

        months=new TreeSet<>(new Comparator<Chart>() {
            @Override
            public int compare(Chart o1, Chart o2) {
                return o1.getDateMonth()-o2.getDateMonth();
            }
        });

        defaultWidth=dip2px(getContext(),200);
        defaultUnitHeight=dip2px(getContext(),25);

        mChooseMonth=2;
        mDatasSingle = new ArrayList<>();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthmode = MeasureSpec.getMode(widthMeasureSpec);
        int heightmode = MeasureSpec.getMode(heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        if (datas!=null&&datas.size()>0){

            for (Chart data : datas) {
                months.add(data);
            }
            if (widthmode==MeasureSpec.AT_MOST){
                width=defaultWidth;
            }
            if (heightmode==MeasureSpec.AT_MOST){
                height= (int) (defaultUnitHeight*months.size()*1.2);
            }
        }

        setMeasuredDimension(width,height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int measuredHeight = getMeasuredHeight();
        mMeasuredWidth = getMeasuredWidth();
        Rect rect = new Rect(0,0, mMeasuredWidth,measuredHeight);
        canvas.save();
        //裁剪畫布,保存控件
        canvas.clipRect(rect);
        canvas.drawRect(rect,mPaintbg);
        Rect bounds = new Rect(); //文字的寬高
        mPaintText.getTextBounds("01月",0,"01月".length(), bounds);//將文字的寬高保存到bounds里
        int xUnit=(mMeasuredWidth -bounds.width()*2)/15; //平均分為15分,號數(shù)的位置

//        int xUnit=(mMeasuredWidth -bounds.width()*3)/6; //平均分為六分,號數(shù)的位置

        for (int i = 1; i <=15; i++) {
            String day=""+new DecimalFormat("#00").format(i*2);
            //draw 每天的日期
            canvas.drawText(day+"",i*xUnit-bounds.width()/4,measuredHeight-bounds.height(),mPaintText);
        }
        //每一月的位置控制
        int count=1;
        for (Chart month : months) {
            //draw 月份
            String day=""+new DecimalFormat("#00").format(month.getDateMonth());
            if (month.getDateMonth()==mChooseMonth){ //判斷觸摸到了那一個月份
                mPaintMonthbg.setColor(Color.RED);
            }else {
                mPaintMonthbg.setColor(Color.BLACK);
            }
            //畫橢圓,其實這就是矩形的變形,得到橢圓的兩個焦點,有矩形內(nèi)切出來的橢圓
            RectF oval = new RectF(
                    //起始的位置.獲取到屏幕的寬度,且起始位置默認為文字的寬度的兩倍
                    mMeasuredWidth - bounds.width() * 2,
                    measuredHeight - bounds.height() - count * defaultUnitHeight - bounds.height()-bounds.height()/2,
                    mMeasuredWidth - bounds.width() * 2 + bounds.width()+bounds.width()/2,
                    measuredHeight - bounds.height() - count * defaultUnitHeight + bounds.height() / 2
            );
            canvas.drawOval(oval,mPaintMonthbg);//畫橢圓
            //draw 月份的文字,位置很重要.bounds.width()*2+bounds.width()/4  文字的起始位置
            canvas.drawText(day+"月", mMeasuredWidth -bounds.width()*2+bounds.width()/4,measuredHeight-bounds.height()-count*defaultUnitHeight,mPaintText);
            month.setMonthAres(oval); //這里是位置的保存,為了之后觸摸的位置提供數(shù)據(jù)
            count++; //更新月份的計數(shù)更新
        }
        if (mChooseMonth==0){
            canvas.restore();
            return;
        }
        if (mDatasSingle.size()==0){
            canvas.restore();
            return;
        }
        //開始畫折線,數(shù)據(jù)準備
        float minMoney= mDatasSingle.get(0).getMoney();
        float maxMoney= mDatasSingle.get(0).getMoney();
        //獲取到最小和最大的數(shù)據(jù)
        for (Chart data : mDatasSingle) {
            minMoney=data.getMoney()<minMoney?data.getMoney():minMoney;
            maxMoney=data.getMoney()>maxMoney?data.getMoney():maxMoney;
        }
        //獲取到比例
       float dMoneyRateH=months.size()*defaultUnitHeight/(maxMoney-minMoney);
        mDMoneyRateW = 15*xUnit/(30);
        if (mDatasSingle.size()==1){
            canvas.drawPoint(mDatasSingle.get(0).getDateDay()* mDMoneyRateW,measuredHeight-bounds.height()-(mDatasSingle.get(0).getMoney()-minMoney)*dMoneyRateH,mPaintLine);
            canvas.restore();
            return;
        }
        Path path=new Path();
        //為什么要排序??????
        Collections.sort(mDatasSingle, new Comparator<Chart>() {
            @Override
            public int compare(Chart o1, Chart o2) {
                return o1.getDateDay()-o2.getDateDay();
            }
        });
        //獲取到折線的起始點
        float starX = mDatasSingle.get(0).getDateDay() * mDMoneyRateW;
        float starY = measuredHeight - bounds.height()*2 - (mDatasSingle.get(0).getMoney()-minMoney) * dMoneyRateH;
        //path 畫折線
        path.moveTo(starX, starY);
        //存儲點位
        mDatasSingle.get(0).pointX=starX;
        mDatasSingle.get(0).pointY=starY;
        //存儲位置
        mDatasSingle.get(0).ares=new RectF(starX- mDMoneyRateW /2,measuredHeight-bounds.height()-months.size()*defaultUnitHeight,starX+ mDMoneyRateW /2,measuredHeight-bounds.height());
        for (int i = 1; i < mDatasSingle.size(); i++) {
            float x = mDatasSingle.get(i).getDateDay() * mDMoneyRateW;
            float y = measuredHeight - bounds.height()*2 - (mDatasSingle.get(i).getMoney()-minMoney) * dMoneyRateH;
            //讓起始點和末尾點更新
            path.lineTo(x, y);
            mDatasSingle.get(i).pointX=x;
            mDatasSingle.get(i).pointY=y;
            mDatasSingle.get(i).ares=new RectF(x- mDMoneyRateW /2,measuredHeight-bounds.height()-months.size()*defaultUnitHeight,x+ mDMoneyRateW /2,measuredHeight-bounds.height());
            Log.i("mDatasSingle","ares:"+ mDatasSingle.get(i).ares);
        }
        //draw 折線 ,主要是位置的更新
        canvas.drawPath(path,mPaintLine);

   if (mTouch!=null){ //判斷觸摸的位置,draw 豎線
       //畫豎線
       canvas.drawLine(mTouch.pointX, measuredHeight - bounds.height()*2,mTouch.pointX, measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight,mPaintTouch);
       //中間的圓
       canvas.drawCircle(mTouch.pointX,mTouch.pointY,Math.max(bounds.height(),bounds.width())/2,mPaintbg);
       canvas.drawCircle(mTouch.pointX,mTouch.pointY,Math.max(bounds.height(),bounds.width())/2,mPaintTouch);
       String day=""+new DecimalFormat("#00").format(mTouch.getDateDay());
       canvas.drawText( day,mTouch.pointX-bounds.width()/3,mTouch.pointY+bounds.height()/2,mPaintText);
       //具體的數(shù)值
       Path pathValue=new Path();
       pathValue.moveTo(mTouch.pointX,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight);
       float money = mTouch.getMoney();
       Rect rectMonet = new Rect();
       mPaintText.getTextBounds(money+"",0,(money+"").length(), rectMonet);
       //draw 弧形邊框,貝塞爾曲線
       pathValue.lineTo(mTouch.pointX-rectMonet.width()/2,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight);
       pathValue.quadTo(mTouch.pointX-rectMonet.width()*1.0f,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight-rectMonet.height()
                        ,mTouch.pointX-rectMonet.width()/2,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight-rectMonet.height()*2);
       pathValue.lineTo(mTouch.pointX+rectMonet.width()/2,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight-rectMonet.height()*2);
       pathValue.quadTo(mTouch.pointX+rectMonet.width()*1.0f,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight-rectMonet.height()
               ,mTouch.pointX+rectMonet.width()/2,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight);
       pathValue.lineTo(mTouch.pointX,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight);
       canvas.drawPath(pathValue,mPaintTouch);
       canvas.drawText(money+"",mTouch.pointX-rectMonet.width()/2,measuredHeight - bounds.height()*4-months.size()*defaultUnitHeight-rectMonet.height()/2,mPaintText);
   }
        canvas.restore();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //觸摸的位置
                float x = event.getX();
                float y = event.getY();

                if (lastX==0||Math.abs(lastX-x)>mDMoneyRateW){
                    Log.e("onTouchEvent","x:"+x);
                    Log.e("onTouchEvent","y:"+y);
                    for (Chart chart : mDatasSingle) {
                        boolean contains = chart.ares.contains(x, y);
                        if (contains){
                            mTouch=chart;
                            invalidate();
                            break;
                        }
                    }
                    lastX =x;
                }

                break;
            case MotionEvent.ACTION_UP:
                //判斷出點擊的位置,是否屬于月份的位置
                float xUp = event.getX();
                float yUp = event.getY();
                if (xUp>6*mDMoneyRateW&&xUp<mMeasuredWidth){
                    for (Chart month : months) {
                        RectF monthAres = month.getMonthAres();
                        if (monthAres.contains(xUp,yUp)){
                            setChooseMonth(month.getDateMonth());
                        }
                    }
                }
                break;
        }

        return true;
    }

    /**
     * 根據(jù)手機的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)
     */
    public  int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    public void setDatas(List<Chart> datas) {
        this.datas = datas;
        mDatasSingle.clear();
        for (Chart data : datas) {
            if (data.getDateMonth()==mChooseMonth)
                mDatasSingle.add(data);
        }
        invalidate();
    }

    public void setChooseMonth(int chooseMonth) {
        mChooseMonth = chooseMonth;
        mTouch=null;
        mDatasSingle.clear();
        for (Chart data : datas) {
            if (data.getDateMonth()==mChooseMonth)
                mDatasSingle.add(data);
        }
        invalidate();
    }
}

實體類,其他的也就沒有了

package com.example.cloud.zqchart;
import android.graphics.Rect;
import android.graphics.RectF;

/**
 * Created by CLOUD on 2017/5/27.
*/

public class Chart {
   int dateDay;
   int dateMonth;
   float money;
   /**
    * 折線圖上的文職
    */
   float pointX;
   float pointY;
   RectF ares;
   /**
    * Y軸 上的位置（只用于Y軸繪圖 和 選擇月份）
    */

   float monthPointX;
   float monthPointY;
   RectF monthAres;

   public RectF getMonthAres() {
       return monthAres;
   }

   public void setMonthAres(RectF monthAres) {
       this.monthAres = monthAres;
   }

   public float getMonthPointX() {
       return monthPointX;
   }

   public void setMonthPointX(float monthPointX) {
       this.monthPointX = monthPointX;
   }

   public float getMonthPointY() {
       return monthPointY;
   }

   public void setMonthPointY(float monthPointY) {
       this.monthPointY = monthPointY;
   }

   public RectF getAres() {
       return ares;
   }

   public void setAres(RectF ares) {
       this.ares = ares;
   }

   public float getPointX() {
       return pointX;
   }

   public void setPointX(float pointX) {
       this.pointX = pointX;
   }

   public float getPointY() {
       return pointY;
   }

   public void setPointY(float pointY) {
       this.pointY = pointY;
   }

   public int getDateDay() {
       return dateDay;
   }

   public void setDateDay(int dateDay) {
       this.dateDay = dateDay;
   }

   public int getDateMonth() {
       return dateMonth;
   }

   public void setDateMonth(int dateMonth) {
       this.dateMonth = dateMonth;
   }

   public float getMoney() {
       return money;
   }

   public void setMoney(float money) {
       this.money = money;
   }
}

主要是onDraw里面的代碼,完成視圖的繪制,還有一個觸摸事件的控制

也可以直接拷貝代碼就能直接使用了

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容