自定义View折线图

关于自定义View的重要性,自然不必多少,自定义view的好坏直接关系到这个人是否具备通往高级安卓工程师的标准。很多时候android没有给我们提供能够直接使用的波形图,我们需要自己去实现,并且大多数的自定义view还需要加上动画效果,点击事件等等。

首先看下项目的截图


分析:

1.上面的画圈的部分一共分为5个部分。

2.考虑是用继承viewgroup还是继承view。

3.上面的竖直的显示,是能够滑动的,数值也能跟着改变。


     针对这几个问题我们一一分析,Viewgroup与View有什么区别,大多数的新手可能就不太明白这点,在写自定义控件的时候不太明白什么时候需要继承View什么时候需要继承Viewgroup,实际上Viewgroup继承自View,但是Viewgroup可以包含多个View,打个比方,ViewGroup是一个容器,他的作用更加类似于linerlayout,View对应着imageview或者textview这些,我们的.xml布局在被解析绘制到屏幕上的时候,都是自上而下,一层层的深入,先知道父容器的大小,或者期望,再去给里面的自孩子布局,所以就自定义控件上来说,继承View比ViewGroup更简单,因为你不需要去管理自孩子的大小,或者布局位置这些,所以如上面所示,我们最好是用继承View去实现。


  在这篇文章中,用到的知识点主要有,事件的分发机制,接口回调,屏幕适应需要的复杂坐标计算,图片的绘制,图片的缩放,我会在代码中给出尽可能详细的注解,过程中就不在更多的描述。


布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <!--顶部部分-->
    <LinearLayout
        android:gravity="center_vertical"
        android:background="#003445"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/back_heart"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@mipmap/back_image_01_2x"
            />

        <TextView
            android:textSize="22sp"
            android:gravity="center"
            android:layout_weight="1"
            android:textColor="@color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="血压"
            />
        <ImageView

            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:layout_width="40dp"
            android:layout_height="40dp"

            />
    </LinearLayout>
    <LinearLayout

        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--圆形-->
        <LinearLayout

            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <FrameLayout
                android:layout_marginTop="15dp"
               android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@mipmap/percent_purple_ring_2x"
                    />


               <LinearLayout
                   android:layout_gravity="center"
                   android:orientation="horizontal"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content">

                   <TextView
                       android:layout_gravity="center_vertical"
                       android:gravity="center_vertical"
                       android:textSize="25sp"
                       android:textColor="@color/red"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="0"
                       />
                   <TextView
                       android:layout_gravity="center_vertical"

                       android:textSize="10sp"
                       android:textColor="@color/lightgray"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="/"
                       />
               </LinearLayout>

            </FrameLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView

                    android:layout_weight="1"
                    android:layout_marginBottom="5dp"
                    android:textSize="15sp"
                    android:layout_marginTop="15dp"
                    android:gravity="right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/red"
                    android:text="目标值:"
                    />
                <TextView
                    android:layout_weight="1"
                    android:layout_marginBottom="5dp"
                    android:textSize="15sp"
                    android:layout_marginTop="15dp"
                    android:gravity="left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#118C26"
                    android:text="7500"
                    />

            </LinearLayout>

        </LinearLayout>
        <!--文字描述-->
        <LinearLayout
            android:layout_marginTop="20dp"
            android:layout_weight="2"
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_marginTop="3dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                 <TextView
                        android:textSize="12sp"
                        android:layout_weight="1"
                        android:textColor="#808080"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="最高值"
                        />
                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:textColor="@color/red"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0.00"
                    />
                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="mmHg"
                    />
            </LinearLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:background="#C0C0C0"
                android:layout_width="match_parent"
                android:layout_height="1dp"/>


            <LinearLayout
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:textSize="12sp"
                    android:layout_weight="1"
                    android:textColor="#808080"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="平均值"
                    />
                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:textColor="@color/green"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0.00"
                    />
                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="mmHg"
                    />
            </LinearLayout>
            <TextView
                android:layout_marginTop="5dp"
                android:background="#C0C0C0"
                android:layout_width="match_parent"
                android:layout_height="1dp"/>
            <LinearLayout
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:textSize="12sp"
                    android:layout_weight="1"
                    android:textColor="#808080"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="最高值"
                    />
                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:textColor="@color/red"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0.00"
                    />

                <TextView
                    android:layout_marginRight="5dp"
                    android:textSize="12sp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="mmHg"
                    />

            </LinearLayout>

            <TextView
                android:layout_marginTop="5dp"
                android:background="#C0C0C0"
                android:layout_width="match_parent"
                android:layout_height="1dp"/>
        </LinearLayout>
    </LinearLayout>
    
    <com.eben.zhukeyunfu.Activity.view.MyFormView
        android:background="#46BDDA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.eben.zhukeyunfu.Activity.view.MyFormView>

