A-Z排序控件的实现

• 前言

　　最近项目需要做一个地区首字母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();
     }

可以看到主要区别就是单元格的宽度和高度相应改变了;后面会补充一张计算草图.