android开发之实现动态打勾效果(DrawHookView)

今天产品中要实现这样的需求，想了想还是把它给整出来了！ 

第一步：自定义View 
实现步骤： 
1、先画好圆弧 
2、再画第一根线 
3、最后再画第二根线

[java]  view plain copy

1. /** 
2.  * DrawHook 
3.  * Created by Zane on 2015/3/4. 
4.  */  
5. public class DrawHookView extends View {  
6.     //绘制圆弧的进度值  
7.     private int progress = 0;  
8.     //线1的x轴  
9.     private int line1_x = 0;  
10.     //线1的y轴  
11.     private int line1_y = 0;  
12.     //线2的x轴  
13.     private int line2_x = 0;  
14.     //线2的y轴  
15.     private int line2_y = 0;  
16.   
17.     public DrawHookView(Context context) {  
18.         super(context);  
19.     }  
20.   
21.     public DrawHookView(Context context, AttributeSet attrs) {  
22.         super(context, attrs);  
23.     }  
24.   
25.     public DrawHookView(Context context, AttributeSet attrs, int defStyle) {  
26.         super(context, attrs, defStyle);  
27.     }  
28.   
29.     //绘制  
30.   
31.     @Override  
32.     protected void onDraw(Canvas canvas) {  
33.         super.onDraw(canvas);  
34.   
35.         progress++;  
36.   
37.         /** 
38.          * 绘制圆弧 
39.          */  
40.         Paint paint = new Paint();  
41.         //设置画笔颜色  
42.         paint.setColor(getResources().getColor(R.color.arc_blue));  
43.         //设置圆弧的宽度  
44.         paint.setStrokeWidth(5);  
45.         //设置圆弧为空心  
46.         paint.setStyle(Paint.Style.STROKE);  
47.         //消除锯齿  
48.         paint.setAntiAlias(true);  
49.   
50.         //获取圆心的x坐标  
51.         int center = getWidth() / 2;  
52.         int center1 = center - getWidth() / 5;  
53.         //圆弧半径  
54.         int radius = getWidth() / 2 - 5;  
55.   
56.         //定义的圆弧的形状和大小的界限  
57.         RectF rectF = new RectF(center - radius -1, center - radius -1 ,center + radius + 1, center + radius + 1);  
58.   
59.         //根据进度画圆弧  
60.         canvas.drawArc(rectF, 235, -360 * progress / 100, false, paint);  
61.   
62.         /** 
63.          * 绘制对勾 
64.          */  
65.         //先等圆弧画完，才话对勾  
66.         if(progress >= 100) {  
67.             if(line1_x < radius / 3) {  
68.                 line1_x++;  
69.                 line1_y++;  
70.             }  
71.             //画第一根线  
72.             canvas.drawLine(center1, center, center1 + line1_x, center + line1_y, paint);  
73.   
74.             if (line1_x == radius / 3) {  
75.                 line2_x = line1_x;  
76.                 line2_y = line1_y;  
77.                 line1_x++;  
78.                 line1_y++;  
79.             }  
80.             if (line1_x >= radius / 3 && line2_x <= radius) {  
81.                 line2_x++;  
82.                 line2_y--;  
83.             }  
84.             //画第二根线  
85.             canvas.drawLine(center1 + line1_x - 1, center + line1_y, center1 + line2_x, center + line2_y, paint);  
86.         }  
87.   
88.         //每隔10毫秒界面刷新  
89.         postInvalidateDelayed(10);  
90.     }  
91. }  

第二步：布局文件引用自定义View

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:orientation="vertical"  
4.               android:layout_width="fill_parent"  
5.               android:layout_height="fill_parent"  
6.               android:background="@color/color_fff"  
7.         >  
8.     <com.offcn.DrawHookViewDemo.DrawHookView  
9.             android:layout_width="90dp"  
10.             android:layout_height="90dp"  
11.             android:layout_centerInParent="true"  
12.             />  
13. </RelativeLayout>  

附colors.xml:

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <color name="arc_blue">#10a679</color>  
4.     <color name="color_fff">#ffffff</color>  
5. </resources>  

示例代码戳Here

https://github.com/ZaneLove/DrawHookView