Android简单自定义圆形和水平ProgressBar seekbar select layer-list 转

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. <!-- Copyright (C) 2008 The Android Open Source Project  
3.   
4.      Licensed under the Apache License, Version 2.0 (the "License");  
5.      you may not use this file except in compliance with the License.  
6.      You may obtain a copy of the License at  
7.   
8.           http://www.apache.org/licenses/LICENSE-2.0  
9.   
10.      Unless required by applicable law or agreed to in writing, software  
11.      distributed under the License is distributed on an "AS IS" BASIS,  
12.      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  
13.      See the License for the specific language governing permissions and  
14.      limitations under the License.  
15. -->  
16.   
17. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
18.      
19.     <item android:id="@android:id/background">  
20.         <shape>  
21.             <corners android:radius="5dip" />  
22.             <gradient  
23.                     android:startColor="#ff9d9e9d"  
24.                     android:centerColor="#ff5a5d5a"  
25.                     android:centerY="0.75"  
26.                     android:endColor="#ff747674"  
27.                     android:angle="270"  
28.             />  
29.         </shape>  
30.     </item>  
31.      
32.     <item android:id="@android:id/secondaryProgress">  
33.         <clip>  
34.             <shape>  
35.                 <corners android:radius="5dip" />  
36.                 <gradient  
37.                         android:startColor="#80ffd300"  
38.                         android:centerColor="#80ffb600"  
39.                         android:centerY="0.75"  
40.                         android:endColor="#a0ffcb00"  
41.                         android:angle="270"  
42.                 />  
43.             </shape>  
44.         </clip>  
45.     </item>  
46.      
47.     <item android:id="@android:id/progress">  
48.         <clip>  
49.             <shape>  
50.                 <corners android:radius="5dip" />  
51.                 <gradient  
52.                         android:startColor="#ffffd300"  
53.                         android:centerColor="#ffffb600"  
54.                         android:centerY="0.75"  
55.                         android:endColor="#ffffcb00"  
56.                         android:angle="270"  
57.                 />  
58.             </shape>  
59.         </clip>  
60.     </item>  
61.      
62. </layer-list>  

这里面有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. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <!-- background -->  
5.     <item  
6.         android:id="@android:id/background"  
7.         android:drawable="@drawable/progress_patch_green">  
8.     </item>  
9.     <!-- progress -->  
10.     <item android:id="@android:id/progress">  
11.         <clip>  
12.             <nine-patch android:src="@drawable/progress_patch_galy" />  
13.         </clip>  
14.     </item>  
15.     <!-- second progress -->  
16.   
17.     <item android:id="@android:id/secondaryProgress">  
18.         <clip>  
19.             <nine-patch android:src="@drawable/progresspatch_blue" />  
20.         </clip>  
21.     </item>  
22.   
23. </layer-list>  

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

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

[java]  view plain copy

1. <style name="mProgress_horizontal">  
2.     <item name="android:indeterminateOnly">false</item>  
3.     <item name="android:progressDrawable">@drawable/progressbar_horizontal_1</item><!-- progress_horizontal -->  
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. </style>  

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

第三步，组件引用：

[java]  view plain copy

1. <ProgressBar  
2.     android:id="@+id/progressBar1"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="@drawable/progress_backround"  
6.     android:padding="5dp"  
7.     android:progress="50"  
8.     style="@style/mProgress_horizontal"  
9.     android:secondaryProgress="20"  
10.     android:visibility="visible" />  

【附】

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

[java]  view plain copy

1. <ProgressBar  
2.     android:id="@+id/progressBar1"  
3.     android:indeterminate="false"  
4.     android:indeterminateOnly="false"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="wrap_content"  
7.     android:background="@drawable/progress_backround"  
8.     android:padding="5dp"  
9.     android:progress="50"  
10.     android:maxHeight="20dp"  
11.     android:minHeight="20dp"  
12.     android:progressDrawable="@drawable/progressbar_horizontal_1"  
13.     android:secondaryProgress="20"  
14.     />  

第四步，效果图：

圆形ProgressBar系统样式

[java]  view plain copy

1. <ProgressBar  
2.     android:id="@+id/progressBar2"  
3.     style="@android:attr/progressBarStyleLarge"  
4.     android:layout_gravity="center_vertical"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="wrap_content" />  

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

[java]  view plain copy

