实现类似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