简单实现字母快速导航LetterView

现在在许多的应用都用到了索引的自定义View,如微信的联系人检索，大众点评的城市列表检索等等。它的实现原理无非就是在一个View上面从上到下依次排列画出，并提供一个接口以便于快速导航。下面为实现代码：

package com.example.quubee.view;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;

/**
* 字母快速导航自定义View
*
* @author mm
*
*/
public class MyLetterView extends View {
private Paint paint;
private List<String> letters;
private OnTouchLetterListener listener;

public MyLetterView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

/**
* 做初始化操作
*/
private void initView() {
// 初始化画笔
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.GRAY);
// 初始化要显示的数据,这里是26个大写的英文字母
letters = new ArrayList<String>();
for (int i = 65; i < 91; i++) {
letters.add(String.valueOf((char) i));
}
// 设置字体大小
paint.setTypeface(Typeface.MONOSPACE);
paint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
13, getResources().getDisplayMetrics()));
}
/**
* 重新绘制
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 获取整个View的宽和高
int width = getWidth();
int height = getHeight();
// 计算文字所占的高度
int letterHeight = height / letters.size();
// 开始绘制
for (int i = 0; i < letters.size(); i++) {
// 获取文字的边界属性
Rect bounds = new Rect();
paint.getTextBounds(letters.get(i), 0, letters.get(i).length(),
bounds);
int lWidth = bounds.width();
int lHeight = bounds.height();
// 计算文字绘制的坐标点，一般在左下角
float x = (width - lWidth) / 2;
float y = (letterHeight - lHeight) / 2 + letterHeight * i;
canvas.drawText(letters.get(i), x, y, paint);
}
}
/**
* 处理触摸事件
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
setBackgroundColor(Color.LTGRAY);
if (listener != null) {
// 获取手指所在的Y坐标点，并计算所触摸的为第几个item的位置
int y = (int) event.getY();
int index = letters.size() * y / getHeight();
if (index >= 0 && index < letters.size()) {
listener.onTouchLetter(letters.get(index));
}
}
break;
default:
// 设置默认情况下的背景为透明色
setBackgroundColor(Color.parseColor("#00ffffff"));
break;
}
return true;
}

/**
* 注册监听器
*
* @param listener
*/
public void setOnTouchLetterListener(OnTouchLetterListener listener) {
this.listener = listener;
}

/**
* 手指移动时会调用此监听器的方法
*
* @author mm
*
*/
public interface OnTouchLetterListener {
void onTouchLetter(String letter);
}

}

在Activity中调用的方法：

lvSortKey.setOnTouchLetterListener(new OnTouchLetterListener() {

@Override
public void onTouchLetter(String letter) {
//获取ListView中对应首字母相同的item
int pos=adapter.getPositionForSection(letter.charAt(0));
//定位到某个位置的Item
lvFriends.setSelection(pos);
}
});

显示效果如下所示：