Android简单自定义圆形和水平ProgressBar

ProgressBar简介

继承于View类，直接子类有AbsSeekBar和ContentLoadingProgressBar，其中AbsSeekBar的子类有SeekBar和RatingBar，可见这二者也是基于ProgressBar实现的。

1、ProgressBar有两个进度，一个是Android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。

2、ProgressBar分为确定的和不确定的，确定的是我们能明确看到进度，相反不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。属性android:indeterminate如果设置为true的话，那么ProgressBar就可能是圆形的滚动条或者水平的滚动条（由样式决定），但是我们一般时候，是直接使用Style类型来区分圆形还是水平ProgressBar的。

3、ProgressBar的样式设定其实有两种方式，在API文档中说明的方式如下：

  • Widget.ProgressBar.Horizontal
  • Widget.ProgressBar.Small
  • Widget.ProgressBar.Large
  • Widget.ProgressBar.Inverse
  • Widget.ProgressBar.Small.Inverse
  • Widget.ProgressBar.Large.Inverse

使用的时候可以这样：style="@android:style/Widget.ProgressBar.Small"，另外还有一种方式就是使用系统的attr，下面的方式是系统的style：

  • style="?android:attr/progressBarStyle"
  • style="?android:attr/progressBarStyleHorizontal"
  • style="?android:attr/progressBarStyleInverse"
  • style="?android:attr/progressBarStyleLarge"
  • style="?android:attr/progressBarStyleLargeInverse"
  • style="?android:attr/progressBarStyleSmall"
  • style="?android:attr/progressBarStyleSmallInverse"
  • style="?android:attr/progressBarStyleSmallTitle"

[java] view plain copy

  1. <ProgressBar
  2. android:id="@+id/progressBar1"
  3. style="?android:attr/progressBarStyleHorizontal"
  4. style="@android:style/Widget.ProgressBar.Horizontal"（等同于@android:attr）
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content" />

水平ProgressBar系统样式

我们去看一下style="?android:attr/progressBarStyleHorizontal"的源码，如下：

[html] view plain copy

  1. <pre name="code" class="java">    <style name="Widget.ProgressBar.Horizontal">
  2. <item name="android:indeterminateOnly">false</item>
  3. <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
  4. <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  5. <item name="android:minHeight">20dip</item>
  6. <item name="android:maxHeight">20dip</item>
  7. <item name="android:mirrorForRtl">true</item>
  8. </style>


一眼看出android:progressDrawable便是主角，继续看一下progress_horizontal的源码，如下：


[java] view plain copy





    

  1. <?xml version="1.0" encoding="utf-8"?>
    2. 

  2. <!-- Copyright (C) 2008 The Android Open Source Project
    3. 

  3. Licensed under the Apache License, Version 2.0 (the "License");
    4. 

  4. you may not use this file except in compliance with the License.
    5. 

  5. You may obtain a copy of the License at
    6. 

  6. http://www.apache.org/licenses/LICENSE-2.0
    7. 

  7. Unless required by applicable law or agreed to in writing, software
    8. 

  8. distributed under the License is distributed on an "AS IS" BASIS,
    9. 

  9. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    10. 

  10. See the License for the specific language governing permissions and
    11. 

  11. limitations under the License.
    12. 

  12. -->
    13. 

  13. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    14. 

  14. <item android:id="@android:id/background">
    15. 

  15. <shape>
    16. 

  16. <corners android:radius="5dip" />
    17. 

  17. <gradient
    18. 

  18. android:startColor="#ff9d9e9d"
    19. 

  19. android:centerColor="#ff5a5d5a"
    20. 

  20. android:centerY="0.75"
    21. 

  21. android:endColor="#ff747674"
    22. 

  22. android:angle="270"
    23. 

  23. />
    24. 

  24. </shape>
    25. 

  25. </item>
    26. 

  26. <item android:id="@android:id/secondaryProgress">
    27. 

  27. <clip>
    28. 

  28. <shape>
    29. 

  29. <corners android:radius="5dip" />
    30. 

  30. <gradient
    31. 

  31. android:startColor="#80ffd300"
    32. 

  32. android:centerColor="#80ffb600"
    33. 

  33. android:centerY="0.75"
    34. 

  34. android:endColor="#a0ffcb00"
    35. 

  35. android:angle="270"
    36. 

  36. />
    37. 

  37. </shape>
    38. 

  38. </clip>
    39. 

  39. </item>
    40. 

  40. <item android:id="@android:id/progress">
    41. 

  41. <clip>
    42. 

  42. <shape>
    43. 

  43. <corners android:radius="5dip" />
    44. 

  44. <gradient
    45. 

  45. android:startColor="#ffffd300"
    46. 

  46. android:centerColor="#ffffb600"
    47. 

  47. android:centerY="0.75"
    48. 

  48. android:endColor="#ffffcb00"
    49. 

  49. android:angle="270"
    50. 

  50. />
    51. 

  51. </shape>
    52. 

  52. </clip>
    53. 

  53. </item>
    54. 

  54. </layer-list>
    55. 




