有些东西看多了，就厌烦了：extjs对我这种感觉最为强烈。甚至，有时觉得设计之殇是审美疲劳。
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。
1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。
先让我们来看两张图片：
左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面。
ps:上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的。
2.原理
通过判断ListView上点击的项的位置，我们切换不同的选择器，当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。
02 |
if(itemnum==(getAdapter().getCount()-1)){
|
04 |
setSelector(R.drawable.app_list_corner_round);
|
07 |
setSelector(R.drawable.app_list_corner_round_top);
|
09 |
}elseif(itemnum==(getAdapter().getCount()-1))
|
11 |
setSelector(R.drawable.app_list_corner_round_bottom);
|
14 |
setSelector(R.drawable.app_list_corner_shape);
|
3.定义选择器
如果只有一项，我们需要四个角都是圆角，app_list_corner_round.xml文件定义如下：
01 |
<?xmlversion="1.0"encoding="utf-8"?>
|
03 |
<gradientandroid:startColor="#B5E7B8"
|
04 |
android:endColor="#76D37B"
|
06 |
<cornersandroid:topLeftRadius="4dip"
|
07 |
android:topRightRadius="4dip"
|
08 |
android:bottomLeftRadius="4dip"
|
09 |
android:bottomRightRadius="4dip"/>
|
如果是顶部第一项，则上面两个角为圆角，app_list_corner_round_top.xml定义如下：
1 |
<?xmlversion="1.0"encoding="utf-8"?>
|
3 |
<gradientandroid:startColor="#B5E7B8"
|
4 |
android:endColor="#76D37B"
|
6 |
<cornersandroid:topLeftRadius="4dip"
|
7 |
android:topRightRadius="4dip"/>
|
如果是底部最后一项，则下面两个角为圆角，app_list_corner_round_bottom.xml定义如下：
1 |
<?xmlversion="1.0"encoding="utf-8"?>
|
3 |
<gradientandroid:startColor="#B5E7B8"
|
4 |
android:endColor="#76D37B"
|
6 |
<cornersandroid:bottomLeftRadius="4dip"
|
7 |
android:bottomRightRadius="4dip"/>
|
如果是中间项，则应该不需要圆角，app_list_corner_shape.xml定义如下：
1 |
<?xmlversion="1.0"encoding="utf-8"?>
|
3 |
<gradientandroid:startColor="#B5E7B8"
|
4 |
android:endColor="#76D37B"
|
4.背景图片
因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png：
在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域。
5. 初步实现
参考前面提供的素材和核心代码，我们初步实现如下:
(1).自定义CornerListView.java:
04 |
publicclassCornerListView
extendsListView
{
|
06 |
publicCornerListView(Context
context) {
|
10 |
publicCornerListView(Context
context, AttributeSet attrs, intdefStyle)
{
|
11 |
super(context,
attrs, defStyle);
|
14 |
publicCornerListView(Context
context, AttributeSet attrs) {
|
15 |
super(context,
attrs);
|
19 |
publicbooleanonInterceptTouchEvent(MotionEvent
ev) {
|
20 |
switch(ev.getAction())
{
|
21 |
caseMotionEvent.ACTION_DOWN:
|
22 |
intx
= (int)
ev.getX();
|
23 |
inty
= (int)
ev.getY();
|
24 |
intitemnum
= pointToPosition(x, y);
|
26 |
if(itemnum
== AdapterView.INVALID_POSITION)
|
31 |
if(itemnum==(getAdapter().getCount()-1)){
|
32 |
setSelector(R.drawable.app_list_corner_round);
|
34 |
setSelector(R.drawable.app_list_corner_round_top);
|
36 |
}elseif(itemnum==(getAdapter().getCount()-1))
|
37 |
setSelector(R.drawable.app_list_corner_round_bottom);
|
39 |
setSelector(R.drawable.app_list_corner_shape);
|
44 |
caseMotionEvent.ACTION_UP:
|
47 |
returnsuper.onInterceptTouchEvent(ev);
|
这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件：
列表布局文件main_tab_setting.xml：
01 |
<?xmlversion="1.0"encoding="utf-8"?>
|
03 |
android:orientation="vertical"
|
04 |
android:layout_width="fill_parent"
|
05 |
android:layout_height="fill_parent">
|
06 |
<com.tianxia.app.floworld.view.CornerListViewandroid:id="@+id/setting_list"
|
07 |
android:layout_width="fill_parent"
|
08 |
android:layout_height="wrap_content"
|
09 |
android:layout_margin="10dip"
|
10 |
android:background="@drawable/app_list_corner_border"
|
11 |
android:cacheColorHint="#00000000">
|
12 |
</com.tianxia.app.floworld.view.CornerListView>
|
列表项布局文件main_tab_setting_list_item.xml：
01 |
<?xmlversion="1.0"encoding="utf-8"?>
|
03 |
android:layout_width="fill_parent"
|
04 |
android:layout_height="fill_parent">
|
05 |
<ImageViewandroid:id="@+id/setting_list_item_arrow"
|
06 |
android:layout_alignParentRight="true"
|
07 |
android:layout_centerVertical="true"
|
08 |
android:layout_width="wrap_content"
|
09 |
android:layout_height="fill_parent"
|
10 |
android:layout_marginLeft="15dip"
|
11 |
android:layout_marginRight="15dip"
|
12 |
android:src="@drawable/appreciate_tab_list_item_arrow_small"/>
|
13 |
<TextViewandroid:id="@+id/setting_list_item_text"
|
14 |
android:layout_toLeftOf="@id/setting_list_item_arrow"
|
15 |
android:layout_width="fill_parent"
|
16 |
android:layout_height="wrap_content"
|
17 |
android:textSize="16dip"
|
18 |
android:textColor="#000000"
|
19 |
android:paddingTop="10dip"
|
20 |
android:paddingBottom="10dip"
|
21 |
android:paddingLeft="10dip"/>
|
(3)界面实现
显示界面SettingTabActivity.java:
01 |
publicclassSettingTabActivity
extendsActivity{
|
03 |
privateCornerListView
cornerListView = null;
|
05 |
privateList<Map<String,String>>
listData = null;
|
06 |
privateSimpleAdapter
adapter = null;
|
10 |
protectedvoidonCreate(Bundle
savedInstanceState) {
|
11 |
super.onCreate(savedInstanceState);
|
12 |
setContentView(R.layout.main_tab_setting);
|
14 |
cornerListView
= (CornerListView)findViewById(R.id.setting_list);
|
17 |
adapter
= newSimpleAdapter(getApplicationContext(),
listData, R.layout.main_tab_setting_list_item , newString[]{"text"},
newint[]{R.id.setting_list_item_text});
|
18 |
cornerListView.setAdapter(adapter);
|
24 |
privatevoidsetListData(){
|
25 |
listData
= newArrayList<Map<String,String>>();
|
27 |
Map<String,String>
map = newHashMap<String,
String>();
|
28 |
map.put("text",
"图库更新");
|
31 |
map
= newHashMap<String,
String>();
|
32 |
map.put("text",
"收藏图片");
|
35 |
map
= newHashMap<String,
String>();
|
36 |
map.put("text",
"下载目录");
|
(4).效果图
通过以上实现，我们基本达到了圆角的ListView的效果：
