android自定义View之Android手机通讯录制作

android自定义View之Android手机通讯录制作

我们的手机通讯录一般都有这样的效果，如下图：

OK，这种效果大家都见得多了，基本上所有的Android手机通讯录都有这样的效果。那我们今天就来看看这个效果该怎么实现。

一.概述

1.页面功能分析

整体上来说，左边是一个ListView，右边是一个自定义View，但是左边的ListView 和我们平常使用的ListView还有一点点不同，就是在ListView中我对所有的联系人进行了分组，那么这种效果的实现最常见的就是两种思路：

1.使用ExpandableListView来实现这种分组效果

2.使用普通ListView，在构造Adapter时实现SectionIndexer接口，然后在Adapter 中做相应的处理

这两种方式都不难，都属于普通控件的使用，那么这里我们使用第二种方式来实现，第一种方式的实现方法大家可以自行研究，如果你还不熟悉ExpandableListView的使用，可以参考我的另外两篇博客：

1.使用ExpandableListView实现一个时光轴

2.android开发之ExpandableListView的使用，实现类似QQ好友列表

OK，这是我们左边ListView的实现思路，右边这个东东就是我们今天的主角，这里我通过自定义一个View来实现，View中的A、B......#这些字符我都通过canvas的drawText 方法绘制上去。然后重写onTouchEvent方法来实现事件监听。

2.要实现的效果

要实现的效果如上图所示，但是大家看图片有些地方可能还不太清楚，所以这里我再强调一下：

1.左边的ListView对数据进行分组显示

2.当左边ListView滑动的时候，右边滑动控件中的文字颜色能够跟随左边ListView 的滑动自动变化

3.当手指在右边的滑动控件上滑动时，手指滑动到的地方的文字颜色应当发生变化，同时在整个页面的正中央有一个TextView显示手指目前按下的文字

4.当手指按下右边的滑动控件时，右边的滑动控件背景变为灰色，手指松开后，右边的滑动控件又变为透明色

二.左边ListView分组效果的实现

无论多大的工程，我们都要将之分解为一个个细小的功能块分步来实现，那么这里我们就先来看看左边的ListView的分组的实现，这个效果实现之后，我们再来看看右边的滑动控件该怎么实现。

首先我需要在布局文件中添加一个ListView，这个很简单，和普通的ListView一模一样，我就不贴代码了，另外，针对ListView中的数据集，我需要自建一个实体类，该实体类如下：

/**

* Created by wangsong on 2016/4/24.

*/

public class User {

private intimg;

private String username;

private String pinyin;

private String firstLetter;

public User() {

}

public String getFirstLetter() {

return firstLetter;

}

public void setFirstLetter(String firstLetter) { this.firstLetter = firstLetter;

}

public intgetImg() {

return img;

}

public void setImg(intimg) {

this.img = img;

}

public String getPinyin() {

return pinyin;

public void setPinyin(String pinyin) {

this.pinyin = pinyin;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

ername = username;

}

public User(String firstLetter, intimg, String pinyin, String username) { this.firstLetter = firstLetter;

this.img = img;

this.pinyin = pinyin;

ername = username;

}

username 用来存储用户名，img表示用户图像的资源id（这里我没有准备相应的图片，大家有兴趣可以自行添加），pinyin表示用户姓名的拼音，firstLetter表示用户姓名拼音的首字母，OK ，就这么简单的几个属性。至于数据源，我在strings.xml文件中添加了许多数据，这里就不贴出来了，大家可以直接在文末下载源码看。知道了数据源，知道了实体类，我们来看看在MainActivity中怎么样来初始化数据：

private void initData() {

list = new ArrayList<>();

String[] allUserNames = getResources().getStringArray(R.array.arrUsernames);

for (String allUserName :allUserNames) {

User user = new User();

user.setUsername(allUserName);

String convert =

ChineseToPinyinHelper.getInstance().getPinyin(allUserName).toUpperCase();

user.setPinyin(convert);

String substring = convert.substring(0, 1);

if (substring.matches("[A-Z]")) {

user.setFirstLetter(substring);