關於ProgressBar的美化問題
Android自帶的ProgressBar事實上也算不上醜陋，可是假設全部的App都使用一個模式的ProgressBar，那麽預計用戶就要崩潰了，打開不論什麽一個App。擦，進度條都一模一樣。
。有鑒於此。我們今天就來談談ProgressBar的美化問題。學會了ProgressBar的美化。那麽SeekBar和RatingBar的美化應該就不在話下了，由於SeekBar和RatingBar都是繼承自ProgressBar。OK，廢話不多說，我們來進入今天的正題。
進度條Style的兩種設置方式
正常情況下。我們在布局文件裏加入一個進度條是這樣的：
<ProgressBar
android:id="@+id/pb1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>顯示效果是這樣的：
這是系統默認的情況。假設有須要。我們能夠改動進度條的樣式，僅僅需加入一個屬性。例如以下：
<ProgressBar
android:id="@+id/pb1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>這個時候顯示效果例如以下：
毫無疑問。進度條變大了。
style屬性就是我們用來設置進度條樣式的，這樣的設置方式有好幾種取值。例如以下：
每一種取值都代表一種樣式。我就不一一去試了。大家能夠自行嘗試，依據Google提供給我們的資料，我們知道。給ProgressBar設置style除了這一種方式之外，另一種方式。那就是這樣：
<ProgressBar
android:id="@+id/pb1"
style="@android:style/Widget.ProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>大家註意看取值的不同。那麽這樣的方式的顯示效果是什麽樣的呢？看下圖：
都是轉圈，可是非常明顯第一個看起來更舒服一些，那麽這樣的設置方式也有好幾種取值，例如以下：
每一種取值都代表了一種樣式，大家能夠自行嘗試。
OK，上面是給大家簡介了一下Google給我們提供的兩種給ProgressBar設置Style的方式，以下我們就要探究怎麽樣來自己定義Style。
自己定義水平進度條樣式
進度條我們能夠讓它轉圈圈。也能夠讓它水平顯示，水平顯示我們能夠通過以下隨意一行代碼來讓我們的進度條水平顯示：
style="@android:style/Widget.ProgressBar.Horizontal" style="?android:attr/progressBarStyleHorizontal"
僅僅只是這兩行代碼顯示出來的水平進度條的樣式有些許差異罷了。例如以下圖：
這是Google給我們提供的兩種樣式，以下我們就要看看如何來自己定義水平進度條的樣式。通過自己定義進度條來讓我們的App與眾不同。要自己定義水平進度條的樣式。我們首先要弄明確系統的這個樣式是怎麽顯示出來的，我們追蹤
style="@android:style/Widget.ProgressBar.Horizontal"
這行代碼所指向的位置，我們看到了這樣一個Style：
<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>
<item name="android:mirrorForRtl">true</item>
</style>在這個Style中，有一個progressDrawable屬性，這個屬性事實上就是我們的progressBar顯示的樣式，我們點擊去看一下：<?這個裏邊一共同擁有三個item，這三個item就是progressBar所顯示出來的三層，最底層是背景色，第二層是secondaryProgress的顏色。第三層就是我們progress的顏色。看到這些我們就明確了，原來progressBar的樣式是在這裏設置的。那麽我們模仿Google的源代碼，自己定義一個樣式看看：xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <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>
<?xml version="1.0" encoding="utf-8"?
> <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="#EE5C42" android:centerColor="#EE5C42" android:centerY="0.75" android:endColor="#EE5C42" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#EE0000" android:centerColor="#EE0000" android:centerY="0.75" android:endColor="#EE0000" android:angle="270" /> </shape> </clip> </item> </layer-list>
OK，我僅僅是改動了secondaryProgress的顏色，其它的東西都沒有改動。然後我再模仿Google的Style，自己定義一個Style。例如以下：
<style name="m_progress_bar_style">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@drawable/m_progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minHeight">2dip</item>
<item name="android:maxHeight">2dip</item>
<item name="android:mirrorForRtl">true</item>
</style>OK。這裏的Style。我改動了當中的三個值，各自是progressDrawable、minHeight、maxHeight。首先將progressDrawable改動為我自己定義的進度條顏色。然後我考慮到這裏的進度條過高，因此我把它的高度改為2dp。這個時候的顯示效果例如以下：
progress和secondaryProgress的顏色已經被我成功改動為紅色和淺紅色了。
假設我願意，我也能夠把剩余的灰色改動為其它顏色。事實上。我們能夠省略上面一步。直接在布局文件裏給progressBar加入progressDrawable屬性，例如以下：
<ProgressBar
android:id="@+id/pb1"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:maxHeight="2dp"
android:minHeight="2dp"
android:progress="20"
android:progressDrawable="@drawable/m_progress_horizontal"
android:secondaryProgress="40" />這個時候顯示效果和上面還是一樣的。依據這個特性，我們能夠實現以下這樣的歌詞進度的效果，如圖：
代碼例如以下：
<?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/t1"/>
<item
android:id="@android:id/progress"
android:drawable="@drawable/t2"/>
</layer-list>事實上就是兩張圖片：
OK，這裏就是我們對水平進度條樣式的一個簡單改動，使它更符合我們的審美。
自己定義圓形進度條樣式
當我們不知道我們的耗時操作到底要運行多長時間的時候。我們通常都會採用圓形進度條來顯示。安卓自帶的圓形進度條如第一幅圖所看到的，但很多其它情況下我們見到的圓形進度條都比較好看。比方一個小人在跑等等，那麽這裏我們先來看一個簡單的原型進度條。
和上面一樣。要想自己定義一個圓形進度條，我們首先得知道android默認的圓形進度條的樣式是怎麽顯示出來的，我們追蹤
style="@android:style/Widget.ProgressBar"
這一行代碼的源代碼，例如以下：
<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>
<item name="android:mirrorForRtl">false</item>
</style>我們看到這裏有一個屬性叫做indeterminateDrawable。這個屬性事實上決定了圓形進度條的樣式，同一時候我們還看到indeterminateBehavior和indeterminateDuration兩個屬性分別用來設置小圈旋轉的模式以及每一圈的旋轉時間。那麽看到這裏我們就明確了該怎麽樣來改動圓形進度條的樣式了吧，我們自己定義一個progressbar_rotate.xml文件，例如以下：<?loading_32dp是一張圖片。例如以下：xml version="1.0" encoding="utf-8"?
> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/loading_32dp" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="359" > </rotate>
我們讓這張圖片繞自身的中心點旋轉。OK，progressbar_rotate.xml文件寫好之後。下一步就是自己定義style了，我們能夠模仿Widget.ProgressBar來自己定義style，也能夠直接在布局文件裏設置indeterminateDrawable屬性，我採用另外一種方式。代碼例如以下：
<ProgressBar
android:id="@+id/pb4"
style="@android:style/Widget.ProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/pb1"
android:layout_marginTop="20dp"
android:indeterminateDrawable="@drawable/progressbar_rotate"/>效果圖例如以下：
我們看到有一個圓圈在不停的轉動。就這麽簡單。我們自己定義了一個圓形進度條樣式。
就是這麽簡單。
關於ProgressBar的美化問題