android的.9圖片以及圓角進度條（進度條兩端都是圓角）的實現

標籤：

 

1號黑色條位置向下覆蓋的地區表示圖片橫向展開時，只展開該地區 
2號黑色條位置向右覆蓋的地區表示圖片縱向展開時，只展開該地區   
3號黑色條位置向左覆蓋的地區表示圖片縱向顯示內容的地區 
4號黑色條位置向上覆蓋的地區表示圖片橫向顯示內容的地區 
沒有黑色條的位置覆蓋的地區是圖片展開時保持不變（比如，如果圖片的四角為弧形的時候，當圖片被任意展開時，四角的弧形都不會發生改變）

 

The Android source code uses Patch 9 files to achieve the effect:

http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizontal_holo_dark.xml/

上面的連結是android源碼實現圓角矩形的xml。

 

例子：

在你的xml中：

<ProgressBar    android:id="@+id/custom_progress_bar"    style="@android:style/Widget.ProgressBar.Horizontal"    android:indeterminateOnly="false"    android:progressDrawable="@drawable/custom_progress_bar_horizontal"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:minHeight="13"    android:progress="33"    android:secondaryProgress="66" />

 

然後，custom_progress_bar_horizontal的實現：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item android:id="@android:id/background"          android:drawable="@android:drawable/custom_progress_bg" />    <item android:id="@android:id/secondaryProgress">        <scale android:scaleWidth="100%"               android:drawable="@android:drawable/custom_progress_secondary" />    </item>    <item android:id="@android:id/progress">        <scale android:scaleWidth="100%"               android:drawable="@android:drawable/custom_progress_primary" />    </item></layer-list>

　　

其中的item的drawable就按自己想要的效果繪製了，scale裡面可以放.9圖片，也可以自己使用drawable畫，帶圓角就行。

整個核心就是scale標籤，我之前也沒見過。

 

最後是（摘於StackOverFlow:http://stackoverflow.com/questions/2078809/progress-bar-rounded-on-both-sides-in-android）：

Example primary xdpi png with padding before the tool: 
Example secondary xdpi png with padding before the tool: 

And the final output: 

android的.9圖片以及圓角進度條（進度條兩端都是圓角）的實現