这里面有3个item，分别为：background、secondProgress、progress，看名字就能知道其大概作用，我们比较关心的应该是后两个，其实把这个文件copy一份到自己的项目下，就可以随心所欲的修改shape属性：圆角、渐变等等。


自定义水平ProgressBar


第一步，在drawable文件夹下新建一个progressbar_horizontal_1.xml：


[java] view plain copy





    

  1. <?xml version="1.0" encoding="utf-8"?>
    2. 

  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    3. 

  3. <!-- background -->
    4. 

  4. <item
    5. 

  5. android:id="@android:id/background"
    6. 

  6. android:drawable="@drawable/progress_patch_green">
    7. 

  7. </item>
    8. 

  8. <!-- progress -->
    9. 

  9. <item android:id="@android:id/progress">
    10. 

  10. <clip>
    11. 

  11. <nine-patch android:src="@drawable/progress_patch_galy" />
    12. 

  12. </clip>
    13. 

  13. </item>
    14. 

  14. <!-- second progress -->
    15. 

  15. <item android:id="@android:id/secondaryProgress">
    16. 

  16. <clip>
    17. 

  17. <nine-patch android:src="@drawable/progresspatch_blue" />
    18. 

  18. </clip>
    19. 

  19. </item>
    20. 

  20. </layer-list>
    21. 




上图中的progress和secondprogress中src的资源便是我自定义的，注意这三个之间的叠放顺序，background是最底层，中间的是progress最上层是second。


第二步，标准一点，在style中新建我们自定义的style：mProgress_horizontal：


[java] view plain copy





    

  1. <style name="mProgress_horizontal">
    2. 

  2. <item name="android:indeterminateOnly">false</item>
    3. 

  3. <item name="android:progressDrawable">@drawable/progressbar_horizontal_1</item><!-- progress_horizontal -->
    4. 

  4. <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    5. 

  5. <item name="android:minHeight">20dip</item>
    6. 

  6. <item name="android:maxHeight">20dip</item>
    7. 

  7. </style>
    8. 




上图中prpgressDrawable资源便是指向了我们自定义的progressbar_horizontal_1，大功告成。


第三步，组件引用：


[java] view plain copy





    

  1. <ProgressBar
    2. 

  2. android:id="@+id/progressBar1"
    3. 

  3. android:layout_width="match_parent"
    4. 

  4. android:layout_height="wrap_content"
    5. 

  5. android:background="@drawable/progress_backround"
    6. 

  6. android:padding="5dp"
    7. 

  7. android:progress="50"
    8. 

  8. style="@style/mProgress_horizontal"
    9. 

  9. android:secondaryProgress="20"
    10. 

  10. android:visibility="visible" />
    11. 




【附】


在这里我们也可以省略第二步创建style，直接在组件中android:progressDrawable引用自己的progressbar_horizontal_1，如下：


[java] view plain copy





    

  1. <ProgressBar
    2. 

  2. android:id="@+id/progressBar1"
    3. 

  3. android:indeterminate="false"
    4. 

  4. android:indeterminateOnly="false"
    5. 

  5. android:layout_width="match_parent"
    6. 

  6. android:layout_height="wrap_content"
    7. 

  7. android:background="@drawable/progress_backround"
    8. 

  8. android:padding="5dp"
    9. 

  9. android:progress="50"
    10. 

  10. android:maxHeight="20dp"
    11. 

  11. android:minHeight="20dp"
    12. 

  12. android:progressDrawable="@drawable/progressbar_horizontal_1"
    13. 

  13. android:secondaryProgress="20"
    14. 

  14. />
    15. 




第四步，效果图：




圆形ProgressBar系统样式


[java] view plain copy





    

  1. <ProgressBar
    2. 

  2. android:id="@+id/progressBar2"
    3. 

  3. style="@android:attr/progressBarStyleLarge"
    4. 

  4. android:layout_gravity="center_vertical"
    5. 

  5. android:layout_width="match_parent"
    6. 

  6. android:layout_height="wrap_content" />
    7. 




我们以progressBarStyleLarge为例进行探索，找到这个布局文件，源码如下：