</LinearLayout>

自定义View的代码:

这里需要注意的特别点是,自定义View中想要获取测量的宽高,需要使用

getMeasuredHeight()及getMeasuredWidth()

并且需要在onmeasure方法之后,也就是测量之后调用,否则无法获取到测量值



package com.eben.zhukeyunfu.Activity.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import com.eben.zhukeyunfu.R;
import java.util.ArrayList;
import java.util.List;

/*
 *  @项目名:  Zhukeyunfu 
 *  @包名:    com.eben.zhukeyunfu.Activity.view
 *  @文件名:   MyFormView
 *  @创建者:   Administrator
 *  @创建时间:  2017/2/13 16:12
 *  @描述:    TODO
 */
public class MyFormView extends View{
    private static final String TAG = "MyFormView";
    private Paint mPaint;
    private Paint mPaint1;
    private Paint mLinePaint;
    private int mViewTop;
    private int mSpeWidth;
    private int mSpeHeight;
    private int mSpeHeigh;
    private Bitmap mVerticalLine;
    private Matrix matrix = null;
    private Bitmap bitmapDisplay;
    private int mBitmapHeight;
    private int mBitmapWidht;
    /*设置缩放比例*/
    private float fScale = 1.0f;
    private int mViewHeight;
    private int mDy;
    private int mDx;
    /*bitmap x轴坐标*/
    private int mBitmapX=100;
    private Paint mBXPaint;
    private Paint mBlackPaint;
    private Paint mRencPaint;
    private int mStartX=10;
    private float mX;

    public MyFormView(Context context) {
        super(context);
    }

