Android中自定义ProgressBar的样式

• 如果想快速获取水平进度条显示操作，直接进入第四步和第六步操作就可以了！！
  
• 首先可以去sdk中查看
  
  • sdk1\platforms\android-23\data\res\values，中的styles中查找源码
  • progressbar

<style name="Widget.ProgressBar.Horizontal">
//这里的indeterminateOnly 是否显示进度条：true意思不显示，false显示
<item name="indeterminateOnly">false</item>
<item name="progressDrawable">@drawable/progress_horizontal</item>

//这里的indeterminateDrawable：这个是样式，在drawable中声明一个xxx.xml文件，然后再progressbar控件中覆盖掉就行了！！
<item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
        <item name="minHeight">20dip</item>
        <item name="maxHeight">20dip</item>
        <item name="mirrorForRtl">true</item>
    </style>

• drawable文件下创建一个progressbar_drawable.xml
  
  • 这里的animated-rotate：是旋转的动画，时间不写就是默认的100
  • progressbar_img这里就是进度条的图片，自己随便搞！！！
  • pivotX/Y ：50%代表自身旋转

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
                android:drawable="@drawable/progressbar_img"
                 android:pivotX="50%"
                 android:pivotY="50%"
    >
</animated-rotate>

• 然后再progressbar的控件中引用
  
  • 覆盖indeterminateDrawable：引用自己定义的progressbar_drawable.xml文件

<ProgressBar
            android:id="@+id/pb_loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
 android:indeterminateDrawable="@drawable/progressbar_drawable"
            />

---

• 下面来介绍自定义水平线的 有进度的进度条
• 看完后你就明白为嘛自己定义的进度条设置高度了，但是进度条里面的进度显示没有变化！！！
• 第一步：来看android原本样式的进度条

<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>

• 第二步：看indeterminateDrawable这个属性
  
  • 这个是设置进度条的动画效果的，设置图片来轮播，就是动画效果的，看下源码 。。这个想自己搞了可以设置一下

<animation-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>

• 第三步：那个maxHeight 高度已经定死了，所以你设置高度的时候是不能让进度变高的，这个也可以不用管

---

• 第四步：progressDrawable 这个就是主要的了，通过这个就可以给你进度条设置高度了
  
  • 先来看下源码（源码不可怕，有的拿来用就行，初级的我们不用看懂…当然我也不懂0.0），其实可以拿来自己用的，改改东西就行了——
  • 这个是图层，这个是在drawable里面的xxx.xml中创建的
  • 快速秘籍，直接在drawable中创建xml文件，复制下面代码

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

    <item android:id="@android:id/background">
        <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个item
  
  • item1：是最底层的总进度颜色显示
  • item2：是缓冲的进度的颜色显示
  • item3：是正在进行的进度的颜色显示
  • 这就类似于FrameLayout 的布局，最下面的item显示在界面的上面！！
  • item里面的内容，自己需要用的时候只需要改下颜色就可！！
• 第六步：在布局中调用
  
  • style：这个肯定要加，水平显示的
  • progressDrawable：直接把上面的图层文件拿到这里这个就是最主要的操作了，有了这个就可以设置高度了！
  • 快速秘籍，在布局中progressDrawable属性引用上面复制进去的xml文件，就可以设置高度了！

<ProgressBar
        android:id="@+id/pb_loading"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="?android:attr/progressBarStyleHorizontal" 
             android:progressDrawable="@drawable/progressbar_custom"
        android:progress="50"
        />

• 这样就是结果了！

• 如果想更改颜色，就进去图层文件中吧颜色该下就行了

---

• 下面是自定义进度条是将上面第四步进行修改的操作，将里面的颜色改成自己想要的图片样式

  • first：准备进度条的图片
    
    

  • second：在drawable中创建xml文件，里面还是图层样式

  • 注意 里面的3个item的id一定要写的给我的一样，因为android会找着3个名字来显示进度条，如果不一致，进度条会创建失败的！！

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

    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/progress_item2"
                android:gravity="center" />
    </item>

    <item android:id="@android:id/secondaryProgress">
        <bitmap android:src="@drawable/progress_item1"
                android:gravity="center" />
    </item>

    <item android:id="@android:id/progress" >
        <bitmap android:src="@drawable/progress_item1"
                android:gravity="center" />
    </item>
</layer-list>

• Third：还是在布局中选择progressDrawable属性设置进去

<ProgressBar
        android:id="@+id/pb_loading"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar_custom"
        android:progress="50"
        android:layout_marginTop="10dp"
        />

• end：图片就是我们下面第二个显示的，第一个是原生的0.0