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: