1.前言：
自己也是参考别人的一些自定义view例子，学习了一些基本的自定义view的方法。今天，我参考了一些资料，再结合自已的一些理解，做了一个一键清除的动画。当年，我实现这个是用了几张图片，采用Frame anination的方式来实现，但是这个方法，不灵活，并且占资源，下面，我就采用自定义view的方法来实现这个功能。
2.效果图：
3.具体详细代码
3.1 \res\values\attrs_on_key_clear_circle_view.xml
<resources> <declare-styleable name="OnKeyClearCircleView"> <attr name="innerCircleColor" format="color" /> <attr name="outCircleColor" format="color" /> <attr name="innerCircleRadius" format="integer" /> <attr name="progress" format="integer" /> <attr name="textSize" format="dimension" /> <attr name="outArcwidth" format="dimension" /> </declare-styleable></resources>
3.2 OnKeyClearCircleView.java
import android.content.Context;import android.content.res.TypedArray;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.graphics.SweepGradient;import android.util.AttributeSet;import android.util.Log;import android.view.View;import com.example.administrator.customview.R;public class OnKeyClearCircleView extends View implements Runnable{ private static final String TAG = "OnKeyClearCircleView"; private Paint paint; private Paint outCirclePaint; private Paint textPaint; private Paint outArcPaint; private Paint radarPain; private Paint pointPain; private int radarRotateDegree; private int innerCircleColor; private int innerCircleRadius; private int outCircleColor; private float outArcwidth; private SweepGradient outArcSweepGradient; private SweepGradient radarSweepGradient; private Bitmap pointDrawable; private Matrix pointRotate=new Matrix(); private int progress; private float textSize; private int padding; private float startAngle; private float radarSweepAngle; private float pointRotateDegree; private boolean isSart; public OnKeyClearCircleView(Context context) { super(context); init(null, 0); } public OnKeyClearCircleView(Context context, AttributeSet attrs) { super(context, attrs); init(attrs, 0); } public OnKeyClearCircleView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(attrs, defStyle); } private void init(AttributeSet attrs, int defStyle) { final TypedArray a = getContext().obtainStyledAttributes( attrs, R.styleable.OnKeyClearCircleView, defStyle, 0); innerCircleColor = a.getColor(R.styleable.OnKeyClearCircleView_innerCircleColor, Color.BLUE); outCircleColor = a.getColor(R.styleable.OnKeyClearCircleView_outCircleColor, Color.GRAY); innerCircleRadius = a.getInt(R.styleable.OnKeyClearCircleView_innerCircleRadius, 10); progress = a.getInt(R.styleable.OnKeyClearCircleView_progress,0); textSize = a.getDimension(R.styleable.OnKeyClearCircleView_textSize, 20); outArcwidth = a.getDimension(R.styleable.OnKeyClearCircleView_outArcwidth, 20); a.recycle(); pointDrawable = BitmapFactory.decodeResource(getResources(),R.drawable.point); isSart = false; startAngle = 0; radarRotateDegree = 0; radarSweepAngle = 0; pointRotateDegree = 0; padding = 5; paint = new Paint(); paint.setAntiAlias(true); paint.setColor(innerCircleColor); outCirclePaint = new Paint(); outCirclePaint.setAntiAlias(true); outCirclePaint.setColor(outCircleColor); outCirclePaint.setStyle(Paint.Style.FILL); textPaint = new Paint(); textPaint.setTextSize(textSize); textPaint.setAntiAlias(true); outArcPaint = new Paint(); outArcPaint.setAntiAlias(true); outArcPaint.setStyle(Paint.Style.STROKE); outArcPaint.setStrokeWidth(outArcwidth); outArcPaint.setStrokeCap(Paint.Cap.ROUND); radarPain = new Paint(); outArcPaint.setAntiAlias(true); pointPain = new Paint(); pointPain.setAntiAlias(true); Thread thread=new Thread(this); thread.start(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int d = (width >= height) ? height : width; setMeasuredDimension(d,d); } @Override protected void onDraw(Canvas canvas) { int width = getMeasuredWidth(); int height = getMeasuredHeight(); int pointX = width/2; int pointY = height/2; RectF rectf = new RectF(outArcwidth/2,outArcwidth/2,width-outArcwidth/2,height-outArcwidth/2); //outArcSweepGradient = new SweepGradient(0,0,getResources().getColor(R.color.start_color),getResources().getColor(R.color.end_color)); outArcSweepGradient = new SweepGradient(pointX,pointY,Color.WHITE,Color.WHITE); outArcPaint.setShader(outArcSweepGradient); canvas.drawArc(rectf,startAngle,180,false,outArcPaint); canvas.drawCircle(pointX,pointY,pointX -outArcwidth-padding,outCirclePaint); if(radarSweepAngle < 180){ radarSweepGradient = new SweepGradient(pointX,pointY,Color.WHITE,Color.RED); }else{ radarSweepGradient = new SweepGradient(pointX,pointY,Color.WHITE,Color.GREEN); } radarPain.setShader(radarSweepGradient); RectF rectfRadar = new RectF(outArcwidth+padding,outArcwidth+padding,width-outArcwidth-padding,height-outArcwidth-padding); canvas.drawArc(rectfRadar,0,radarSweepAngle,true,radarPain); canvas.save(); canvas.translate(pointX,pointY); pointRotate.setRotate(pointRotateDegree); canvas.drawBitmap(pointDrawable, pointRotate, pointPain); canvas.restore();; canvas.drawCircle(pointX,pointY,innerCircleRadius,paint); float textWidth = textPaint.measureText(progress + "%"); if(progress < 50){ //textPaint.setColor(oxbf3800); textPaint.setColor(Color.RED); }else{ //textPaint.setColor(new Color(ox6ec705)); textPaint.setColor(Color.GREEN); } canvas.drawText(progress+"%",pointX - textWidth/2,pointY + textSize/2 ,textPaint); } @Override public void run() { while(true){ if(isSart){ this.startAngle += 20; if(this.startAngle > 360){ this.startAngle = this.startAngle-360; } this.radarSweepAngle += 10; if(this.radarSweepAngle > 360){ this.radarSweepAngle = this.radarSweepAngle-360; } this.pointRotateDegree += 10; if(this.pointRotateDegree > 360){ this.pointRotateDegree = this.pointRotateDegree-360; } progress = (int)radarSweepAngle*100/360; postInvalidate(); try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } } } public void startClear(){ this.isSart = true; } public void stopClear(){ this.isSart =false; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; }}3.3 res\layout\activity_custom_view_activity4.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.example.administrator.customview.customview04.CustomViewActivity4"> <com.example.administrator.customview.customview04.OnKeyClearCircleView android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/onKeyClearCircleView" android:background="#fdda6f" app:innerCircleColor="#ffffff" app:innerCircleRadius="35" app:textSize="20sp" app:progress="82" app:outCircleColor="#dbdad7" app:outArcwidth="10dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="start" android:id="@+id/start" android:layout_below="@+id/onKeyClearCircleView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="end" android:id="@+id/end" android:layout_below="@+id/start" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /></RelativeLayout>
3.4 CustomViewActivity4.java
import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.Button;import com.example.administrator.customview.R;public class CustomViewActivity4 extends Activity implements View.OnClickListener { private OnKeyClearCircleView onKeyClearCircleView; private Button start; private Button end; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_custom_view_activity4); init(); } private void init() { onKeyClearCircleView = (OnKeyClearCircleView) findViewById(R.id.onKeyClearCircleView); start = (Button) findViewById(R.id.start); start.setOnClickListener(this); end = (Button) findViewById(R.id.end); end.setOnClickListener(this); } @Override public void onClick(View view) { if(view == start){ onKeyClearCircleView.startClear(); }else if(view == end){ onKeyClearCircleView.stopClear(); } }}4.代码下载地址：
5.参考资料：
1.Android自定义View实现雷达扫描动画
http://blog.csdn.net/oxygen0106/article/details/40144781
2.利用Android自定义View实现转盘旋转的效果
http://blog.csdn.net/canchew/article/details/5633421