Android自定义View — 列表字母索引

效果图：

GIF.gif

字母索引这个功能还是很常见的，例如：联系人，城市选择等一些功能都会用到，其实这个功能还是很简单的，现在我们就来动手写一遍。

分析：

1、A-Z字母的绘制.
2、滑动的时候选中的字母会变成红色。
3、选中的字母会在屏幕中央显示。
4、消失的时候会停留一会再消失。
我们来一个一个解决咯。

首先写一个自定义的View 继承自 View 先,然后初始化设置一下画笔的一些设置。

public class LetterList extends View {
    private Paint mPaint;
    private Paint mPaint2;
    // 26个字母
    public static String[] letters = {"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", "#"};
 public LetterList(Context context) {
        this(context, null);
    }

    public LetterList(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LetterList(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setTextSize(spTopx(10));//文字 sp转px
        mPaint.setColor(Color.BLACK);

        mPaint2 = new Paint();
        mPaint2.setAntiAlias(true);
        mPaint2.setTextSize(spTopx(10));
        mPaint2.setColor(Color.RED);
    }

然后，我们就要去测量还有绘制我们的列表了。

A-Z字母的绘制

这部分，涉及到自定义View 中文字的绘制，但是我们这篇文章的重点是实现这个功能，所以还不了解自定义文字绘制的可以去查一下。
文字绘制中，只要注意文字绘制的位置就可以画出来啦，也就是文字的 X,Y。 Y是文字的基线的位置。那么我们想一下，因为我们是不是只要拿到一个文字的宽度，还有一个字母的Y（基线），就能画一个字母，那么 26字母个的时候呢？就是一个字母的高度*个数+Y（基线）
因此我们要得到：
1、选中字母的宽度 //在画笔中有 measureText（）这个方法能测量宽度
2、选中字母所在的高度

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //单个字母的高度
        int letterHeight = height / letters.length;
        for (int i = 0; i < letters.length; i++) {
            //单个字母的宽度
            float measureWidht = mPaint.measureText(letters[i]);
            int dy = (int) (letterHeight * i + letterHeight - measureWidht / 2);
            int dx = (int) (mWidth / 2 - measureWidht / 2);

            canvas.drawText(letters[i], dx, dy, mPaint);
           //判断字符是不是选中的
            if (letters[i].equals(currentLetter)) {
                canvas.drawText(letters[i], dx, dy, mPaint2);
            }
        }
    }

滑动的时候选中的字母会变成红色。

这部分就是监听滑动事件啦。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
     //这里需要判断一下，滑动的区域是不是在我们26 个字母的范围内。
        if ((event.getY() / height) * letters.length < 0 || (event.getY() / height) * letters.length > letters.length) {
            return false;
        }
        switch (event.getAction()) {
    //监听按下和移动事件
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
             //获取当前字母（按下或移动的高度除总高度乘以总个数=按下或移动的数组的下标）
                currentLetter = letters[(int) ((event.getY() / height) * letters.length)];
               //刷新界面，就是重新调用 Draw 方法
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
             //抬起的时候给下标设置 为空
                currentLetter = "";     
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }

选中的字母会在屏幕中央显示。

想让选中的字符在屏幕显示，我们就可以写一个回调，然后把他设置给 TextView 显示就可以了。

 public void onTouchSelcetListener(onTouchSelcetListener listener) {
        mListener = listener;
    }

    public interface onTouchSelcetListener {
        void touch(boolean isTouch,String select);
    }

然后修改一下 onTouchEvent 方法，添加一个回调

    @Override
    public boolean onTouchEvent(MotionEvent event) {
     //这里需要判断一下，滑动的区域是不是在我们26 个字母的范围内。
        if ((event.getY() / height) * letters.length < 0 || (event.getY() / height) * letters.length > letters.length) {
            return false;
        }
        switch (event.getAction()) {
          //监听按下和移动事件
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
             //获取当前字母（按下或移动的高度除总高度乘以总个数=按下或移动的数组的下标）
                currentLetter = letters[(int) ((event.getY() / height) * letters.length)]; 
             //回调
                mListener.touch(true,currentLetter);
               //刷新界面，就是重新调用 Draw 方法
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
             //抬起的时候给下标设置 为空
                currentLetter = "";     
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }

然后在 Activity 实现一下

 @Override
    public void touch(boolean isTouche,String select) {
        if (isTouche) {
            mTextView.setText(select);
        }else {
            mTextView.setText("");
        }
    }

消失的时候会停留一会再消失

其实分析一下，很简单的就是在抬起的时候延时回调就可以了

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        if ((event.getY() / height) * letters.length < 0 || (event.getY() / height) * letters.length > letters.length) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                currentLetter = letters[(int) ((event.getY() / height) * letters.length)];
                mListener.touch(true,currentLetter);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                currentLetter = "";
               //延时回调
                this.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mListener.touch(false,currentLetter);
                    }
                },1500);
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }

到这里一个简单的字母索引就完成了。