android UI设计圆角

http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html

圆角基础：

<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >   <!-- 实心 -->    <solid android:color="#000000" />    <!-- 渐变 -->    <gradient        android:angle="270"        android:endColor="#FFFFFF"        android:startColor="#ff8c00" />    <!-- 描边 -->    <stroke        android:width="2dp"        android:color="#999999" />    <!-- 圆角 -->    <corners android:radius="2dp" />    <padding        android:bottom="10dp"        android:left="10dp"        android:right="10dp"        android:top="10dp" /></shape>

Android学习系列(16)--App列表之圆角ListView

有些东西看多了，就厌烦了：extjs对我这种感觉最为强烈。甚至，有时觉得设计之殇是审美疲劳。
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。

1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。
先让我们来看两张图片：

android UI设计圆角_第1张图片 android UI设计圆角_第2张图片

左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面。
ps:上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的。

2.原理
通过判断ListView上点击的项的位置，我们切换不同的选择器，当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (itemnum== 0 ){ if (itemnum==(getAdapter().getCount()- 1 )){ //只有一项 setSelector(R.drawable.app_list_corner_round); } else { //第一项 setSelector(R.drawable.app_list_corner_round_top); } } else if (itemnum==(getAdapter().getCount()- 1 )) //最后一项 setSelector(R.drawable.app_list_corner_round_bottom); else { //中间一项 setSelector(R.drawable.app_list_corner_shape); }

3.定义选择器
如果只有一项，我们需要四个角都是圆角，app_list_corner_round.xml文件定义如下：

1 2 3 4 5 6 7 8 9 10 <? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns:android = "http://schemas.android.com/apk/res/android" > < gradient android:startColor = "#B5E7B8" android:endColor = "#76D37B" android:angle = "270" /> < corners android:topLeftRadius = "4dip" android:topRightRadius = "4dip" android:bottomLeftRadius = "4dip" android:bottomRightRadius = "4dip" /> </ shape >

如果是顶部第一项，则上面两个角为圆角，app_list_corner_round_top.xml定义如下：

1 2 3 4 5 6 7 8 <? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns:android = "http://schemas.android.com/apk/res/android" > < gradient android:startColor = "#B5E7B8" android:endColor = "#76D37B" android:angle = "270" /> < corners android:topLeftRadius = "4dip" android:topRightRadius = "4dip" /> </ shape >

如果是底部最后一项，则下面两个角为圆角，app_list_corner_round_bottom.xml定义如下：

1 2 3 4 5 6 7 8 <? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns:android = "http://schemas.android.com/apk/res/android" > < gradient android:startColor = "#B5E7B8" android:endColor = "#76D37B" android:angle = "270" /> < corners android:bottomLeftRadius = "4dip" android:bottomRightRadius = "4dip" /> </ shape >

如果是中间项，则应该不需要圆角，app_list_corner_shape.xml定义如下：

1 2 3 4 5 6 <? xml version = "1.0" encoding = "utf-8" ?> < shape xmlns:android = "http://schemas.android.com/apk/res/android" > < gradient android:startColor = "#B5E7B8" android:endColor = "#76D37B" android:angle = "270" /> </ shape >

4.背景图片
因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png：

在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域。

5. 初步实现
参考前面提供的素材和核心代码，我们初步实现如下:
(1).自定义CornerListView.java:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 /** * 圆角ListView */ public class CornerListView extends ListView { public CornerListView(Context context) { super (context); } public CornerListView(Context context, AttributeSet attrs, int defStyle) { super (context, attrs, defStyle); } public CornerListView(Context context, AttributeSet attrs) { super (context, attrs); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: int x = ( int ) ev.getX(); int y = ( int ) ev.getY(); int itemnum = pointToPosition(x, y); if (itemnum == AdapterView.INVALID_POSITION) break ; else { if (itemnum== 0 ){ if (itemnum==(getAdapter().getCount()- 1 )){ setSelector(R.drawable.app_list_corner_round); } else { setSelector(R.drawable.app_list_corner_round_top); } } else if (itemnum==(getAdapter().getCount()- 1 )) setSelector(R.drawable.app_list_corner_round_bottom); else { setSelector(R.drawable.app_list_corner_shape); } } break ; case MotionEvent.ACTION_UP: break ; } return super .onInterceptTouchEvent(ev); } }

这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件：
列表布局文件main_tab_setting.xml：

1 2 3 4 5 6 7 8 9 10 11 12 13 <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" > < com.tianxia.app.floworld.view.CornerListView android:id = "@+id/setting_list" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_margin = "10dip" android:background = "@drawable/app_list_corner_border" android:cacheColorHint = "#00000000" > </ com.tianxia.app.floworld.view.CornerListView > </ LinearLayout >

列表项布局文件main_tab_setting_list_item.xml：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "fill_parent" android:layout_height = "fill_parent" > < ImageView android:id = "@+id/setting_list_item_arrow" android:layout_alignParentRight = "true" android:layout_centerVertical = "true" android:layout_width = "wrap_content" android:layout_height = "fill_parent" android:layout_marginLeft = "15dip" android:layout_marginRight = "15dip" android:src = "@drawable/appreciate_tab_list_item_arrow_small" /> < TextView android:id = "@+id/setting_list_item_text" android:layout_toLeftOf = "@id/setting_list_item_arrow" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:textSize = "16dip" android:textColor = "#000000" android:paddingTop = "10dip" android:paddingBottom = "10dip" android:paddingLeft = "10dip" /> </ RelativeLayout >

(3)界面实现
显示界面SettingTabActivity.java:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 public class SettingTabActivity extends Activity{ private CornerListView cornerListView = null ; private List<Map<String,String>> listData = null ; private SimpleAdapter adapter = null ; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main_tab_setting);

Android学习系列(16)--App列表之圆角ListView

更多相关文章

随机推荐