学习了前面两篇的知识,对于本篇实现的效果,相信大家都不会感觉太困难,我要实现的效果是什么样呢?下面请先看效果图:

  

  看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制。

  首先是我们的attrs文件:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.  
  4. <attr name="firstColor" format="color"/>
  5. <attr name="secondColor" format="color"/>
  6. <attr name="circleWidth" format="dimension"/>
  7. <attr name="speed" format="integer"/>
  8.  
  9. <declare-styleable name="CustomView">
  10. <attr name="firstColor" />
  11. <attr name="secondColor" />
  12. <attr name="circleWidth" />
  13. <attr name="speed" />
  14. </declare-styleable>
  15.  
  16. </resources>

  接下来是我们重写View类的自定义View类:

  1. public class MySelfCircleView extends View {
  2.  
  3. /*
  4. * 第一圈颜色
  5. */
  6. int firstColor;
  7. /*
  8. * 第二圈颜色
  9. */
  10. int secondColor;
  11. /*
  12. * 圆的宽度
  13. */
  14. int circleWidth;
  15. /*
  16. * 速率
  17. */
  18. int speed;
  19. /*
  20. * 画笔
  21. */
  22. Paint mPaint;
  23. /*
  24. * 进度
  25. */
  26. int mProgress;
  27. /*
  28. * 是否切换标志
  29. */
  30. boolean isNext;
  31.  
  32. public MySelfCircleView(Context context, AttributeSet attrs,
  33. int defStyleAttr) {
  34. super(context, attrs, defStyleAttr);
  35. TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);
  36. int n = typedArray.getIndexCount();
  37. for(int i=0; i<n; i++){
  38. int attr = typedArray.getIndex(i);
  39. switch (attr) {
  40. case R.styleable.CustomView_firstColor:
  41. firstColor = typedArray.getColor(attr, Color.RED);
  42. break;
  43. case R.styleable.CustomView_secondColor:
  44. secondColor = typedArray.getColor(attr, Color.RED);
  45. break;
  46. case R.styleable.CustomView_circleWidth:
  47. circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
  48. TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
  49. break;
  50. case R.styleable.CustomView_speed:
  51. speed = typedArray.getInt(attr, 20);
  52. break;
  53. }
  54. }
  55. typedArray.recycle();
  56.  
  57. mPaint = new Paint();
  58. new Thread(new Runnable() {
  59. @Override
  60. public void run() {
  61. while (true) {
  62. mProgress++;
  63. if (mProgress == 360) {
  64. mProgress = 0;
  65. if (!isNext)
  66. isNext = true;
  67. else
  68. isNext = false;
  69. }
  70. postInvalidate();
  71. try {
  72. Thread.sleep(speed);
  73. } catch (InterruptedException e) {
  74. e.printStackTrace();
  75. }
  76. }
  77. }
  78. }).start();
  79. }
  80.  
  81. public MySelfCircleView(Context context, AttributeSet attrs) {
  82. this(context, attrs, 0);
  83. }
  84.  
  85. public MySelfCircleView(Context context) {
  86. this(context, null);
  87. }
  88.  
  89. @Override
  90. protected void onDraw(Canvas canvas) {
  91. super.onDraw(canvas);
  92. int centre = getWidth() / 2; // 获取圆心的x坐标
  93. int radius = centre - circleWidth / 2;// 半径
  94. mPaint.setStrokeWidth(circleWidth); // 设置圆环的宽度
  95. mPaint.setAntiAlias(true); // 消除锯齿
  96. mPaint.setStyle(Paint.Style.STROKE); // 设置空心
  97. RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
  98. if (!isNext) {// 第一颜色的圈完整,第二颜色跑
  99. mPaint.setColor(firstColor); // 设置圆环的颜色
  100. canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
  101. mPaint.setColor(secondColor); // 设置圆环的颜色
  102. canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
  103. } else {
  104. mPaint.setColor(secondColor); // 设置圆环的颜色
  105. canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
  106. mPaint.setColor(firstColor); // 设置圆环的颜色
  107. canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
  108. }
  109. }
  110.  
  111. }

  最后是我们的布局文件:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5.  
  6. <com.example.myselfview.view.MySelfCircleView
  7. android:layout_width="120dp"
  8. android:layout_height="120dp"
  9. android:layout_marginTop="20dp"
  10. android:layout_alignParentTop="true"
  11. android:layout_centerHorizontal="true"
  12. zhy:circleWidth="15dp"
  13. zhy:firstColor="#D4F668"
  14. zhy:secondColor="#2F9DD2"
  15. zhy:speed="10" />
  16.  
  17. <com.example.myselfview.view.MySelfCircleView
  18. android:layout_width="200dp"
  19. android:layout_height="200dp"
  20. android:layout_alignParentBottom="true"
  21. android:layout_centerHorizontal="true"
  22. zhy:circleWidth="24dp"
  23. android:layout_marginBottom="40dp"
  24. zhy:firstColor="#16A3FA"
  25. zhy:secondColor="#D20F02"
  26. zhy:speed="5" />
  27.  
  28. </RelativeLayout>

  好了,到这里我们的效果就算大工告成,新童鞋的可以写写看,个人感觉自定义View需要大量的联系,才能为我所用。

