实现类似iPhone的TableView

效果如下：

 

工程截图：

 

大致介绍下做法：

1.图片使用的是.9.png，这样图片就不会失真了。

2.拦截ListView的触摸事件，重写onInterceptTouchEvent事件，利用pointToPosition(x,y),获得当前触摸的listView的item的position。根据position和item的数量，设置item的背景，即可。

 

下面直接上代码:

CornerListView.java:

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.AdapterView;
import android.widget.ListView;

/**
 * Corner effect ListView, some like the iPhone TableView 
 * 
 * 圆角矩形的ListView，类似iPhone的TableView
 * 
 * @author MichaelYe
 * @since 2012-8-29
 * 
 */
public class CornerListView extends ListView 
{

	public CornerListView(Context context) 
	{
		super(context);
		init();
	}

	public CornerListView(Context context, AttributeSet attrs) 
	{
		super(context, attrs);
		init();
	}
	
	public CornerListView(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
		init();
	}

	/**
	 * set the ListView white corner background
	 * 
	 * 设置整体的背景是白色圆角
	 * 
	 * */
	private void init()
	{
		this.setBackgroundResource(R.drawable.corner_list_bg);
	}

	/**
	 * intercept the touch event
	 * 
	 * 拦截触摸事件
	 * 
	 * */
	@Override
	public boolean onInterceptTouchEvent(MotionEvent event)
	{
		switch (event.getAction()) 
		{
		case MotionEvent.ACTION_DOWN:
			int x = (int) event.getX();
			int y = (int) event.getY();
			int itemPosition = pointToPosition(x, y);//Maps a point to a position in the list.
			int itemCount = getAdapter().getCount() - 1;
			if (itemPosition == AdapterView.INVALID_POSITION)
			{
				break;
			}
			else 
			{
				if (itemPosition == 0)//当第一个item被点击的是，需要判断下当前是否只有一条数据
				{
					if (itemPosition == itemCount) 
					{
						//只有一项 only one item
						setSelector(R.drawable.app_list_corner_single_item);
					} 
					else
					{
						//第一项 the first item
						setSelector(R.drawable.app_list_corner_first_item);
					}
				} 
				else if (itemPosition == itemCount)//最后一条数据被点击的时候 the last item
				{
					setSelector(R.drawable.app_list_corner_last_item);
				}
				else 
				{
					setSelector(R.drawable.app_list_corner_middle_item);
				}
			}

			break;
		case MotionEvent.ACTION_UP:
			break;
		}
		return super.onInterceptTouchEvent(event);
	}
}

 

MainActivity.java:

/**
 * This Demo shows how to make a Corner ListView just like the iPhone TableView
 * 
 * 这个demo展示了如何制作一个类似iPhone的TableView控件
 * 
 * @author MichaelYe
 * @since 2012-8-29
 * */
public class MainActivity extends Activity 
{

	CornerListView cornerListView;
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        cornerListView = (CornerListView)findViewById(R.id.list);
        cornerListView.setAdapter(new SimpleAdapter(MainActivity.this, getData(), 
        		android.R.layout.simple_list_item_1, new String[]{"KEY"}, new int[]{android.R.id.text1}));
    }

    /**
     * DataSource
     * 
     * 数据源
     * 
     * 
     * */
    public List<HashMap<String, String>> getData()
    {
    	List<HashMap<String, String>> dataList = new ArrayList<HashMap<String, String>>();
    	HashMap<String, String> map0 = new 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>();
    	map0.put("KEY", "0");
    	map1.put("KEY", "1");
    	map2.put("KEY", "2");
    	map3.put("KEY", "3");
    	map4.put("KEY", "4");
    	dataList.add(map0);
    	dataList.add(map1);
    	dataList.add(map2);
    	dataList.add(map3);
    	dataList.add(map4);
    	return dataList;
    }
    
}

 布局文件：

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />

</RelativeLayout>

 

工程下载地址：

https://github.com/michaelye/DemoCornerListView