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)
）
