修改系统组件样式

修改系统组件样式

系统所有组件的样式声明都在data-res-values-styles.xml中，如果我们想要修改某个系统组件的样式只需要拷贝它的样式到本地后修改一下就行了。

• 自定义ProgressBar样式

  1. 去系统的styles.xml中搜寻ProgressBar的样式
     xml
<style name="Widget.ProgressBar">
<item name="android:indeterminateOnly">true</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>
<item name="android:indeterminateBehavior">repeat</item>
<item name="android:indeterminateDuration">3500</item>
<item name="android:minWidth">48dip</item>
<item name="android:maxWidth">48dip</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>


  2. 看到有一个属性引用了@android:drawable/progress_medium_white，内容如下

     <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
         android:drawable="@drawable/spinner_white_48"
         android:pivotX="50%"
         android:pivotY="50%"
         android:framesCount="12"
         android:frameDuration="100" /> 
     //这样报错了，是因为framesCount和framesDuration这两个属性在高版本才有，在2.2没有所以把这两个属性给去了就可以了
     这个文件定义了一个旋转动画的背景，它里面引用了drawable中的spinner_white_48这个图片

  3. 自定义一个样式继承Widget.ProgeessBar，然后重写android:indeterminateDrawable让它使用我们自己的资源
     “`xml
     
     @drawable/progress_medium_white
     
     //那么这个drawable下的progress_medium_white.xml就是将系统的拷贝到我们自己的程序中

  4. 拷贝Android中的progress_medium_white.xml到自己的系统中

  5. 将里面的 android:drawable=”@drawable/spinner_white_48”给修改成自己的图片
  6. 在xml文件中使用我们自定义的ProgressBar
     xml
<ProgressBar
style="@style/my_pb_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />


• 自定义进度条

  1. 系统所有的组件都在D:\android-sdk-windows\platforms\android-8\data\res\values\styles.xml
     xml
<style name="Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>


  2. 引用了一个drawable资源@android:drawable/progress_horizontal，打开后内容如下

     Layer-list代表的是一个图层的列表
     <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     
         <item android:id="@android:id/background"> //背景,这里它是通过图形资源shape的方式定义的背景
             <shape>
                 <corners android:radius="5dip" />
                 <gradient
                         android:startColor="#ff9d9e9d"
                         android:centerColor="#ff5a5d5a"
                         android:centerY="0.75"
                         android:endColor="#ff747674"
                         android:angle="270"
                 />
             </shape>
         </item>
     
         <item android:id="@android:id/secondaryProgress">
             <clip>
                 <shape>
                     <corners android:radius="5dip" />
                     <gradient
                             android:startColor="#80ffd300"
                             android:centerColor="#80ffb600"
                             android:centerY="0.75"
                             android:endColor="#a0ffcb00"
                             android:angle="270"
                     />
                 </shape>
             </clip>
         </item>
     
         <item android:id="@android:id/progress"> //进度
             <clip>
                 <shape>
                     <corners android:radius="5dip" />
                     <gradient
                             android:startColor="#ffffd300"
                             android:centerColor="#ffffb600"
                             android:centerY="0.75"
                             android:endColor="#ffffcb00"
                             android:angle="270"
                     />
                 </shape>
             </clip>
         </item>
     
     </layer-list>

  3. 自定义一个样式继承系统的Widget.ProgressBar.Horizontal，然后重写android:progressDrawable属性，让其指向我们的样式

     <style name="MediaController_SeekBar" parent="android:Widget.SeekBar">
         <item name="android:progressDrawable">@drawable/scrubber_progress_horizontal_holo_dark</item>
         <item name="android:indeterminateDrawable">@drawable/scrubber_progress_horizontal_holo_dark</item>
         <item name="android:minHeight">13dip</item>
         <item name="android:maxHeight">13dip</item>
         <item name="android:thumb">@drawable/scrubber_control_selector_holo</item>//拖动的图标
         <item name="android:thumbOffset">16dip</item>//保证滑块中心和进度条首尾两端的中心点是一致的
         <item name="android:paddingLeft">16dip</item>//保证滑块显示全部，没有它滑块在首尾两端只会显示一半，左一半、右一半
         <item name="android:paddingRight">16dip</item>//同上，控制右边的滑块能全部显示
     </style>

  4. scrubber_progress_horizontal_holo_dark.xml变成我们自己的图片

     <?xml version="1.0" encoding="utf-8"?>
     <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
         <item android:id="@android:id/background" android:drawable="@drawable/security_progress_bg">//好看的图片
         </item>
         <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/security_progress_bg">
     
         </item>
         <item android:id="@android:id/progress" android:drawable="@drawable/security_progress">//好看的图片
     
         </item>
     </layer-list>

  5. SeekBar使用自定义样式

     <SeekBar
         android:id="@+id/mediacontroller_seekbar"
         style="@style/MediaController_SeekBar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_centerVertical="true"
         android:focusable="true"
         android:max="1000" />

---

• 邮箱 ：charon.chui@gmail.com
• Good Luck!