Android自定义View之微信雷达

版权声明：本文为博主原创文章，未经博主允许不得转载。

     Android自定义View之微信雷达效果：gif图录制的好像有水印似的东西效果不好  真实运行效果更好没有那些水印

制作步骤：

先看住布局一个FrameLayout 

[html] view plain copy

print?

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     >  
5.     <test.chs.com.myradarview.MyRadarView  
6.         android:layout_width="match_parent"  
7.         android:layout_height="match_parent">  
8.     </test.chs.com.myradarview.MyRadarView>  
9.     <ImageView  
10.         android:layout_width="100dp"  
11.         android:layout_height="100dp"  
12.         android:layout_gravity="center"  
13.         android:layout_marginTop="10dp"  
14.         android:src="@mipmap/girl"/>  
15. </FrameLayout>  

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <test.chs.com.myradarview.MyRadarView        android:layout_width="match_parent"        android:layout_height="match_parent">    </test.chs.com.myradarview.MyRadarView>    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_gravity="center"        android:layout_marginTop="10dp"        android:src="@mipmap/girl"/></FrameLayout>

之后是我们的自定义的View。因为真是项目中，我们可能把扫描到的东西显示在不同的圆圈之上，所以这里的自定义的view我们继承FrameLayout自定义一个ViewGroup。

首先 在onMeasure中设置其宽高为屏幕的宽高，因为我们这个控件是占满整个屏幕的

[html] view plain copy

print?

1. @Override  
2.    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
3.        setMeasuredDimension(screenWidth,screenHeight);  
4.    }  

 @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(screenWidth,screenHeight);    }

之后 先绘制底部的四个圆圈，空心的 半径依次增大

[html] view plain copy

print?

1. //绘制底部的  圆圈  
2.        canvas.drawCircle(screenWidth / 2, screenHeight / 2, screenWidth / 6, mPaintNormal);  
3.        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 2 * screenWidth / 6, mPaintNormal);  
4.        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 11 * screenWidth / 20, mPaintNormal);  
5.        canvas.drawCircle(screenWidth/2,screenHeight/2,7*screenHeight/16,mPaintNormal);  

 //绘制底部的  圆圈        canvas.drawCircle(screenWidth / 2, screenHeight / 2, screenWidth / 6, mPaintNormal);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 2 * screenWidth / 6, mPaintNormal);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 11 * screenWidth / 20, mPaintNormal);        canvas.drawCircle(screenWidth/2,screenHeight/2,7*screenHeight/16,mPaintNormal);

之后绘制其上上面的不停在旋转的圆。这个地方的实现思路就是，先绘制一个渐变的实心圆然后通过Matrix矩阵动画使其旋转，动画在handler的Runable中进行

绘制渐变的实心圆，通过给画笔设置shader 完成渐变。让画布canvas关联矩阵就可以通过矩阵控制画布

[html] view plain copy

print?

1. //绘制旋转的圆  它是一个渐变的圆形  
2.        Shader shader = new SweepGradient(screenWidth/2,screenHeight/2,Color.TRANSPARENT,Color.parseColor("#AA00ff00"));  
3.        mPaintCircle.setShader(shader);  
4.        canvas.concat(mMatrix);  
5.        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 7 * screenHeight / 16, mPaintCircle);  

 //绘制旋转的圆  它是一个渐变的圆形        Shader shader = new SweepGradient(screenWidth/2,screenHeight/2,Color.TRANSPARENT,Color.parseColor("#AA00ff00"));        mPaintCircle.setShader(shader);        canvas.concat(mMatrix);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 7 * screenHeight / 16, mPaintCircle);

全部代码：

[html] view plain copy

print?

