自定义View学习3之字母索引列表

目录

画出字母索引表

这里就是自定义View的常规套路，也就是onMeasure()、onDraw()、onLayout()等方法的重写。但是在字母索引表中我们不需要重写OnLayout(),整个列表的位置很明确。

onMeasure()

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 计算指定宽度 = 左右的padding + 字母的宽度(取决于你的画笔)
        int textWidth = (int) mPaint.measureText("A");// A字母的宽度
        int width = getPaddingLeft() + getPaddingRight() + textWidth;
        // 高度可以直接获取
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

onDraw()

 @Override
    protected void onDraw(Canvas canvas) {
        // 画26个字母
        //字母的高度等于整个控件高度减去上下间距/字母个数
        int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;
        for (int i = 0; i < mLetters.length; i++) {
            // 知道每个字母的中心位置     前面字符的高度+当前字符与前面字符的间距+当前字符的一半
            int letterCenterY = i * itemHeight + itemHeight / 2 + getPaddingTop();
            // 基线
            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
            int dy = (int) ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
            int baseLine = letterCenterY + dy;
            // x 绘制在最中间 = 宽度/2 - 文字/2
            int textWidth = (int) mPaint.measureText(mLetters[i]);
            int x = getWidth() / 2 - textWidth / 2;

            // 当前字母 高亮  用两个画笔(最好) 改变颜色
            if (mLetters[i].equals(mCurrentTouchLetter)) {
                mPaint.setColor(Color.RED);
                canvas.drawText(mLetters[i], x, baseLine, mPaint);
            } else {
                mPaint.setColor(Color.BLUE);
                canvas.drawText(mLetters[i], x, baseLine, mPaint);
            }
        }
    }

给字母索引表添加触摸事件

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            // case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                // 1.计算出当前触摸字母  获取当前的位置
                float currentMoveY = event.getY();
                //2.当前字母的位置 = currentMoveY / 字母高度 ， 通过位置获取字母  
                int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;
                int currentPosition = (int) (currentMoveY / itemHeight);

                if (currentPosition < 0)
                    currentPosition = 0;

                if (currentPosition > mLetters.length - 1)
                    currentPosition = mLetters.length - 1;

                // 这里可以判断当前字母是否与之前的字母相同相同则不需要
                mCurrentTouchLetter = mLetters[currentPosition];

                if (mListener != null) {
                    mListener.touch(mCurrentTouchLetter, true);
                }

                // 重新绘制
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                if (mListener != null) {
                    mListener.touch(mCurrentTouchLetter, false);
                }
                break;
        }
        return true;
    }

添加回调事件

之前我都不会写回调事件，因此记录下如何写回调事件

回调可以简单理解为一种约定机制，假设有类A和类B,约定就是，当类B的方法被调用之后，就通知类A的某个方法,在这里就是当我们在MainActivity（）中调用touch（）方法时，这个时候mListener会通知传入mCurrentTouchLetter，这个时候，MainActivity（）就可以得到这个值。

 private LetterTouchListener mListener;
 public void setOnLetterTouchListener(LetterTouchListener listener) {
        this.mListener = listener;
    }
    
 public interface LetterTouchListener {
        void touch(CharSequence letter, boolean isTouch);
    }

自定义View的套路

1.首先extends View 然后至少写两个构造方法
2.接下来根据需要可以写styles.xml文件

自定义View大部分时候只需要重写两个方法：onMeasure()和onDraw()。
3.重写onMeasure()方法，得到要画的View的宽高

为什么在xml文件中我们定义了layout_width和layout_height还需要重写onMeasure()方法定义宽高呢？
这是因为在xml中我们写的layout_width和layout_height可能是wrap_content或者match_parent，这时候宽高是没有准确值的，而我们在画一个自定义view的时候又需要一个准确的值，所以我们需要在onMeasure（）方法中获取宽高，比如我在xml文件里定义一个控件layout_width和layout_height都设置成wrap_content，但是我又需要控件是正方形，这个时候就需要重写onMeasure()方法。

4.重写onDraw(）方法，几个比较重要的元素 drawText(Paint，基线，x，要画的元素）