进阶：利用9-Patch PNG来实现ListView的圆角显示

转载 ： http://www.learningandroid.net/blog/advance/9-patch-listview-coner/

部分摘要：

何为9-Patch

讲到了背景图片，就必然会联想到图片的大小和缩放问题，总不能不断去麻烦美工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的白色，在背景图上的显示就看不清了）。

运行吧，最终的效果图如下：