自定义View实现索引效果

效果图展示

实现代码

public class SideLetterBar extends View {
    private static final String[] b = {"↑", "☆", "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 int choose = -1;
    private Paint paint = new Paint();
    private boolean showBg = false;
    private OnLetterChangedListener onLetterChangedListener;
    private TextView overlay;

    public SideLetterBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public SideLetterBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SideLetterBar(Context context) {
        super(context);
    }

    /**
     * 设置悬浮的textview
     * @param overlay
     */
    public void setOverlay(TextView overlay){
        this.overlay = overlay;
    }

    @SuppressWarnings("deprecation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (showBg) {
            //选中时画布的背景
            canvas.drawColor(getResources().getColor(R.color.shadow));
        }

        //画出索引字母
        int height = getHeight();  //获得控件高度
        int width = getWidth();    //获得控件宽度
        int singleHeight = height / b.length;    //得到每一个字母的高度
        //循环画出所有的文字和字母
        for (int i = 0; i < b.length; i++) {
            paint.setTextSize(getResources().getDimension(R.dimen.side_letter_bar_letter_size));
            paint.setColor(getResources().getColor(R.color.gray));
            paint.setAntiAlias(true);//设置画笔抗锯齿
            //手指摁下时当前字母颜色变为红色
            if (i == choose) {
                paint.setColor(Color.RED);
                paint.setFakeBoldText(true);  //加粗
            }
            //计算相应字母的距离居中
            float xPos = width / 2 - paint.measureText(b[i]) / 2;  //控件宽度的一半，减去当前字符宽度的一半，得到X轴坐标
            float yPos = singleHeight * i + singleHeight;   //前面所有字符的高度，加上当前字符的高度，得到y轴坐标（文字绘制是从文字基线开始绘制）
            canvas.drawText(b[i], xPos, yPos, paint);
            paint.reset();  //重置画笔
        }

    }

    // 设置中间显示的结果
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY();
        final int oldChoose = choose;
        final OnLetterChangedListener listener = onLetterChangedListener;
        //相应高度的比例乘以字符数组长度就是我们要的字母
        final int c = (int) (y / getHeight() * b.length);

        switch (action) {
            case MotionEvent.ACTION_DOWN:  //按下
                showBg = true;
                if (oldChoose != c && listener != null) {
                    if (c >= 0 && c < b.length) {
                        listener.onLetterChanged(b[c]);
                        choose = c;
                        invalidate();  //刷新View
                        if (overlay != null){
                            overlay.setVisibility(VISIBLE);
                            overlay.setText(b[c]);
                        }
                    }
                }

                break;
            case MotionEvent.ACTION_MOVE:  //触摸
                if (oldChoose != c && listener != null) {
                    if (c >= 0 && c < b.length) {
                        listener.onLetterChanged(b[c]);
                        choose = c;
                        invalidate();
                        if (overlay != null){
                            overlay.setVisibility(VISIBLE);
                            overlay.setText(b[c]);
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:  //抬起
                showBg = false;
                choose = -1;
                invalidate();
                if (overlay != null){
                    overlay.setVisibility(GONE);
                }
                break;
        }
        return true;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    public void setOnLetterChangedListener(OnLetterChangedListener onLetterChangedListener) {
        this.onLetterChangedListener = onLetterChangedListener;
    }

    /**
     * 定义回调接口用来传值
     */
    public interface OnLetterChangedListener {
        void onLetterChanged(String letter);
    }

}