听音乐一直用的是网易云音乐，原来我就吐槽为什么列表没有字母索引，导致找一首歌很麻烦。不过最近滑动列表时，发现右边有了字母索引条，不知是原来没发现呢，还是网易新加的。既然酱紫，那就动手来实现一下这个字母索引条效果吧

网易云音乐字母索引条效果

网易云音乐列表.gif

国际惯例，先上我们自己实现的效果图

• 实现了网易云音乐字母索引的效果基础上，添加了选中字母变色的效果

LetterIndexView.gif

效果实现分析

其实这个效果和我自定义View第二篇 实现一个简单的RatingBar评分条的效果大同小异，一点区别就是RatingBar那个是用图片绘制并且是水平方向的，而这个效果是垂直方向的画文字。实现思路可以去看下上一篇。

Talk is Cheap，下面直接上代码。看一下关键的实现

1. 定义自定义属性

     <declare-styleable name="LetterIndexView">
           <!--字母文字颜色-->
           <attr name="defaultTextColor" format="color"/>
           <!--选中时字母文字颜色-->
           <attr name="selectTextColor" format="color"/>
           <!--字母文字大小-->
           <attr name="letterTextSize" format="dimension"/>
       </declare-styleable>
   

2. 确定控件的宽高

   • 宽度值为左右padding值 + 字母的宽度
   • 高度值一般为match_parent，这里不做处理

       @Override
       protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
           super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   
           int oneLetterWidth = (int) mDefaultPaint.measureText("A");
           //字母的宽度取决于画笔
           int width = getPaddingLeft() + getPaddingRight() + oneLetterWidth;
           int height = MeasureSpec.getSize(heightMeasureSpec);
           setMeasuredDimension(width, height);
   
       }
   

3. 循环绘制26个英文字母

   • itemHeight是每个字母区域的高度，控件高减去padding值 / 字母个数
   • 绘制字母时要让字母都水平居中显示，这里要计算每个字母绘制的x坐标
   • 触摸的字母和未触摸的字母使用两种颜色的画笔绘制，实现触摸变色

     @Override
       protected void onDraw(Canvas canvas) {
           super.onDraw(canvas);
   
           itemHeight = (getHeight() - getPaddingBottom() - getPaddingTop()) / letters.length;
           for (int i = 0; i < letters.length; i++) {
             
               //每个字母x的坐标
               int x = (int) (getWidth() / 2 - mDefaultPaint.measureText(letters[i]) / 2);
               Paint.FontMetricsInt fontInt = mDefaultPaint.getFontMetricsInt();
               //字母中心位置
               int letterCenterY = itemHeight * i + itemHeight / 2 + getPaddingTop();
               int dy = (fontInt.bottom - fontInt.top) / 2 - fontInt.bottom;
               int baseLine = letterCenterY + dy;
   
               if (i == mTouchIndex) {
                   canvas.drawText(letters[i], x, baseLine, mSelectPaint);
               } else {
                   canvas.drawText(letters[i], x, baseLine, mDefaultPaint);
               }
               Log.d("m1Ku", letters[i]);
           }
       }
   

4. 定义接口回调，回调结果和状态

   • letter表示选中的字母
   • isShow表示用户是否在触摸滑动

       public interface OnLetterTouchListener {
           void onTouchIndex(String letter, boolean isShow);
       }
   
       public void setOnLetterTouchListener(OnLetterTouchListener onLetterTouchListener) {
           this.onLetterTouchListener = onLetterTouchListener;
       }
   

5. 监听用户的触摸和滑动,并回调结果

   • 触摸滑动时isShow返回true，抬起时返回false。以便界面中处理提示字母显示和隐藏

    @Override
       public boolean onTouchEvent(MotionEvent event) {
   
           switch (event.getAction()) {
               case MotionEvent.ACTION_DOWN:
               case MotionEvent.ACTION_MOVE:
               
                   float y = event.getY();
                   int index = (int) (y / itemHeight);
                   if (index < 0) {
                       index = 0;
                   }
                   if (index > letters.length - 1) {
                       index = letters.length - 1;
                   }
                   Log.d("m1Ku", "index = " + index);
   
                   if (index == mTouchIndex) {
                       return true;
                   }
                   mTouchIndex = index;
                   if (onLetterTouchListener != null)
                       onLetterTouchListener.onTouchIndex(letters[mTouchIndex], true);
                   Log.e("m1Ku", "mTouchIndex = " + mTouchIndex);
                   invalidate();
                   break;
               case MotionEvent.ACTION_UP:
                   if (onLetterTouchListener != null)
                       onLetterTouchListener.onTouchIndex(letters[mTouchIndex], false);
                   break;
           }
           return true;
       }
   

6. Activity中使用和测试

   • 根据isShow控制界面提示字母显示和隐藏，并做了延迟消失

    LetterIndexView letterIndexView = (LetterIndexView) findViewById(R.id.letterIndexView);
           letterIndexView.setOnLetterTouchListener(new LetterIndexView.OnLetterTouchListener() {
               @Override
               public void onTouchIndex(String letter, boolean isShow) {
                   if (isShow) {
                       tvIndicator.setVisibility(View.VISIBLE);
                       tvIndicator.setText(letter);
                   } else {
                       handler.postDelayed(new Runnable() {
                           @Override
                           public void run() {
                               tvIndicator.setVisibility(View.GONE);
                           }
                       }, 300);
                   }
               }
           });
   

项目Github地址：https://github.com/m1Koi/CustomViewPractice

小结

类似这种效果主要是对宽高以及触摸位置的计算处理。当然，如果要实现和列表联动，还需要对列表数据进行排序等处理。不过在界面中我们已经可以拿到触摸的字母和索引，在进行下一步也不是难事了