首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > Iphone >

兑现类似iPhone的TableView

2012-09-25 
实现类似iPhone的TableView效果如下:?工程截图:?大致介绍下做法:1.图片使用的是.9.png,这样图片就不会失真

实现类似iPhone的TableView

效果如下:

兑现类似iPhone的TableView

?

工程截图:

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

?

热点排行