time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android实现联系人分组导航和挤压动画

Android实现联系人分组导航和挤压动画

时间:2014-06-18 14:47 点击:1423次 字体:[ ]




记得在我刚接触Android的时候对系统联系人中的特效很感兴趣,它会根据手机中联系人姓氏的首字母进行分组,并在界面的最顶端始终显示一个当前的分组。如下图所示:

                                             Android实现联系人分组导航和挤压动画_www.fengfly.com

最让我感兴趣的是,当后一个分组和前一个分组相碰时,会产生一个上顶的挤压动画。那个时候我思考了各种方法想去实现这种特效,可是限于功夫不到家,都未能成功。如今两年多过去了,自己也成长了很多,再回头去想想这个功能,突然发现已经有了思路,于是立刻记录下来与大家分享。

首先讲一下需要提前了解的知识点,这里我们最需要用到的就是SectionIndexer,它能够有效地帮助我们对分组进行控制。由于SectionIndexer是一个接口,你可以自定义一个子类来实现SectionIndexer,不过自己再写一个SectionIndexer的实现太麻烦了,这里我们直接使用Android提供好的实现AlphabetIndexer,用它来实现联系人分组功能已经足够了。
 

AlphabetIndexer的构造函数需要传入三个参数,第一个参数是cursor,第二个参数是sortedColumnIndex整型,第三个参数是alphabet字符串。其中cursor就是把我们从数据库中查出的游标传进去,sortedColumnIndex就是指明我们是使用哪一列进行排序的,而alphabet则是指定字母表排序规则,比如:"ABCDEFGHIJKLMNOPQRSTUVWXYZ"。有了AlphabetIndexer,我们就可以通过它的getPositionForSection和getSectionForPosition方法,找出当前位置所在的分组,和当前分组所在的位置,从而实现类似于系统联系人的分组导航和挤压动画效果,关于AlphabetIndexer更详细的详解,请参考官方文档。
 

那么我们应该怎样对联系人进行排序呢?前面也提到过,有一个sortedColumnIndex参数,这个sortedColumn到底在哪里呢?我们来看一下系统联系人的raw_contacts这张表(/data/data/com.android.providers.contacts/databases/contacts2.db),这个表结构比较复杂,里面有二十多个列,其中有一列名叫sort_key,这就是我们要找的了!如下图所示:
 

                                              Android实现联系人分组导航和挤压动画_www.fengfly.com
 

可以看到,这一列非常人性化地帮我们记录了汉字所对应的拼音,这样我们就可以通过这一列的值轻松为联系人进行排序了。
 

下面我们就来开始实现,新建一个Android项目,命名为ContactsDemo。首先我们还是先来完成布局文件,打开或新建activity_main.xml作为程序的主布局文件,在里面加入如下代码:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     xmlns:tools="http://schemas.android.com/tools" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" 
  5.     android:orientation="vertical" > 
  6.  
  7.     <ListView 
  8.         android:id="@+id/contacts_list_view" 
  9.         android:layout_width="fill_parent" 
  10.         android:layout_height="wrap_content" 
  11.         android:layout_alignParentTop="true" 
  12.         android:fadingEdge="none" > 
  13.     </ListView> 
  14.       
  15.      <LinearLayout 
  16.         android:id="@+id/title_layout" 
  17.         android:layout_width="fill_parent" 
  18.         android:layout_height="18dip" 
  19.         android:layout_alignParentTop="true" 
  20.         android:background="#303030" > 
  21.  
  22.         <TextView 
  23.             android:id="@+id/title" 
  24.             android:layout_width="wrap_content" 
  25.             android:layout_height="wrap_content" 
  26.             android:layout_gravity="center_horizontal" 
  27.             android:layout_marginLeft="10dip" 
  28.             android:textColor="#ffffff" 
  29.             android:textSize="13sp" /> 
  30.     </LinearLayout> 
  31.  
  32. </RelativeLayout> 

 

布局文件很简单,里面放入了一个ListView,用于展示联系人信息。另外还在头部放了一个LinearLayout,里面包含了一个TextView,它的作用是在界面头部始终显示一个当前分组。

 

然后新建一个contact_item.xml的布局,这个布局用于在ListView中的每一行进行填充,代码如下:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="match_parent" 
  3.     android:layout_height="match_parent" 
  4.     android:orientation="vertical" > 
  5.  
  6.     <LinearLayout 
  7.         android:id="@+id/sort_key_layout" 
  8.         android:layout_width="fill_parent" 
  9.         android:layout_height="18dip" 
  10.         android:background="#303030" > 
  11.  
  12.         <TextView 
  13.             android:id="@+id/sort_key" 
  14.             android:layout_width="wrap_content" 
  15.             android:layout_height="wrap_content" 
  16.             android:layout_gravity="center_horizontal" 
  17.             android:layout_marginLeft="10dip" 
  18.             android:textColor="#ffffff" 
  19.             android:textSize="13sp" /> 
  20.     </LinearLayout> 
  21.  
  22.     <LinearLayout 
  23.         android:id="@+id/name_layout" 
  24.         android:layout_width="fill_parent" 
  25.         android:layout_height="50dip" > 
  26.  
  27.         <ImageView 
  28.             android:layout_width="wrap_content" 
  29.             android:layout_height="wrap_content" 
  30.             android:layout_gravity="center_vertical" 
  31.             android:layout_marginLeft="10dip" 
  32.             android:layout_marginRight="10dip" 
  33.             android:src="@drawable/icon" /> 
  34.  
  35.         <TextView 
  36.             android:id="@+id/name" 
  37.             android:layout_width="wrap_content" 
  38.             android:layout_height="wrap_content" 
  39.             android:layout_gravity="center_vertical" 
  40.             android:textColor="#ffffff" 
  41.             android:textSize="22sp" /> 
  42.     </LinearLayout> 
  43.  
  44. </LinearLayout> 



本文地址 : http://www.fengfly.com/plus/view-215093-1.html
标签: Android
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: