关于自定义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; } }
最后，直接复制代码到项目里面用吧，这里的代码都不是很复杂，主要是坐标计算比较麻烦点，拿去自己稍微修改修改，或者做些动画效果，一个牛逼的自定义波形图就出来了。
最后说一句，以后每周六更新一片博客，主要是为了自己学习，总结使用，也希望大家多支持，完全原创。
9645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
