需求

这几天十一放假，在群里非常活跃，很多朋友问如何实现android中listview的圆角功能，像Iphone设置里面的tableView如如下效果：

实现过程

其实这个功能实现也很简单，只是很多朋友没有仔细的去了解android布局的相关知识，这里我们使用了android中的shade的圆角功能来实现的。

java代码很简单，就一个activity，一个listview。listview中要判断item的位置，第一条，最后一条和中间的item是不一样的。代码如下：

java代码和布局文件

AndroidlistviewActivity.java

packagecom.yangfuhai.listviewdemo;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.widget.ListView;/***@title圆角listview的实现*@description圆角listview的实现*@company探索者网络工作室(www.tsz.net)*@authormichaelYoung(www.YangFuhai.com)*@version1.0*@created2012-10-3*/publicclassAndroidlistviewActivityextendsActivity{ListViewmListView;ListViewAdaptermListViewAdapter;@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);mListView=(ListView)findViewById(R.id.listview);mListViewAdapter=newListViewAdapter(this);mListView.setAdapter(mListViewAdapter);}/***添加按钮执行的操作*@paramview*/staticinti=0;publicvoidadd(Viewview){mListViewAdapter.addData("----item---"+i+"---");mListViewAdapter.notifyDataSetChanged();i++;}/***删除按钮执行的操作*@paramview*/publicvoiddel(Viewview){mListViewAdapter.delData();mListViewAdapter.notifyDataSetChanged();if(i>0)i--;}}

适配器 ListViewAdapter.java