1. <style name="Widget.ProgressBar.Large">  
2. 　　<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>  
3. 　　<item name="android:minWidth">76dip</item>  
4. 　　<item name="android:maxWidth">76dip</item>  
5. 　　<item name="android:minHeight">76dip</item>  
6. 　　<item name="android:maxHeight">76dip</item>  
7. </style>  

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

[java]  view plain copy

1. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:drawable="@drawable/spinner_white_76"  
3.     android:pivotX="50%"  
4.     android:pivotY="50%"  
5.     android:fromDegrees="0"  
6.     android:toDegrees="360" />  

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

自定义圆形ProgressBar

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

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/loading" //自定义的菊花图片  
4.     android:fromDegrees="0"  
5.     android:pivotX="50%"  
6.     android:pivotY="50%"  
7.     android:toDegrees="360" >  
8.   
9. </rotate>  

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

[java]  view plain copy

1. <style name="mProgress_circle">  
2.     <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>  
3.     <item name="android:minWidth">25dp</item>  
4.     <item name="android:minHeight">25dp</item>  
5.     <item name="android:maxWidth">60dp</item>  
6.     <item name="android:maxHeight">60dp</item>  
7. </style>  

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

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

[java]  view plain copy

1. <ProgressBar  
2.     android:id="@+id/progressBar2"  
3.     style="@style/mProgress_circle"  
4.     android:layout_gravity="center_vertical"  
5.     android:layout_width="match_parent"  
6.     android:indeterminateDuration="1200"  
7.     android:layout_height="wrap_content" />  

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

定义动画 progress_circle_loading,xml：

[java]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>    
2. <animation-list android:oneshot="false"    
3. 　　xmlns:android="http://schemas.android.com/apk/res/android">    
4. 　　<item android:duration="100" android:drawable="@drawable/loading_1" />    
5. 　　<item android:duration="100" android:drawable="@drawable/loading_2" />    
6. 　　<item android:duration="100" android:drawable="@drawable/loading_3" />    
7. 　　<item android:duration="100" android:drawable="@drawable/loading_4" />    
8. 　　<item android:duration="100" android:drawable="@drawable/loading_5" />    
9. 　　<item android:duration="100" android:drawable="@drawable/loading_6" />  
10. </animation-list>  

style的indeterminateDrawable引入：

[html]  view plain copy

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

定义shape颜色 progress_circle_shape.xml

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"    
3. 　　android:fromDegrees="0"    
4. 　　android:pivotX="50%"    
5. 　　android:pivotY="50%"    
6. 　　android:toDegrees="360" >    
7. 　　<shape    
8. 　　　　android:innerRadiusRatio="3"    
9. 　　　　android:shape="ring"    
10. 　　　　android:thicknessRatio="8"    
11. 　　　　android:useLevel="false" >    
12. 　　　　<gradient    
13. 　　　　　　android:centerColor="#FFFFFF"    
14. 　　　　　　android:centerY="0.50"    
15. 　　　　　　android:endColor="#1E90FF"    
16. 　　　　　　android:startColor="#000000"    
17. 　　　　　　android:type="sweep"    
18. 　　　　　　android:useLevel="false" />    
19. 　　</shape>    
20. </rotate>  

style的indeterminateDrawable引入：

[java]  view plain copy

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

效果图如下：

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

最后来张全家福：

Android开发：shape和selector和layer-list的（详细说明）

分类： Android 移动开发 2013-08-02 09:59  40226人阅读  评论(14)  收藏  举报

ANDROID xml bitmap 图片

目录(?)[+]

<shape>和<selector>在Android UI设计中经常用到。比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到<shape>和<selector>。
可以这样说，<shape>和<selector>在美化控件中的作用是至关重要。

在看这篇文章之前，可以看下这个小例子：镂空按钮的实现

1.Shape

简介

作用：XML中定义的几何形状

位置：res/drawable/文件的名称.xml

使用的方法：

Java代码中：R.drawable.文件的名称

XML中：Android:background="@drawable/文件的名称"

属性：

<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的常用属性：

<gradient>  渐变

Android:startColor  

起始颜色

Android:endColor  

结束颜色             

Android:angle  

渐变角度，0从左到右，90表示从下到上，数值为45的整数倍，默认为0；

Android:type  

渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

Android:color  

填充的颜色

<stroke >描边

Android:width 

描边的宽度

Android:color 

描边的颜色

Android:dashWidth

 表示'-'横线的宽度