[java] view plain copy





    

  1. <style name="Widget.ProgressBar.Large">
    2. 

  2. 　　<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
    3. 

  3. 　　<item name="android:minWidth">76dip</item>
    4. 

  4. 　　<item name="android:maxWidth">76dip</item>
    5. 

  5. 　　<item name="android:minHeight">76dip</item>
    6. 

  6. 　　<item name="android:maxHeight">76dip</item>
    7. 

  7. </style>
    8. 




同样一眼看出indeterminateDrawable便是主角了，继续看一下progress_large_white源码，如下：


[java] view plain copy





    

  1. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    2. 

  2. android:drawable="@drawable/spinner_white_76"
    3. 

  3. android:pivotX="50%"
    4. 

  4. android:pivotY="50%"
    5. 

  5. android:fromDegrees="0"
    6. 

  6. android:toDegrees="360" />
    7. 




看到这里就透彻了，就是在这里spinner_white_76进行不停的旋转的，我们copy一下这个文件，就可以直接自定义了。


自定义圆形ProgressBar


第一步，在drawable文件夹下新建：progressbar_circle_1.xml，如下：


[java] view plain copy





    

  1. <?xml version="1.0" encoding="utf-8"?>
    2. 

  2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    3. 

  3. android:drawable="@drawable/loading" //自定义的菊花图片
    4. 

  4. android:fromDegrees="0"
    5. 

  5. android:pivotX="50%"
    6. 

  6. android:pivotY="50%"
    7. 

  7. android:toDegrees="360" >
    8. 

  8. </rotate>
    9. 




第二步，在Style中定义mProgress_circle，如下：


[java] view plain copy





    

  1. <style name="mProgress_circle">
    2. 

  2. <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>
    3. 

  3. <item name="android:minWidth">25dp</item>
    4. 

  4. <item name="android:minHeight">25dp</item>
    5. 

  5. <item name="android:maxWidth">60dp</item>
    6. 

  6. <item name="android:maxHeight">60dp</item>
    7. 

  7. </style>
    8. 




支持大小自己随意定，别失真就好


第三步，组件中引用，如下：


[java] view plain copy





    

  1. <ProgressBar
    2. 

  2. android:id="@+id/progressBar2"
    3. 

  3. style="@style/mProgress_circle"
    4. 

  4. android:layout_gravity="center_vertical"
    5. 

  5. android:layout_width="match_parent"
    6. 

  6. android:indeterminateDuration="1200"
    7. 

  7. android:layout_height="wrap_content" />
    8. 




【附】
上面是通过一张图片填充android:indeterminateDrawable，我们也可以定义一个动画或者自定义颜色（shape）来实现，跟图片的用法一样：


定义动画 progress_circle_loading,xml：


[java] view plain copy





    

  1. <?xml version="1.0" encoding="UTF-8"?>
    2. 

  2. <animation-list android:oneshot="false"
    3. 

  3. 　　xmlns:android="http://schemas.android.com/apk/res/android">
    4. 

  4. 　　<item android:duration="100" android:drawable="@drawable/loading_1" />
    5. 

  5. 　　<item android:duration="100" android:drawable="@drawable/loading_2" />
    6. 

  6. 　　<item android:duration="100" android:drawable="@drawable/loading_3" />
    7. 

  7. 　　<item android:duration="100" android:drawable="@drawable/loading_4" />
    8. 

  8. 　　<item android:duration="100" android:drawable="@drawable/loading_5" />
    9. 

  9. 　　<item android:duration="100" android:drawable="@drawable/loading_6" />
    10. 

  10. </animation-list>
    11. 




style的indeterminateDrawable引入：


[html] view plain copy





    

  1. <pre name="code" class="java"><item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>
    2. 






定义shape颜色 progress_circle_shape.xml


[java] view plain copy





    

  1. <?xml version="1.0" encoding="utf-8"?>
    2. 

  2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
    3. 

  3. 　　android:fromDegrees="0"
    4. 

  4. 　　android:pivotX="50%"
    5. 

  5. 　　android:pivotY="50%"
    6. 

  6. 　　android:toDegrees="360" >
    7. 

  7. 　　<shape
    8. 

  8. 　　　　android:innerRadiusRatio="3"
    9. 

  9. 　　　　android:shape="ring"
    10. 

  10. 　　　　android:thicknessRatio="8"
    11. 

  11. 　　　　android:useLevel="false" >
    12. 

  12. 　　　　<gradient
    13. 

  13. 　　　　　　android:centerColor="#FFFFFF"
    14. 

  14. 　　　　　　android:centerY="0.50"
    15. 

  15. 　　　　　　android:endColor="#1E90FF"
    16. 

  16. 　　　　　　android:startColor="#000000"
    17. 

  17. 　　　　　　android:type="sweep"
    18. 

  18. 　　　　　　android:useLevel="false" />
    19. 

  19. 　　</shape>
    20. 

  20. </rotate>
    21. 




