Android ListView圆角实现

Android ListView圆角实现

在android上开发项目，如果仅仅是采用默认的样式可能不是很美观，需要编写响应的样式来使界面美观，在iphone上常用的圆角ListView的实现。

本人实现的原理如下：

通过重写ListView中拦截触摸的事件方式，在生成ListView时候根据不同行采用不同的样式。如第一个行，最末一行，和中建行。（特殊的情况下只有一行的时候，四个角均为圆角考虑）。

实现如下：



最后一行为时候，下方两个角为圆角样式如下：

app_list_corner_round_bottom.xml

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:startColor="#BFEEFF"

android:endColor="#40B9FF"

android:angle="270"/>

<corners android:bottomLeftRadius="6dip"

android:bottomRightRadius="6dip" />

</shape>

第一行为圆角且仅仅为一条记录使用样式：

app_list_corner_round.xml

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:startColor="#BFEEFF"

android:endColor="#40B9FF"

android:angle="270"/>

<corners android:topLeftRadius="6dip"

android:topRightRadius="6dip"

android:bottomLeftRadius="6dip"

android:bottomRightRadius="6dip"/>

</shape>

第一行为圆角且有多条记录使用样式：

app_list_corner_round_top.xml

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:startColor="#BFEEFF"

android:endColor="#40B9FF"

android:angle="270"/>

<corners android:topLeftRadius="6dip"

android:topRightRadius="6dip"/>

</shape>

多行记录非第一行和最末一行使用的样式：

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:startColor="#BFEEFF"

android:endColor="#40B9FF"

android:angle="270"/>

</shape>

重写的ListView

Java代码


package com.easyway.listview.corner;

import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.widget.AdapterView;

import android.widget.ListView;

/**

* 圆角ListView

* 重写ListView的样式实现相关的样式

* 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="#BFEEFF"

android:endColor="#40B9FF"

android:angle="270"/>

<corners android:topLeftRadius="6dip"

android:topRightRadius="6dip"/>

</shape>

*

* android:shape 配置的是图形的形式，主要包括方形、圆形等，上边代码为方形。

* gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度（90度为上下渐变，0为左右渐变），

* padding节点主要配置上下左右边距，

* corners节点配置四周园角的半径。

*

*

* @Title:

* @Description: 实现TODO

* @Copyright:Copyright (c) 2011

* @Company:易程科技股份有限公司

* @Date:2012-7-16

* @author longgangbai

* @version 1.0

*/

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);

}

}

主要布局类main.xml

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:id="@+id/listview_layout"

android:layout_height="fill_parent"

android:orientation="vertical" >

<LinearLayout

android:id="@+id/linearLayout1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:paddingBottom="5dp"

android:paddingLeft="25dp"

android:paddingTop="15dp" >

<TextView

android:id="@+id/menu_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/setting"

android:textColor="@color/gray" />

</LinearLayout>

<com.easyway.listview.corner.CornerListView

android:id="@+id/list1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:background="@drawable/shape_bg_listview"

android:cacheColorHint="@null"/>

</LinearLayout>

每行的布局：

Xml代码


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<RelativeLayout

android:id="@+id/relativeLayout1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingBottom="10dip"

android:paddingLeft="15dip"

android:paddingRight="5dip"

android:paddingTop="10dip" >

<TextView

android:id="@+id/item_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:textColor="@color/gray"

android:textSize="15sp" />

<ImageView

android:id="@+id/imageView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:layout_marginRight="16dp"

android:src="@drawable/right" />

</RelativeLayout>

</LinearLayout>

主要类：

Java代码


package com.easyway.listview.corner;

import java.util.ArrayList;

import java.util.HashMap;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.LinearLayout;

import android.widget.SimpleAdapter;

/**

* Android实现圆角ListView示例

* 实现圆角ListView原理主要采用添加相关的样式布局。

* 通过重写ListView中特定的方法

* 拦截触摸事件的方法。

* public boolean onInterceptTouchEvent(MotionEvent ev)

* 根据横轴坐标计算行数，并实现

*

* @Title:

* @Description: 实现TODO

* @Copyright:Copyright (c) 2011

* @Company:易程科技股份有限公司

* @Date:2012-7-16

* @author longgangbai

* @version 1.0

*/

public class RoundCornerActivity extends Activity {

private CornerListView cornerListView = null;

private ArrayList<HashMap<String, String>> maplist = null;

private LinearLayout linearLayout;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//设置布局

setContentView(R.layout.main);

//获取布局对象

linearLayout=(LinearLayout)findViewById(R.id.listview_layout);

//设置壁纸为背景图片

linearLayout.setBackgroundDrawable(getWallpaper());

//获取初始化数据

maplist=getData();

//创建一个适配器对象

SimpleAdapter adapter1 = new SimpleAdapter(this, maplist,

R.layout.simple_list_item_1, new String[] { "item" },

new int[] { R.id.item_title });

//创建ListView对象

cornerListView = (CornerListView) findViewById(R.id.list1);

//设置适配器

cornerListView.setAdapter(adapter1);

initListener();

}

private void initListener() {

//添加响应时间

cornerListView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {

if (arg2 == 0) {

System.out.println("0");

}else{

System.out.println("1");

}

}

});

}

/**

* 模拟数据

* @return

*/

public ArrayList<HashMap<String, String>> getData() {

maplist = new ArrayList<HashMap<String, String>>();

HashMap<String, String> map1 = new HashMap<String, String>();

HashMap<String, String> map2 = new HashMap<String, String>();

HashMap<String, String> map3 = new HashMap<String, String>();

HashMap<String, String> map4 = new HashMap<String, String>();

map1.put("item", "公交");

map2.put("item", "火车");

map3.put("item", "地铁");

map4.put("item", "航空");

maplist.add(map1);

maplist.add(map2);

maplist.add(map3);

maplist.add(map4);

return maplist;

}

}