Android自定义View之圆环交替 等待效果的更多相关文章

  1. Android 自定义View (三) 圆环交替 等待效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24500107 一个朋友今天有这么个需求(下图),我觉得那自定义View来做还是很 ...

  2. Android自定义View——彩色圆环统计图

      1.初始化变量 圆的粗细:圆环的大小. 标注:文字前面的圆点. 分配比例大小:由于需要计算圆环扫过的角度,计算方法使用:(比例/100)*360度,用百分比算出360度占用了多少,由于比例/100 ...

  3. android自定义view实现公章效果

    上次去一个公司面试,面试官问了一个题,怎么用android的自定义view实现一个公章的效果,据说这是华为之前的面试题,我想了下,要是公章的效果,最外层是一个圆,里面是一个五角星,但是这文字怎么画呢, ...

  4. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  5. Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53303872 本文出自:[openXu的博客] 1分析 2定义组合控件布局 3继承最外层控件 ...

  6. android自定义view实现progressbar的效果

    一键清理是很多Launcher都会带有的功能,其效果也比较美观.实现方式也许有很多中,其中常见的是使用图片drawable来完成的,具体可以参考这篇文章:模仿实现360桌面水晶球式的一键清理特效.本文 ...

  7. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

  8. Android 自定义View合集

    自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...

  9. Android 自定义 view(三)—— onDraw 方法理解

    前言: 上一篇已经介绍了用自己定义的属性怎么简单定义一个view<Android 自定义view(二) -- attr 使用>,那么接下来我们继续深究自定义view,下一步将要去简单理解自 ...

随机推荐

  1. MVVM模式和在WPF中的实现(二)数据绑定

    MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  2. C语言 · 奇偶判断

    问题描述 能被2整除的数称为偶数,不能被2整除的数称为奇数.给一个整数x,判断x是奇数还是偶数. 输入格式 输入包括一个整数x,0<=x<=100000000. 输出格式 如果x是奇数,则 ...

  3. HTML kbd键盘元素

    1. 说明 kbd :即Keyboard Input Element(键盘输入元素).表示键盘按键的语义元素,常用于网页上对快捷键.按键说明的场景. 样式规格:内联样式. 为了在页面上突出显示,可以给 ...

  4. [APUE]文件和目录(中)

    一.link.unlink.remove和rename 一个文件可以有多个目录项指向其i节点.使用link函数可以创建一个指向现存文件连接 #include <unistd.h> int ...

  5. Shell碎碎念

    1. 字符串如何大小写转换 str="This is a Bash Shell script." 1> tr方式 newstr=`tr '[A-Z]' '[a-z]' < ...

  6. [C#] C# 知识回顾 - 特性 Attribute

    C# 知识回顾 - 特性 Attribute [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5911289.html 目录 特性简介 使用特性 特性 ...

  7. 用WebRequest +HtmlAgilityPack 从外网抓取数据到本地

    相信大家对于WebRequest 并不陌生,我们在C#中发请求的方式,就是创建一个WebRequest .那么如果我们想发一个请求到外网,比如国内上不了的一些网站,那么该怎么做呢? 其实WebRequ ...

  8. Jquery(1)

    鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...

  9. 火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

    火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图.导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的.火星坐标的真实名称应该是GCJ- ...

  10. bzoj1901--树状数组套主席树

    树状数组套主席树模板题... 题目大意: 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]--a[ ...