style的indeterminateDrawable引入：


[java] view plain copy





    

  1. <item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>
    2. 




效果图如下：




SeekBar的原理是一样的，不信你看下图，我就是用的seekbar


最后来张全家福：


				


				
时间： 2024-10-06 01:19:14 

		


		


	

	
	

		


		
Android简单自定义圆形和水平ProgressBar的相关文章


								

		

			

                【Android进度条】三种方式实现自定义圆形进度条ProgressBar
			

		

		

									

				一.通过动画实现 定义res/anim/loading.xml如下: [html] view plaincopyprint? <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> &			

		

	

				

		

			

                Android实现自定义圆形、圆角和椭圆ImageView（使用Xfermode图形渲染方法）
			

		

		

									

				一:简介: 在上一篇<Android实现圆形.圆角和椭圆自定义图片View(使用BitmapShader图形渲染方法)>博文中,采用BitmapShader方法实现自定义的圆形.圆角等自定义ImageView,这篇我们将采用更为常见的Xfermode渲染模式方案来实现圆形.圆角和椭圆样式的ImageView,同样本实例也是直接继承ImageView, 这样可以省很多事情,比如测量步骤,以及不需要自己去写设置图片的方法,本文使用Xfermode模式中的DST_IN模式来实现要达到的效果,当然大家			

		

	

				

		

			

                【Android】自定义圆形ImageView(圆形头像 可指定大小)
			

		

		

									

				最近在仿手Q的UI,这里面经常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这种头像的原理.不过里面提供的方法还有一个不足的地方就是不能根据实际需求改变图片的大小,也就是说提供的原图是大尺寸的,转换之后的图片也是大尺寸的,这显然不符合我们实际项目中的需求.于是我对里面介绍的第一种方法做了一番改进,使其能直接在XML中指定图片的大小. 大体步骤 将原图居中裁剪成正方形 根据指定的宽度对正方形进行缩放 裁剪成圆形 效果 代码实现 package com.de			

		

	

				

		

			

                Android 三种方式实现自定义圆形进度条ProgressBar
			

		

		

									

				一.通过动画实现 定义res/anim/loading.xml如下: <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:duration=&qu			

		

	

				

		

			

                【2014年最后的分享啦】Android实现自定义刮刮卡效果View
			

		

		

									

				一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文<Android实现自定义圆形.圆角和椭圆ImageView(使用Xfermode图形渲染方法)>, 今天我们来看看如何实现电商app里常用到的刮刮卡效果的view组件,其实原理和实现圆角图片的差不多,都是使用Xfermode渲染模式来实现的. (老规矩,源码在博文最后给出哈) 基本原理步骤是这样的			

		

	

				

		

			

                Android 学习笔记（5）—— ProgressBar
			

		

		

									

				作者:夏至  欢迎转载,也请保留这段申明,谢谢 这一章呢,我们来学习进度条ProgressBar,在我们的网页浏览或者其他下载的时候,总有一个缓冲的UI,那这里就是用到我们的Progress,它有两种形式,一种是圆形,一种是水平的. 先来看看样子 我们要实现就是上面的功能.这里我们先看看它的属性: · android:max   设置范围大小0到max · android:progress 设置当前进度 · android:secondaryProgress  设置第二进度,比如我们的看视频时的			

		

	

				

		

			

                写一个自定义进度颜色和圆形转动的ProgressBar(详细介绍)
			

		

		

									

				先上图: 我们得自定义ProgressBar的样式 <span style="white-space:pre"> </span><style name="self_define_ProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal"> //继承了android横向的ProgressBar的样式 <item name="			

		

	

				

		

			

                【Android开源项目分析】自定义圆形头像CircleImageView的使用和源码分析
			

		

		

									

				本文分为三大部分: CircleImageView的使用 CircleImageView源码分析 Android自定义View总结 CircleImageView项目源码下载: https://github.com/hdodenhof/CircleImageView 打开源码会发现主要就是一个继承了ImageView 的类--CircleImageView .java,代码优雅精致,效果很nice.下面会进行源码分析,让我加深了不少Canvas.BitmapShader.Matrix相关知识.			

		

	

				

		

			

                Android之自定义ProgressBar
			

		

		

									

				本文简单介绍下Android之自定义ProgressBar. 多的不说,先上图   布局文件 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" a