圆角ListView
来源:互联网 发布:java数据库连接池原理 编辑:程序博客网 时间:2024/05/22 02:01
有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈。甚至,有时觉得设计之殇是审美疲劳。
直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone中几乎随处可见圆角设计,也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计,我们并不追求到处都用,无处不用,android中有少数界面用直角确实容易显得锋利,和周边界面太过对比而显得不协调,比如大栏目列表,设置等等,而采用圆角实现,则会活泼,轻松的多,也融合的特别好。
1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持,需要麻烦自定义设置才能实现完美的圆角效果,所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西,看看有什么不一样的感觉。
先让我们来看两张图片:
左边的是Android的一个应用的设置界面,右边是iphone系统的设置界面。
ps:上述只是效果,并不是说左边的圆角列表就是用listview是实现的,事实上它是用LinearLayout布局一个一个堆起来的。
2.原理
通过判断ListView上点击的项的位置,我们切换不同的选择器,当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。
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文件定义如下:
<?
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定义如下:
<?
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定义如下:
<?
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定义如下:
<?
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:
/**
* 圆角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:
<?
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:
<?
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:
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);
cornerListView = (CornerListView)findViewById(R.id.setting_list);
setListData();
adapter =
new
SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item ,
new
String[]{
"text"
},
new
int
[]{R.id.setting_list_item_text});
cornerListView.setAdapter(adapter);
}
/**
* 设置列表数据
*/
private
void
setListData(){
listData =
new
ArrayList<Map<String,String>>();
Map<String,String> map =
new
HashMap<String, String>();
map.put(
"text"
,
"图库更新"
);
listData.add(map);
map =
new
HashMap<String, String>();
map.put(
"text"
,
"收藏图片"
);
listData.add(map);
map =
new
HashMap<String, String>();
map.put(
"text"
,
"下载目录"
);
listData.add(map);
}
}
(4).效果图
通过以上实现,我们基本达到了圆角的ListView的效果:
- 圆角listView
- 圆角ListView
- 圆角listView
- 圆角listview
- 圆角Listview
- 圆角ListView
- Android中Listview(二)--圆角listview
- Android中Listview(三)--圆角listview
- Android 圆角ListView
- Android 圆角Listview
- 圆角ListView(续)
- android 圆角ListView
- android中ListView圆角
- Android ListView圆角
- android listview圆角
- Android ListView圆角
- 自定义ListView圆角
- listview
- USACO section 2.1 Ordered Fractions(简单数学求约数加个排序)
- 网络SEO就一定要精通数据分析
- HDU 2203 kmp
- C++ premier -- 类
- 转化字符串到其它类型
- 圆角ListView
- FPGA静态时序分析——IO口时序(Input Delay /output Delay)
- 《Linux内核设计的艺术》读后感
- re
- 如果你的优化手法还停留在内容加外链就危险了
- 最短路模板BF和SPFA,poj3259测
- ere
- 圆角ListView(续)
- c语言排序方法