ListView的快速索引

在玩即时通讯app比如微信的联系人列表的时候，发现联系人列表的右侧有个竖排的字母索引，点击字母，可以快速索引到相应的联系人。本篇就是实现这个功能。

效果图：

快速索引
快速索引

需要实现：

• 将右侧的字母画到屏幕上去；
• 联系人列表排序；
• 根据联系人名字的首字母为ListView打上TAG
• 选中索引的某个字母，出现相应的TAG下的联系人；

  画索引字母到屏幕上

  新建一个类，继承自View

  public class QuickIndexBar extends View

并提供构造器方法，在构造器中完成相应的初始化工作：

private String[] indexArr; public QuickIndexBar(Context context) { this(context, null); } public QuickIndexBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public QuickIndexBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { indexArr = new String[]{ "搜", "#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"}; paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.DKGRAY); paint.setTextAlign(Paint.Align.CENTER); paint.setTextSize(20); }

下面开始画：

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float center = getWidth() / 2; height = getHeight() / indexArr.length; for (int i = indexArr.length - 1; i > -1; i--) { canvas.drawText(indexArr[i], center, height * (i + 1), paint); } }

此时运行，发现字母索引在屏幕的中间位置。好的，这是第一步。其中，索引的每个字母都是通过drawText(...)方法画上去的，每个字母的x坐标不变，y坐标进行相应的变化(不难理解),需要知道的是：屏幕的坐标是这样的，左上角是坐标原点，向右是x正轴，向下是y轴正轴。

填充虚拟数据

我们看到联系人列表的每个Item包括一个图标和名字，还有相应的TAG，新建实体类People，这里为了能够对最后的联系人排序，我们实现了Comparable<T>接口，并实现了接口的compareTo(...)方法，这里用到了工具类HanziToPinyin.java，这个工具类是我从Android 4.2源代码中抽出来的，当然，如果你没有源码，也可以去github上找一个。

package com.dystu.quickindexbar; /** * Created by Administrator on 2015/5/6. */ public class People implements Comparable<People> { private String name; private int imageId; private String header; public People() { } public People(String name, int imageId) { this.name = name; this.imageId = imageId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getImageId() { return imageId;