    public MyFormView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTextPaint1();
        initTextPaint2();
        initTextPaint3();
        initBoXingBitmap();
        initLinePaint();
        initRencPaint();
        initbitmap();

    }

    private void initRencPaint() {

        mRencPaint = new Paint();
        mRencPaint.setAntiAlias(true);//去锯齿
        mRencPaint.setColor(Color.WHITE);
        mRencPaint.setTextSize(20);
        //  消除字体锯齿
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    }

    private void initTextPaint3() {
        mBlackPaint = new Paint();
        mBlackPaint.setAntiAlias(true);//去锯齿
        mBlackPaint.setColor(Color.BLACK);
        mBlackPaint.setTextSize(20);
        //  消除字体锯齿
        mBlackPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    }

    private void initBoXingBitmap() {
        mBXPaint = new Paint();
        mBXPaint.setAntiAlias(true);//去锯齿
        mBXPaint.setColor(Color.GRAY);
        mBXPaint.setTextSize(20);
        //  消除字体锯齿
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
    }

    private void initbitmap() {

        mVerticalLine = BitmapFactory.decodeResource(getResources(), R.mipmap.flag_small_2x);

        bitmapDisplay = mVerticalLine;

        matrix = new Matrix();
        //  获取图片高度和宽度
        mBitmapWidht = mVerticalLine.getWidth();
        mBitmapHeight = mVerticalLine.getHeight();

    }

    private void initLinePaint() {
        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);//去锯齿
        //配置画笔,画空心圆
        mLinePaint.setStyle(Paint.Style.STROKE);
        //设置画笔宽度
        mLinePaint.setStrokeWidth(3);

        //设置画笔颜色
        mLinePaint.setColor(Color.WHITE);
    }

    /*获取自定义view的宽度*/
    private void getViewXY() {
        mViewTop=getMeasuredWidth();
        mViewHeight =getMeasuredHeight();
    }

    /*初始化文字画笔*/
    private void initTextPaint1() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//去锯齿
        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(20);
        //  消除字体锯齿
        mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    }
    /*初始化文字画笔*/
    private void initTextPaint2() {
        mPaint1 = new Paint();
        mPaint1.setAntiAlias(true);//去锯齿
        mPaint1.setColor(Color.WHITE);
        mPaint1.setTextSize(15);
        //  消除字体锯齿
        mPaint1.setFlags(Paint.ANTI_ALIAS_FLAG);
    }

    //  设置缩放比例
    private void setScale() {
        matrix.reset();
        float sc=(getMeasuredHeight()-100.0f)/mBitmapHeight;
        Log.d(TAG,"view的高度"+getMeasuredHeight()+"图片宽度"+mBitmapHeight+"缩放比例"+sc);
        matrix.postScale(1.0f, sc);
        bitmapDisplay = Bitmap.createBitmap(mVerticalLine,0,0,mBitmapWidht,mBitmapHeight,matrix,true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /*此处是用来测量屏幕的宽度的,其实也就是view的宽度*/
        mSpeWidth = MeasureSpec.getSize(widthMeasureSpec);
        mSpeHeigh = MeasureSpec.getSize(heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /*必须放在这个之后,否则无法获取到view的宽高*/
        getViewXY();
        setScale();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawText("最高心率",50,30,mPaint);
        mPaint.setTextSize(15);
        canvas.drawText(490/mBitmapHeight+"/"+mSpeHeigh,120,30,mPaint1);

        /*划线*/
        //起始点坐标

        int startY = 92;
        int stopX  = mSpeWidth-10, stopY = 94;//终点坐标

        mDy = (int)(0.5*(getHeight()-startY))-20;
        mDx = (int)((getWidth()-60)/4);
        float mmdx=mDx/6;
        /*高度mViewHeight  592*/
        /*第一条线*/
        canvas.drawLine(mStartX, startY, stopX, stopY, mPaint);
        canvas.drawText(150+"/",mSpeWidth-70,startY+30,mPaint1);
        /*第二条线*/
        canvas.drawLine(mStartX, startY+ mDy, stopX, startY+ mDy, mPaint);
        canvas.drawText(75+"/", mSpeWidth-70, startY+ mDy +30, mPaint1);
         /*第三条线*/
        canvas.drawLine(mStartX, startY+ mDy + mDy, stopX, startY+ mDy + mDy, mPaint);

         /*画竖线*/
        canvas.drawLine(mStartX +20, startY+ mDy + mDy, mStartX +20, startY+ mDy + mDy +15, mPaint);

        canvas.drawLine(mStartX +20+mDx, startY+ mDy + mDy, mStartX +20+mDx, startY+ mDy + mDy +15, mPaint);

        canvas.drawLine(mStartX +20+mDx*2, startY+mDy+mDy, mStartX +20+mDx*2, startY+mDy+mDy+15, mPaint);

        canvas.drawLine(mStartX +20+mDx*3, startY+mDy+mDy, mStartX +20+mDx*3, startY+mDy+mDy+15, mPaint);

        canvas.drawLine(mStartX +20+mDx*4, startY+mDy+mDy, mStartX +20+mDx*4, startY+mDy+mDy+15, mPaint);

        canvas.drawText(0+"", mStartX +20-3, startY+ mDy + mDy +15+15, mPaint1);
        canvas.drawText(6+"", mStartX +20+mDx-3, startY+ mDy + mDy +15+15, mPaint1);
        canvas.drawText(12+"", mStartX +20+mDx*2-4, startY+ mDy + mDy +15+15, mPaint1);
        canvas.drawText(18+"", mStartX +20+mDx*3-4, startY+ mDy + mDy +15+15, mPaint1);
        canvas.drawText(24+"", mStartX +20+mDx*4-4, startY+ mDy + mDy +15+15, mPaint1);

        /*画图片*/

        canvas.drawBitmap(bitmapDisplay,mBitmapX,60,mPaint);

       /*划线 24个点   高度0~150     startY+mDy+mDy*/


        /*话图片旁边的文字*/

        /*获取时间*/
        int time= (int) ((mBitmapX+mBitmapWidht/2-(30))/((getWidth()-60)/24));
        if(mBitmapX>=getMeasuredHeight()/2){
            RectF oval3 = new RectF(mBitmapX-90, 40, mBitmapX-5, 100);// 设置个新的长方形
            canvas.drawRoundRect(oval3, 10, 10, mRencPaint);//第二个参数是x半径,第三个参数是y半径
            canvas.drawText(time+":00", mBitmapX-80,65, mBlackPaint);
            canvas.drawText(75+"/", mBitmapX-80,90, mBlackPaint);

        }if(mBitmapX<getMeasuredHeight()/2){
            RectF oval3 = new RectF(mBitmapX+20+mBitmapWidht/2, 40, mBitmapX+30+80+mBitmapWidht/2, 100);// 设置个新的长方形
            canvas.drawRoundRect(oval3, 10, 10, mRencPaint);//第二个参数是x半径,第三个参数是y半径
            canvas.drawText(time+":00", mBitmapX+30+mBitmapWidht/2,65, mBlackPaint);
            canvas.drawText(75+"/", mBitmapX+30+mBitmapWidht/2, 90, mBlackPaint);
        }

        /*这是0*/

       	/* float mmdx=mDx/6;*/
	//这些都是假的数据,如果有需要可以使用真实的数据,目前是按照24小时,获取24个数据

        List<Integer> mylist =new ArrayList<>();
        mylist.add(60);
        mylist.add(70);
        mylist.add(80);
        mylist.add(55);
        mylist.add(40);
        mylist.add(20);
        mylist.add(60);
        mylist.add(70);
        mylist.add(80);
        mylist.add(55);
        mylist.add(40);
        mylist.add(20);
        mylist.add(90);
        mylist.add(70);
        mylist.add(20);
        mylist.add(45);
        mylist.add(35);
        mylist.add(110);
        mylist.add(90);
        mylist.add(70);
        mylist.add(20);
        mylist.add(45);
        mylist.add(35);
        mylist.add(35);

        int beforeX=0;
        int beforeY=0;

        for (int i=1;i<=mylist.size();i++){
            if (i==1){
                canvas.drawLine(mStartX +20+mmdx*(i-1), transleteY(mylist.get(i-1)), mStartX +20+mmdx*(i), transleteY(mylist.get(i)), mPaint1);
                beforeY=transleteY(mylist.get(i));
                beforeX= mStartX +20+(int) mmdx*(i);
            }if (i==24){

                canvas.drawLine(beforeX, beforeY, mStartX +20+mmdx*(i), transleteY(mylist.get(0)), mPaint1);

            }else {
                canvas.drawLine(beforeX, beforeY, mStartX +20+mmdx*(i), transleteY(mylist.get(i)), mPaint1);
                beforeY=transleteY(mylist.get(i));
                beforeX= mStartX +20+(int) mmdx*(i);
            }

        }

    }

    private int transleteY(int y) {
        return 92+ mDy + mDy-(mDy/75)*y;

    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取手指在屏幕上的坐标
        mX = event.getX();
        float y = event.getY();

        //获取手指的操作--》按下、移动、松开
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN://按下
                Log.i(TAG, "ACTION_DOWN");
               //Toast.makeText(getContext(), "横坐标"+x+"纵坐标"+y, Toast.LENGTH_SHORT).show();
                mBitmapX=(int) mX;

                if (mBitmapX<=30){
                    mBitmapX=30-mBitmapWidht/2;
                }
                if (mBitmapX>=(30+mDx*4)){
                    mBitmapX=30+mDx*4-mBitmapWidht/2;
                }

                postInvalidate();

                break;

            case MotionEvent.ACTION_MOVE://移动
                Log.i(TAG, "ACTION_MOVE");
                mBitmapX=(int) mX;

                if (mBitmapX<=30){
                    mBitmapX=30-mBitmapWidht/2;
                }
                if (mBitmapX>=(30+mDx*4)){
                    mBitmapX=30+mDx*4-mBitmapWidht/2;
                }
                postInvalidate();
                break;
            case MotionEvent.ACTION_UP://松开
                Log.i(TAG, "ACTION_UP");
                mBitmapX=(int) mX;

                if (mBitmapX<=30){
                    mBitmapX=30-mBitmapWidht/2;
                }
                if (mBitmapX>=(mStartX +20+mDx*4)){
                    mBitmapX=mStartX +20+mDx*4-mBitmapWidht/2;
                }

                postInvalidate();
                break;
        }
        return true;
    }

}

最后,直接复制代码到项目里面用吧,这里的代码都不是很复杂,主要是坐标计算比较麻烦点,拿去自己稍微修改修改,或者做些动画效果,一个牛逼的自定义波形图就出来了。

最后说一句,以后每周六更新一片博客,主要是为了自己学习,总结使用,也希望大家多支持,完全原创。







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值