在玩即时通讯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; |