关闭

Android 特效 应用列表之圆角ListView

780人阅读 评论(0) 收藏 举报

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

有些东西看多了,就厌烦了: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的效果:

  

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:531055次
    • 积分:3446
    • 等级:
    • 排名:第9663名
    • 原创:13篇
    • 转载:100篇
    • 译文:2篇
    • 评论:106条
    最新评论