实现类似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 * * 拦截触摸事件 * * */@Overridepublic 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 itemsetSelector(R.drawable.app_list_corner_single_item);} else{//第一项 the first itemsetSelector(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
?