- 前言
最近项目需要做一个地区首字母a-z排序的效果,记录一下自己如何实现的.
先看下效果图:
- 分析
这种效果自己实现还是第一次;之前见过这种效果:
这些字母都是onDraw画上去的;只要知道每个字母的left,top,right,bottom就能知道它的具体位置,所以onMeasure方法中要确定每个单元格的宽高.文字排序可以先把汉字转换成拼音,再去比较首字母的顺序(特殊地区特殊处理,比如重庆);
具体看下是如何确定字母的位置:
于是乎,代码就出来了:
public class QuickIndexBar extends View {
private OnLetterUpdateListener onLetterUpdateListener;
public interface OnLetterUpdateListener{
void onLetterUpdate(String letter);
}
public OnLetterUpdateListener getOnLetterUpdateListener() {
return onLetterUpdateListener;
}
public void setOnLetterUpdateListener(
OnLetterUpdateListener onLetterUpdateListener) {
this.onLetterUpdateListener = onLetterUpdateListener;
}
private static final String[] LETTERS = 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"
};
private Paint paint;
// 单元格宽度
private int cellWidth;
// 单元格高度
private float cellHeight;
public QuickIndexBar(Context context) {
this(context, null);
}
public QuickIndexBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// 创建一个抗锯齿的画笔
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// 画笔文本加粗
paint.setTypeface(Typeface.DEFAULT_BOLD);
// 颜色
paint.setColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) {
// 遍历26个英文字母, 计算坐标, 进行绘制
for (int i = 0; i < LETTERS.length; i++) {
String letter = LETTERS[i];
// 计算x坐标
float x = cellWidth * 0.5f - paint.measureText(letter) * 0.5f;
// 计算y坐标
Rect bounds = new Rect();
// 获取文本的矩形区域
paint.getTextBounds(letter, 0, letter.length(), bounds);
float y = cellHeight * 0.5f + bounds.height() * 0.5f + i * cellHeight;
// 绘制文本
canvas.drawText(letter, x, y, paint);
}
}
private int lastIndex = -1;
@Override
public boolean onTouchEvent(MotionEvent event) {
float y;
int currentIndex;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 获取被点击到的字母索引
y = event.getY();
// 根据y值, 计算当前按下的字母位置
currentIndex = (int) (y / cellHeight);
if(currentIndex != lastIndex){
if(currentIndex >= 0 && currentIndex < LETTERS.length){
String letter = LETTERS[currentIndex];
if(onLetterUpdateListener != null){
onLetterUpdateListener.onLetterUpdate(letter);
}
System.out.println("letter: " + letter);
// 记录上一次触摸的字母
lastIndex = currentIndex;
}
}
break;
case MotionEvent.ACTION_MOVE:
// 获取被点击到的字母索引
y = event.getY();
// 根据y值, 计算当前按下的字母位置
currentIndex = (int) (y / cellHeight);
if(currentIndex != lastIndex){
if(currentIndex >= 0 && currentIndex < LETTERS.length){
String letter = LETTERS[currentIndex];
if(onLetterUpdateListener != null){
onLetterUpdateListener.onLetterUpdate(letter);
}
System.out.println("letter: " + letter);
// 记录上一次触摸的字母
lastIndex = currentIndex;
}
}
break;
case MotionEvent.ACTION_UP:
lastIndex = -1;
break;
default:
break;
}
return true;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int mHeight = getMeasuredHeight();
cellWidth = getMeasuredWidth();
cellHeight = mHeight * 1.0f / LETTERS.length;
}
}
这种竖直的简单快速索引就搞定了,此外还添加了触摸和点击的监听
- 实现
再来看下我们要的效果图那种效果是如何实现的;主要区别就是字母所在位置和触摸位置的差异,偷点懒,直接上代码了:
@Override
protected void onDraw(Canvas canvas) { // 遍历26个英文字母, 计算坐标, 进行绘制
for (int i = 0; i < LETTERS.length; i++) {
String letter = LETTERS[i]; // 计算x坐标
// float x = cellWidth * 0.5f - paint.measureText(letter) * 0.5f;
float y = cellHeight * 0.5f + paint.measureText(letter) * 0.5f;
// 计算y坐标
Rect bounds = new Rect();
// 获取文本的矩形区域
paint.getTextBounds(letter, 0, letter.length(), bounds); // float y = cellHeight * 0.5f + bounds.height() * 0.5f + i * cellHeight;
float x = cellWidth * 0.5f + bounds.width() * 0.5f + i * cellWidth;
// 绘制文本
canvas.drawText(letter, x, y, paint);
}
} private int lastIndex = -1; @Override
public boolean onTouchEvent(MotionEvent event) { float x;
int currentIndex; switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 获取被点击到的字母索引
x = event.getX();
// 根据x值, 计算当前按下的字母位置
currentIndex = (int) (x / cellWidth);
if (currentIndex != lastIndex) {
if (currentIndex >= 0 && currentIndex < LETTERS.length) {
String letter = LETTERS[currentIndex];
if (onLetterUpdateListener != null) {
onLetterUpdateListener.onLetterUpdate(letter);
}
// 记录上一次触摸的字母
lastIndex = currentIndex;
}
} break;
case MotionEvent.ACTION_MOVE:
// 获取被点击到的字母索引
x = event.getX();
// 根据y值, 计算当前按下的字母位置
currentIndex = (int) (x / cellWidth);
if (currentIndex != lastIndex) {
if (currentIndex >= 0 && currentIndex < LETTERS.length) {
String letter = LETTERS[currentIndex];
if (onLetterUpdateListener != null) {
onLetterUpdateListener.onLetterUpdate(letter);
}
// 记录上一次触摸的字母
lastIndex = currentIndex;
}
} break;
case MotionEvent.ACTION_UP:
lastIndex = -1;
break;
default:
break;
} return true;
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int mWidth = getMeasuredWidth();
cellWidth = mWidth * 1.0f / LETTERS.length;
cellHeight = getMeasuredHeight();
}
可以看到主要区别就是单元格的宽度和高度相应改变了;后面会补充一张计算草图.