Android:dashGap 

表示'-'横线之间的距离

<corners >圆角

Android:radius  

圆角的半径 值越大角越圆

Android:topRightRadius  

右上圆角半径

Android:bottomLeftRadius 

右下圆角角半径

Android:topLeftRadius 

左上圆角半径

Android:bottomRightRadius 

左下圆角半径

<padding >填充

android:bottom="1.0dip" 

底部填充

android:left="1.0dip" 

左边填充

android:right="1.0dip" 

右边填充

android:top="0.0dip" 

上面填充

2.Selector

简介

根据不同的选定状态来定义不同的现实效果

分为四大属性：

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另：

android:state_window_focused 默认时的背景图片

引用位置：res/drawable/文件的名称.xml

使用的方法：

Java代码中：R.drawable.文件的名称

XML中：Android:background="@drawable/文件的名称"

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8" ?>       
2. <selector xmlns:Android="http://schemas.android.com/apk/res/android">     
3. <!-- 默认时的背景图片-->      
4. <item Android:drawable="@drawable/pic1" />        
5. <!-- 没有焦点时的背景图片 -->      
6. <item   
7.    Android:state_window_focused="false"        
8.    android:drawable="@drawable/pic_blue"   
9.    />       
10. <!-- 非触摸模式下获得焦点并单击时的背景图片 -->      
11. <item   
12.    Android:state_focused="true"   
13.    android:state_pressed="true"     
14.    android:drawable= "@drawable/pic_red"   
15.    />     
16. <!-- 触摸模式下单击时的背景图片-->      
17. <item   
18.    Android:state_focused="false"   
19.    Android:state_pressed="true"     
20.    Android:drawable="@drawable/pic_pink"   
21.    />      
22. <!--选中时的图片背景-->      
23. <item   
24.    Android:state_selected="true"   
25.    android:drawable="@drawable/pic_orange"   
26.    />       
27. <!--获得焦点时的图片背景-->      
28. <item   
29.    Android:state_focused="true"   
30.    Android:drawable="@drawable/pic_green"   
31.    />       
32. </selector>   

3.layer-list   

简介：

将多个图片或上面两种效果按照顺序层叠起来

例子：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item>  
4.       <bitmap android:src="@drawable/android_red"  
5.         android:gravity="center" />  
6.     </item>  
7.     <item android:top="10dp" android:left="10dp">  
8.       <bitmap android:src="@drawable/android_green"  
9.         android:gravity="center" />  
10.     </item>  
11.     <item android:top="20dp" android:left="20dp">  
12.       <bitmap android:src="@drawable/android_blue"  
13.         android:gravity="center" />  
14.     </item>  
15. </layer-list>  

[html]  view plain copy

1. <ImageView  
2.     android:layout_height="wrap_content"  
3.     android:layout_width="wrap_content"  
4.     android:src="@drawable/layers" />  

效果图：

4.最后

以上三个标签可以揉合到一块儿来使用，所要实现的效果就是上面三种标签的说明，比如下面这个例子：

[html]  view plain copy

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:state_pressed="true">  
3.         <layer-list>  
4.             <item android:bottom="8.0dip">  
5.                 <shape>  
6.                     <solid android:color="#ffaaaaaa" />  
7.                 </shape>  
8.             </item>  
9.             <item>  
10.                 <shape>  
11.                     <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
12.   
13.                     <solid android:color="#ffaaaaaa" />  
14.   
15.                     <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
16.                 </shape>  
17.             </item>  
18.             <item>  
19.                 <shape>  
20.                     <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
21.   
22.                     <solid android:color="@color/setting_item_bgcolor_press" />  
23.                 </shape>  
24.             </item>  
25.         </layer-list>  
26.     </item>  
27.     <item>  
28.         <layer-list>  
29.             <item android:bottom="8.0dip">  
30.                 <shape>  
31.                     <solid android:color="#ffaaaaaa" />  
32.                 </shape>  
33.             </item>  
34.             <item>  
35.                 <shape>  
36.                     <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
37.   
38.                     <solid android:color="#ffaaaaaa" />  
39.   
40.                     <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
41.                 </shape>  
42.             </item>  
43.             <item>  
44.                 <shape>  
45.                     <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
46.   
47.                     <solid android:color="@color/setting_item_bgcolor" />  
48.                 </shape>  
49.             </item>  
50.         </layer-list>  
51.     </item>  
52. </selector>