转载 : http://www.learningandroid.net/blog/advance/9-patch-listview-coner/
部分摘要:
讲到了背景 图片,就必然会联想到图片的大小和缩放问题,总不能不断去麻烦美工MM来帮你修改图的大小吧,更何况我们还要适应Android手机众多的分辨率? 这就要说到9-Patch 了,先来看看Google官方关于这个工具的1个截图:
首先,这是1个PNG图片。其次,在用draw9patch打开的时候,会自动在边缘添加1个像素点的透明边框。而这个边框就是你的工作范围了,左键点击会添加1个黑点,右键点击会去掉1个黑点,这些黑点连成的线就构成了9-Patch 图片的效果。其中:左边和上面表述的是图片缩放的范围,右边和下边表述的是内容的Padding范围。
好像有点不大明白?运行这个工具(在android sdk的tools目录下),并且拖1个PNG图片进去,选中下方的2个Checkbox,再试用一会儿就明白了。
OK,我们来准备今天这个教程所需要的图片,请美工MM帮你画1个
圆角
图片吧,但不用切开,图片大小大概在40×40即可,主要是根据你所需要的最小的大小来决定,然后拖到draw9patch中,看下开始的效果。
然后我们在图片边缘点击进行绘制,并且点选下方2个Checkbox,结束时的效果如下图:
在使用这个图片时,左右2个绿色区域是会自动的上下拉伸,而上下2个绿色区域会自动的左右拉伸,中间的粉色区域会做4个方向的拉伸,至于4个角嘛,你已经知道了,它们不会缩放。而下方的的黑线表示,控件的内容会从最左边到最右边,几乎不留空隙,右边的黑线表示,控件的内容会在上下各留一些空间。 好了,将这个文件保存为float_panel.9.png,并保存到res/drawable目录下。记得扩展名必须是9.png,否则不会生效。另外下次你再次编辑这个文件时,draw9patch工具就不会再添加黑边了。
编写布局文件
文件:res/layout/coner_round_list_activity.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version ="1.0" encoding ="utf-8" ?>
<LinearLayout
xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="fill_parent" android:layout_height ="fill_parent"
android:orientation ="vertical"
>
<TextView
android:text ="Coner Round List View Sample"
android:layout_width ="fill_parent" android:layout_height ="wrap_content"
/>
<ListView
android:id ="@+id/conerRoundListView"
android:layout_width ="fill_parent" android:layout_height ="wrap_content"
android:paddingTop ="10dp" android:paddingBottom ="10dp"
android:layout_margin ="10dp"
android:background ="@drawable/float_panel"
android:layout_weight ="1"
android:cacheColorHint ="#FFEDEDED" android:divider ="#00EDEDED"
/>
</LinearLayout>
略做讲解:layout_margin是为了留点空间,更容易看出效果,backgroud就是用来设置9patch图片的。cacheColorHint的颜色与我所选用的背景 图的颜色一样,可以确保滚动时的item底色不会变化。android:divider是用来控制分隔线的,这里我们不需要它,否则效果会受影响。(试试去掉这个属性?)
编写Activity类
好了,我们写个类来使用这个布局文件吧,老规矩,从API DEMO中COPY了一个很长的String[]定义,并且使用ArrayAdapter来显示数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ConerRoundListActivity extends Activity {
@Override
protected void onCreate( Bundle savedInstanceState) {
super .onCreate ( savedInstanceState) ;
setContentView( R.layout .coner_round_list_activity ) ;
ListView arrowList= ( ListView ) findViewById( R.id .conerRoundListView ) ;
arrowList.setAdapter ( new ArrayAdapter< String> ( this ,
android.R .layout .simple_list_item_1 , mStrings) ) ;
}
private String [ ] mStrings = {
"Abbaye de Belloc" , "Abbaye du Mont des Cats" , "Abertam" , "Abondance" , "Ackawi" ,
...
} ;
}
平淡无奇的代码,这也是我为什么说在Android中设置圆角是一件很容易的事情。 最后,在运行程序之前,我们还要为这个activity进行一下额外的配置,打开manifest文件,修改或添加这个activity的定义如下:
1
2
3
<activity android:name =".conerround.ConerRoundListActivity" android:label ="Coner Round List"
android:theme ="@android:style/Theme.Light"
/>
注意,我为这个activity指定了theme为android自带的Theme .Light,原因是这个theme的配色与我选的图片比较匹配(至少它的文字颜色是黑的,如果是默认Theme 的白色,在背景 图上的显示就看不清了)。
运行吧,最终的效果图如下: