版权声明:本文为博主原创文章,未经博主允许不得转载。
Android自定义View之微信雷达效果:gif图录制的好像有水印似的东西效果不好 真实运行效果更好没有那些水印
制作步骤:
先看住布局一个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>
<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中设置其宽高为屏幕的宽高,因为我们这个控件是占满整个屏幕的
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- setMeasuredDimension(screenWidth,screenHeight);
- }
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(screenWidth,screenHeight);
}
之后 先绘制底部的四个圆圈,空心的 半径依次增大
- //绘制底部的 圆圈
- 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);
//绘制底部的 圆圈
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关联矩阵就可以通过矩阵控制画布
- //绘制旋转的圆 它是一个渐变的圆形
- 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);
//绘制旋转的圆 它是一个渐变的圆形
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);
全部代码:
- 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
- * 邮箱:657083984@qq.com
- */
- 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);
- }
- }
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
* 邮箱:657083984@qq.com
*/
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);
}
}