1. package test.chs.com.myradarview;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Matrix;  
7. import android.graphics.Paint;  
8. import android.graphics.Shader;  
9. import android.graphics.SweepGradient;  
10. import android.os.Handler;  
11. import android.os.Message;  
12. import android.util.AttributeSet;  
13. import android.util.DisplayMetrics;  
14. import android.widget.FrameLayout;  
15.   
16. /**  
17.  * 作者：chs on 2016/1/16 11:05  
18.  * 邮箱：[e-mail]  
19.  */  
20. public class MyRadarView extends FrameLayout {  
21.     private Paint mPaintNormal;//绘制普通圆圈  
22.     private Paint mPaintCircle;//绘制懂得圆圈  
23.     private int screenWidth;  
24.     private int screenHeight;  
25.     private Matrix mMatrix;  
26.     private Handler mHandler = new Handler();  
27.     private int start;  
28.     private Runnable run = new Runnable() {  
29.         @Override  
30.         public void run() {  
31.             start+=4;  
32.             mMatrix = new Matrix();  
33.             mMatrix.postRotate(start,screenWidth/2,screenHeight/2);  
34.             MyRadarView.this.invalidate();  
35.             mHandler.postDelayed(run,50);  
36.         }  
37.     };  
38.     public MyRadarView(Context context) {  
39.         this(context, null);  
40.     }  
41.   
42.     public MyRadarView(Context context, AttributeSet attrs) {  
43.         this(context, attrs, 0);  
44.     }  
45.   
46.     public MyRadarView(Context context, AttributeSet attrs, int defStyleAttr) {  
47.         super(context, attrs, defStyleAttr);  
48.         setBackgroundResource(R.mipmap.bg);  
49.         initPaint();  
50.         screenWidth = context.getResources().getDisplayMetrics().widthPixels;  
51.         screenHeight = context.getResources().getDisplayMetrics().heightPixels;  
52.         mHandler.post(run);  
53.     }  
54.   
55.     private void initPaint() {  
56.         mPaintNormal = new Paint();  
57.         mPaintNormal.setAntiAlias(true);  
58.         mPaintNormal.setStrokeWidth(3);  
59.         mPaintNormal.setColor(Color.parseColor("#a1a1a1"));  
60.         mPaintNormal.setStyle(Paint.Style.STROKE);  
61.   
62.         mPaintCircle = new Paint();  
63.         mPaintCircle.setAntiAlias(true);  
64.         mPaintCircle.setColor(Color.parseColor("#AAAAAAAA"));  
65.   
66.     }  
67.   
68.     @Override  
69.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
70.         setMeasuredDimension(screenWidth,screenHeight);  
71.     }  
72.   
73.     @Override  
74.     protected void onDraw(Canvas canvas) {  
75.         //绘制底部的  圆圈  
76.         canvas.drawCircle(screenWidth / 2, screenHeight / 2, screenWidth / 6, mPaintNormal);  
77.         canvas.drawCircle(screenWidth / 2, screenHeight / 2, 2 * screenWidth / 6, mPaintNormal);  
78.         canvas.drawCircle(screenWidth / 2, screenHeight / 2, 11 * screenWidth / 20, mPaintNormal);  
79.         canvas.drawCircle(screenWidth/2,screenHeight/2,7*screenHeight/16,mPaintNormal);  
80.         //绘制旋转的圆  它是一个渐变的圆形  
81.         Shader shader = new SweepGradient(screenWidth/2,screenHeight/2,Color.TRANSPARENT,Color.parseColor("#AA00ff00"));  
82.         mPaintCircle.setShader(shader);  
83.         canvas.concat(mMatrix);  
84.         canvas.drawCircle(screenWidth / 2, screenHeight / 2, 7 * screenHeight / 16, mPaintCircle);  
85.         super.onDraw(canvas);  
86.     }  
87. }  

package test.chs.com.myradarview;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Shader;import android.graphics.SweepGradient;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.widget.FrameLayout;/** * 作者：chs on 2016/1/16 11:05 * 邮箱：[e-mail] */public class MyRadarView extends FrameLayout {    private Paint mPaintNormal;//绘制普通圆圈    private Paint mPaintCircle;//绘制懂得圆圈    private int screenWidth;    private int screenHeight;    private Matrix mMatrix;    private Handler mHandler = new Handler();    private int start;    private Runnable run = new Runnable() {        @Override        public void run() {            start+=4;            mMatrix = new Matrix();            mMatrix.postRotate(start,screenWidth/2,screenHeight/2);            MyRadarView.this.invalidate();            mHandler.postDelayed(run,50);        }    };    public MyRadarView(Context context) {        this(context, null);    }    public MyRadarView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public MyRadarView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        setBackgroundResource(R.mipmap.bg);        initPaint();        screenWidth = context.getResources().getDisplayMetrics().widthPixels;        screenHeight = context.getResources().getDisplayMetrics().heightPixels;        mHandler.post(run);    }    private void initPaint() {        mPaintNormal = new Paint();        mPaintNormal.setAntiAlias(true);        mPaintNormal.setStrokeWidth(3);        mPaintNormal.setColor(Color.parseColor("#a1a1a1"));        mPaintNormal.setStyle(Paint.Style.STROKE);        mPaintCircle = new Paint();        mPaintCircle.setAntiAlias(true);        mPaintCircle.setColor(Color.parseColor("#AAAAAAAA"));    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(screenWidth,screenHeight);    }    @Override    protected void onDraw(Canvas canvas) {        //绘制底部的  圆圈        canvas.drawCircle(screenWidth / 2, screenHeight / 2, screenWidth / 6, mPaintNormal);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 2 * screenWidth / 6, mPaintNormal);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 11 * screenWidth / 20, mPaintNormal);        canvas.drawCircle(screenWidth/2,screenHeight/2,7*screenHeight/16,mPaintNormal);        //绘制旋转的圆  它是一个渐变的圆形        Shader shader = new SweepGradient(screenWidth/2,screenHeight/2,Color.TRANSPARENT,Color.parseColor("#AA00ff00"));        mPaintCircle.setShader(shader);        canvas.concat(mMatrix);        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 7 * screenHeight / 16, mPaintCircle);        super.onDraw(canvas);    }}