本文知識點
- 水平進度條一端圓角的處理
- 水平進度條兩端圓角的處理
- 水平進度條陰影的實現(xiàn)(layer-list實現(xiàn)錯位)
常見問題
1.水平進度條的設(shè)置
1.1基本的配置
在Android中最常見的就是水平進度條了,什么樣子我就說了,先說一些基本的設(shè)置問題(大概分為一下幾個步驟):
- 首先通過設(shè)置style="?android:attr/progressBarStyleHorizontal"成水平進度條
- 其次通過progressDrawable這個屬性設(shè)置相應(yīng)的進度圖片
- 設(shè)置progressDrawable中展示的圖片
其實關(guān)鍵的就這么兩個步驟,主要的難點就在這個圖片上面
- 如果你不設(shè)置展示的圖片的話,默認(rèn)的顏色是你主題的顏色,這個兩端都是直角的
1.2進度條一端圓角的設(shè)置(注意是一段圓角)
首先我們先更改一下相應(yīng)的顏色,這一注意一下順序,如果你要是把還從進度寫在最后的話,那么進度就沒法顯示了
<?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 android:shape="rectangle">
<solid android:color="#2C9CBC"/>
<stroke android:width="1dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<!--緩沖進度-->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#87877e"/>
<corners android:radius="5dp"/>
</shape>
</clip>
</item>
<!--進度-->
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#FCEE12"/>
<corners android:radius="5dp"/>
</shape>
</clip>
</item>
</layer-list>
不知道你注意到了沒有,上面雖然兩邊是圓角,但是中間的內(nèi)容沒有實現(xiàn)圓角,為什么呢?因為上面有一個<clip>這個標(biāo)簽導(dǎo)致的,他切割了右邊的圓角,那么怎么解決這樣的問題呢?辦法當(dāng)然是有的,要不我們大Android程序員豈不是白費了.接下來看看我們怎么改進相應(yīng)的內(nèi)容
1.3進度條兩端圓角的設(shè)置
其實就是使用相應(yīng)的<scale>這個標(biāo)簽進行改造
<?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 android:shape="rectangle">
<solid android:color="#2C9CBC"/>
<stroke android:width="1dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<!--進度-->
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/progress_round"
android:scaleWidth="100%"/>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCEE12"/>
<corners android:radius="5dp"/>
</shape>
這里其實就是通過<scale>引入了一個相應(yīng)的圖片資源,這樣就能解決相應(yīng)的問題了.通過以上設(shè)置就能確保你的進度條兩端都是圓角了.上面的內(nèi)同基本上能保證一些常見的進度條顏色的設(shè)置了.但是美工有的時候真的就是覺得這樣不好看,非要加個陰影,當(dāng)時我是崩潰的,但是回頭想了想其實也是可以實現(xiàn)的!咱們繼續(xù)往下看:
2.layer-list實現(xiàn)更酷炫的水平進度條
我們美工說在進度條的下面加上一個陰影好看,具體對的效果其實是這樣的!
其實這里面存在一個layer-list中疊加圖片的問題,其實原理很簡單,只要知道其實就是幾個屬性的問題.
先說明一下原理,其實layer-list中的item標(biāo)簽可以通過相應(yīng)的top/bottom/left/right進行調(diào)節(jié)位置,也就是相當(dāng)于底圖的偏移量,這樣就能確保圖層進行相應(yīng)的偏移了,其實這里我也遇到一個問題,但是我是通過別的辦法解決的:
-先說一下相應(yīng)的問題,我發(fā)現(xiàn)我設(shè)置相應(yīng)的background的背景圖片,但是進度的圖片總是蓋在上面,沒有辦法顯示相應(yīng)的描邊,所以我通過設(shè)置相應(yīng)View的background屬性和相應(yīng)描邊的寬度的padding進行相應(yīng)內(nèi)容的顯示,這樣就解決了上面的問題.雖然方法比較笨,希望有更好的見解的童鞋給小弟留言,貼一下相應(yīng)的代碼?
- progressDrawable文件
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@android:id/progress">
<scale
android:drawable="@drawable/progress_cool"
android:scaleWidth="100%"/>
</item>
</layer-list>
- progress_cool文件
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--這個應(yīng)該是底圖的顏色-->
<item>
<shape>
<corners android:radius="6dp"/>
<solid android:color="#998752"/>
</shape>
</item>
<!--這個應(yīng)該是頂圖的顏色-->
<item
android:bottom="1dp">
<shape>
<solid android:color="#FCEE12"/>
<corners android:radius="6dp"/>
</shape>
</item>
</layer-list>
- background的相應(yīng)的圖片
<?xml version="1.0" encoding="utf-8"?>
<!--每周任務(wù)的Progress的背景-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#000"/>
<solid android:color="#2C9CBC"/>
<corners android:radius="6dp"/>
</shape>
以上就是相應(yīng)的圖片資源了 ,當(dāng)你設(shè)置的時候加上一個描邊的Padding就可以正常顯示了!這里注意progress_cool文件中的item標(biāo)簽bottom屬性的設(shè)置其實就是繪制了兩個圖片,只是下面的圖片距離底邊有個1dp的距離,所以顯得是一個陰影.
其實shape可以繪制相應(yīng)的漸變的,這里就可以發(fā)揮你的想象了,這里就不繼續(xù)展開了!
以上內(nèi)容基本上包括了水平進度條中處理圓角的所有內(nèi)容了,應(yīng)該還有一個填充圖片的操作,這里等以后用到的話在進行補充或者你提問,我也會補充的!嘻嘻....
