Android 自定义WheelView,时钟等自定义

最近要做一个类似于时钟滑动的效果,网上有这个例子:http://blog.csdn.net/leehong2005/article/details/8623694

效果:

分析:

可以自定义一个ListView,按照图中展示,需要至少5个Item,其中中间一个颜色最深,紧挨着的两个颜色淡之,最后更加淡,剩下的都不显示

假如每个Item的大小是50,那么这个ListView的高度是250.

中间的Item之间还必须有两条先,第一条线与ListView顶部相差2个Item,第二条线是3个Item,所以布局可以这么布置

ListView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >        <ListView            android:id="@+id/listview"            android:layout_width="match_parent"            android:layout_height="250dp"            android:divider="@null"            android:dividerHeight="0dp" />        <FrameLayout            android:layout_width="match_parent"            android:layout_height="2dp"            android:layout_marginTop="100dp"            android:background="#52BDFB" >        </FrameLayout>        <FrameLayout            android:layout_width="match_parent"            android:layout_height="2dp"            android:layout_marginTop="150dp"            android:background="#52BDFB" >        </FrameLayout>    </RelativeLayout></RelativeLayout>

item:

<?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="50dp"    android:orientation="vertical" >    <TextView        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="50dp"        android:gravity="center"        android:text="浦发银行"        android:textColor="#000000"        android:textSize="24sp" /></LinearLayout>

由上面的图可以知道,item字体的颜色分为三种,一种是颜色最深的,一种次之,另外一种最淡.

新建一个color:

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="first_001">#000000</color>    <color name="first_002">#A0808080</color>    <color name="first_003">#55DCDCDC</color></resources>

资源准备好了,由上面的分析可知道,listview显示5个item

第一个3级颜色-淡

第二个2级颜色-次之

第三个1级颜色-正常

第四个3级颜色-次之

第五个3级颜色-淡

item的Postion是随着滚动而不断变化的,所以我们需要用setOnScrollListener方法来监听ListView滚动到了第几个位置

监听到滚动以后还需要根据不同的位置做不同的改变,如果在Activity里操作,必须得到每一个item的View,并一一设置对应的颜色值和字体大小

用getchildview这个方法得到的是空的,可以根据改变adapter中的数据,让adapter自己设置

setOnScrollListener监听代码:

listView.setOnScrollListener(new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {if (list.size() < 5) {return;}list.get(firstVisibleItem).setMode(3);list.get(firstVisibleItem + 4).setMode(3);list.get(firstVisibleItem + 1).setMode(2);list.get(firstVisibleItem + 3).setMode(2);list.get(firstVisibleItem + 2).setMode(1);myadapter.notifyDataSetChanged();}});

适配器设置关键代码:

if (list.get(position).getMode() == 1) {holder.contentTextView.setTextColor(context.getResources().getColor(R.color.first_001));holder.contentTextView.setTextSize(24);} else if (list.get(position).getMode() == 2) {holder.contentTextView.setTextColor(context.getResources().getColor(R.color.first_002));holder.contentTextView.setTextSize(20);} else {holder.contentTextView.setTextColor(context.getResources().getColor(R.color.first_003));holder.contentTextView.setTextSize(16);}

适配器根据list中的mode不同,设置不同的布局,这样,效果就出来了

注意:添加数据的时候

private void addData() {// list.add("浦发银行");// list.add("工商银行");// list.add("农业银行");// list.add("建设银行");for (int i = 0; i < 10; i++) {list.add(new Blank("邮政储蓄" + i, 3));}list.add(0, new Blank("", 3));list.add(1, new Blank("", 3));list.add(new Blank("", 3));list.add(new Blank("", 3));myadapter.notifyDataSetChanged();}

最后list添加了四个空的数据,分别添加到了首尾两个地方,目的是让listView真实的item第一个可以滚到到中间的位置

缺陷:没有实现数据循环滚动

源码下载:

//http://pan.baidu.com/share/link?shareid=1085645725&uk=705537436