packagecom.yangfuhai.listviewdemo;importjava.util.ArrayList;importjava.util.List;importandroid.content.Context;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.BaseAdapter;importandroid.widget.TextView;/***@title圆角listview的实现适配器*@descriptionListViewAdapterlistview的适配器*@company探索者网络工作室(www.tsz.net)*@authormichaelYoung(www.YangFuhai.com)*@version1.0*@created2012-10-3*/publicclassListViewAdapterextendsBaseAdapter{privateList<String>datas=newArrayList<String>();//数据privateContextmContext;publicListViewAdapter(Contextc){this.mContext=c;}publicvoidaddData(StringstrData){if(strData!=null)datas.add(strData);}publicvoiddelData(){if(datas.size()>0)datas.remove(datas.size()-1);}@OverridepublicintgetCount(){returndatas.size();}@OverridepublicObjectgetItem(intarg0){returndatas.get(arg0);}@OverridepubliclonggetItemId(intposition){returnposition;}/***listview中要判断item的位置，第一条，最后一条和中间的item是不一样的。*/@OverridepublicViewgetView(intposition,ViewconvertView,ViewGroupparent){Viewview=null;if(datas.size()>1){//listView数据是两条以上if(position==0){//第一条数据view=View.inflate(mContext,R.layout.list_item_top,null);}elseif(position==datas.size()-1){//最后一条数据view=View.inflate(mContext,R.layout.list_item_bottom,null);}else{//中间的数据view=View.inflate(mContext,R.layout.list_item_middle,null);}}else{//只有一条数据view=View.inflate(mContext,R.layout.list_item_single,null);}((TextView)view.findViewById(R.id.title)).setText(datas.get(position));//设置文本样式returnview;}}

布局文件main.xml

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="fill_parent"android:orientation="vertical"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="请点击添加删除查看效果"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"><Buttonandroid:id="@+id/buttonAdd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="add"android:text="添加"/><Buttonandroid:id="@+id/buttonDel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="del"android:text="删除"/></LinearLayout><ListViewandroid:id="@+id/listview"android:layout_marginLeft="10dip"android:layout_marginRight="10dip"android:layout_width="fill_parent"android:layout_height="wrap_content"/></LinearLayout>

listview的布局文件和资源文件

上面的代码很简单，没有什么可讲的。主要讲的是listview每个item的样式文件

listview的item有四个布局文件，分别是：只有一个item时候的样式，多个item时候上边item的样式，下边item的样式，中间item的样式。布局文件和背景文件对应关系如下图所示：

文件文件

listview的item布局样式如下：

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"style="@style/list_item_middle"android:layout_width="fill_parent"android:layout_height="wrap_content"android:minHeight="60dip"><TextViewandroid:id="@+id/title"style="@style/content_page_large_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="title"/></LinearLayout>

这四个布局文件中唯一不同的只是他们的stype属性（style="@style/list_item_middle"）不同，也就是他们的背景不同。

资源文件

下面我们先贴出布局文件背景文件的shade代码，然后再仔细的讲解背景这些文件里面代码的意思。

background_view_rounded_bottom.xml

<?xmlversion="1.0"encoding="UTF-8"?><insetxmlns:android="http://schemas.android.com/apk/res/android"android:insetBottom="1.0px"android:insetLeft="1.0px"android:insetRight="1.0px"android:insetTop="1.0px"><selector><itemandroid:state_pressed="true"><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_pressed"android:startColor="@color/base_start_color_pressed"/><cornersandroid:bottomLeftRadius="10.0dip"android:bottomRightRadius="10.0dip"android:radius="2.0dip"android:topLeftRadius="0.0dip"android:topRightRadius="0.0dip"/></shape></item><item><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_default"android:startColor="@color/base_start_color_default"/><cornersandroid:bottomLeftRadius="11.0dip"android:bottomRightRadius="11.0dip"android:radius="2.0dip"android:topLeftRadius="0.0dip"android:topRightRadius="0.0dip"/></shape></item></selector></inset>

background_view_rounded_middle.xml：

<?xmlversion="1.0"encoding="UTF-8"?><insetxmlns:android="http://schemas.android.com/apk/res/android"android:insetBottom="0.0px"android:insetLeft="1.0px"android:insetRight="1.0px"android:insetTop="1.0px"><selector><itemandroid:state_pressed="true"><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_pressed"android:startColor="@color/base_start_color_pressed"/><cornersandroid:radius="0.0dip"/></shape></item><item><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_default"android:startColor="@color/base_start_color_default"/><cornersandroid:radius="0.0dip"/></shape></item></selector></inset>

background_view_rounded_single.xml ：

<?xmlversion="1.0"encoding="UTF-8"?><insetxmlns:android="http://schemas.android.com/apk/res/android"android:insetBottom="1.0px"android:insetLeft="1.0px"android:insetRight="1.0px"android:insetTop="0.0px"><selector><itemandroid:state_pressed="true"><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_pressed"android:startColor="@color/base_start_color_pressed"/><cornersandroid:radius="11.0dip"/></shape></item><item><shape><strokeandroid:width="1.0px"android:color="@color/rounded_container_border"/><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_default"android:startColor="@color/base_start_color_default"/><cornersandroid:radius="10.0dip"/></shape></item></selector></inset>

background_view_rounded_top.xml ：

<?xmlversion="1.0"encoding="UTF-8"?><insetxmlns:android="http://schemas.android.com/apk/res/android"android:insetBottom="0.0px"android:insetLeft="1.0px"android:insetRight="1.0px"android:insetTop="1.0px"><selector><itemandroid:state_pressed="true"><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_pressed"android:startColor="@color/base_start_color_pressed"/><cornersandroid:bottomLeftRadius="0.0dip"android:bottomRightRadius="0.0dip"android:radius="2.0dip"android:topLeftRadius="10.0dip"android:topRightRadius="10.0dip"/></shape></item><item><shape><gradientandroid:angle="270.0"android:endColor="@color/base_end_color_default"android:startColor="@color/base_start_color_default"/><cornersandroid:bottomLeftRadius="0.0dip"android:bottomRightRadius="0.0dip"android:radius="2.0dip"android:topLeftRadius="11.0dip"android:topRightRadius="11.0dip"/></shape></item></selector></inset>

listview资源文件讲解

我们拿background_view_rounded_top.xml （最后一个资源文件）来给大家讲解里面的每个属性的含义：

inset

inset：这种资源指向一个InsetDrawable对象，它能够用指定的距离嵌入到另一个可绘制资源中。它的属性有：

android:drawable="@drawable/drawable_resource"
android:insetTop="dimension"
android:insetRight="dimension"
android:insetBottom="dimension"
android:insetLeft="dimension"
其中android:drawable是要嵌入的图片资源，android：insetXXX是嵌入位置。

selector

selector：是一种样式选择器，它用来指导某个view（button,textview,edittext等）的不同状态（比如：正常的状态，获得焦点的状态，按下的状态等）对应的不同资源。

shade

shade gradient

shadegradient：颜色渐变
android:startColor和android:endColor分别为渐变的起始颜色和结束颜色
android:angle是渐变角度，必须为45的整数倍。
渐变模式有两种：
android:type="linear"，线性渐变，白话就是渐变是从一头到另一头的颜色渐变过程。
android:type="radial"，径向渐变，白话就是渐变是从中心到四周的过程。径向渐变需要指定渐变半径android:gradientRadius="50"。

shade corners

shade corners：圆角（这篇文章主要就是用到了它）
android:radius为角的弧度，值越大角越圆。

其他

shade 除了gradient和corners以外，还有stroke（描边），solid （实心），padding等（具体大家可以看android的帮助文档）。

实现效果图

通过以上的代码，我们实现了效果如下图：

完毕

源码下载

源码下载：http://download.csdn.net/detail/michael_yy/4614701 (免积分下载)

转载请注明出处。http://blog.csdn.net/michael_yy/article/details/8038653

或http://www.yangfuhai.com/topic/48.html（杨福海的博客）

android listview 圆角的兑现方案，模仿Iphone的UITableView

需求