1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)
The Android source code uses Patch 9 files to achieve the effect:
上面的链接是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: