Android自定义View（6）手写一个好玩的字母索引表

Screenrecorder-2021-06-29-14-25-54-6992021629143911.gif

分两步写

（1）从上到下依次绘制出26个字母

（2）拦截触摸事件，根据手指触点改变相邻几个字母X位置，重绘字母。

（1）绘制26个字母

第一步先从上往下绘制出26个字母。这个简单，使用for循环自上而下依次绘制即可。文本绘制可参考：（Android自定义View系列（1）-绘制文字实现一个简单的TextView（自定义View基础） – 简书 (jianshu.com)
）
26个字母绘制代码如下：

for (int i = 0; i < lettersList.length; i++) {
            //计算出每个Item的Y方向上的中心
            int itemCenterY = itemHeight * i + itemHeight / 2 + getPaddingTop();
            //基线的位置等于 中线的位置 + dy
            int baseLine = itemCenterY + dy;
            canvas.drawText(lettersList[i], x, baseLine, normalPaint);
        }

X位置不变，itemCenterY递增，循环得出每个字母的baseLine即可。

（2）监听及拦截触摸事件，根据触点改变相邻字母的X方向上的位置

获得手指出点之后，改变触点相邻几个字母X方向上的位置，然后重绘。如此重复，即可实现图中效果。事件监听代码：

 @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 缩小触控区域
        if (event.getX() < (getWidth() - 2 * getPaddingRight() - normalPaint.measureText(lettersList[0]))) {
            if (!((currentY == -1) && (currentPosition == -1))) {
                currentY = -1;
                currentPosition = -1;
                invalidate();
            }
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //获取当前触点Y的值，再除以item的高度，得到触点的position
                currentY = event.getY();
                int itemHeight = getHeight() / lettersList.length;
                int newPosition = (int) (currentY / itemHeight);
                //防止数组越界
                if (newPosition < 0) newPosition = 0;
                if (newPosition > lettersList.length - 1) newPosition = lettersList.length - 1;
                //绘制优化，防止不必要的重复绘制
                if (newPosition == currentPosition) return true;
                currentPosition = newPosition;
                if (mLetterChangeListener != null) {
                    mLetterChangeListener.letterChange(lettersList[currentPosition], false);
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                currentY = -1;
                if (mLetterChangeListener != null) {
                    mLetterChangeListener.letterChange(lettersList[currentPosition], true);
                }
                invalidate();
                break;
            default:
                currentY = -1;
                currentPosition = -1;
                invalidate();
                break;
        }
        return true;
//        return super.onTouchEvent(event); // return true 表示拦截后续事件，如果是false则不会再拦截MOVE事件
    }

可以看到，每次事件触发都会记录下当前触点的 Y值currentY ，以及当前选中字母的位置currentPosition，并且调用invalidate()方法重绘。
触摸事件触发后，字母重绘的代码如下：

 for (int i = 0; i < lettersList.length; i++) {
            //计算出每个Item的Y方向上的中心
            int itemCenterY = itemHeight * i + itemHeight / 2 + getPaddingTop();

            //基线的位置等于 中线的位置 + dy
            int baseLine = itemCenterY + dy;

            // 将与被选中的item相邻的几个item的 x位置向左移
            if ((currentY > 0) && (Math.abs(currentY - itemCenterY) < 3 * itemHeight)) { // 注释1
                if (i == currentPosition) { //选中的item
                    canvas.drawText(lettersList[i],
                            (float) (x - (3.5 * itemHeight - Math.abs(currentY - itemCenterY))), baseLine, normalPaint);
                    canvas.drawText(lettersList[i],
                            (x - (6 * itemHeight - Math.abs(currentY - itemCenterY))), baseLine, highLinePaint);// 再画个大的
                }else {
                    canvas.drawText(lettersList[i], x - (3 * itemHeight - Math.abs(currentY - itemCenterY)), baseLine, normalPaint);
                }
            } else {
                canvas.drawText(lettersList[i], x, baseLine, normalPaint);
            }
        }

可以看到，注释1处增加了条件判断，将触点相邻的几个字母的x位置依次减小，就形成了图中所示的动态效果。
此外，这个字母索引还可以加上联系人列表，使得项目完整。联系人列表这里就不介绍了，有兴趣的可以研究代码,源码:（LetterSeekBar/LettersSeekBar.java at master · EthanLee-88/LetterSeekBar (github.com)
）

文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址：http://www.mqs.net/post/12948.html