0
点赞
收藏
分享

微信扫一扫

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


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

android开发之实现动态打勾效果(DrawHookView)_自定义

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




    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. new Paint();  
    41. //设置画笔颜色  
    42.         paint.setColor(getResources().getColor(R.color.arc_blue));  
    43. //设置圆弧的宽度  
    44. 5);  
    45. //设置圆弧为空心  
    46.         paint.setStyle(Paint.Style.STROKE);  
    47. //消除锯齿  
    48. 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. new RectF(center - radius -1, center - radius -1 ,center + radius + 1, center + radius + 1);  
    58.   
    59. //根据进度画圆弧  
    60. 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. 1, center + line1_y, center1 + line2_x, center + line2_y, paint);  
    86.         }  
    87.   
    88. //每隔10毫秒界面刷新  
    89. 10);  
    90.     }  
    91. }

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




    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:




    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

    举报

    相关推荐

    0 条评论