仿支付宝支付键盘

第一次拿到这个需求，第一个想法，各种控件嵌套+监听 解决问题。后来想想，这么个东西用这么多控件有点大材小用了，于是就自定义了。
前沿：由于大部分程序员的特性以及工作性质都属于拿来主义者。特此说明，本文章只提供解决思路和关键性代码，不会附带全部代码。

由于只是已Demo方式呈现，并不是一个成熟的自定义控件，好多属性都没有抽离出来，项目写死了。当然也好改。
第一步：构造。这个没什么可说的，在里面初始化一些东西。

 public PasswordView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }
    private void init(final Context context, AttributeSet attrs) {
        //初始化画笔相关

        int textColor = 0x66666666;
        int forgetColor = 0xFF0000FF;
        linePaint = PaintFactory.createAntAndDitherPaint(lineWidth, textColor);
        //创建一个粗体TextPaint
        textPaint = PaintFactory.createBoldTextPaint(lineWidth, textColor);
        textPaint.setTextSize(50);
        //创建一个忘记密码的Paint
        forgetPasswordPaint = PaintFactory.createNormalTextPaint(lineWidth, forgetColor);
        forgetPasswordPaint.setTextSize(30);
        //输入框 外表 shape相关
        inputRoundPaint = PaintFactory.createStrokeRoundPaint(lineWidth, textColor);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PasswordView);


        a.recycle();
        }

这个不是ViewGroup不需要去排版直接走onMeasure。处于测试阶段，按照作者的手机屏幕来的。实际情况，应当获取到具体值。如果你要问，作者为啥不写。答复：故意的。（不要查水表）。重点就那么几点，知道MeasureSpec的几种常量值，明白他是干嘛的。获取总高度，这里面肯定有坑，而且不少，我建议亲自尝试。我的坑并不一定是你的坑，你的坑我并不一定遇到，就是这样。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (heightMeasureSpec == MeasureSpec.EXACTLY) {
            //给width赋值
            //尽量用width：match   height:wrap
        } else {
//            WindowManagerager manager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
//            Display display = manager.getDefaultDisplay();
//            display.getSize(point);
//            totalWidth = point.x;
            // TODO: 2017/5/26 测试这么写 ，正式用上面4行代码
            totalWidth = 720;

            keyboardHeight = (totalWidth - lineWidth >> 1) / 3;
        }
        //getHeaderTotalHeight()+getKeyboardPreLineHeight()<<2
        int measureHeight = (getKeyboardPreLineHeight() << 2) //键盘高度
                + getHeaderTotalHeight()//输入支付密码高度
                +getPasswordTotalHeight()//密码总高度
                +getTextHeight(forgetPasswordPaint)+forgetPasswordMarginBottom;//忘记密码总高度
        Log.d("PasswordView", "===width:" + totalWidth + "   height:" + measureHeight);
        setMeasuredDimension(totalWidth, measureHeight);

    }

那么大头来了，onDraw（）；这个方法是主要工作内容之一。主要要求熟练掌握 Rect RectF Canvas Paint 的api。Canvas有许多draw方法，如有不熟悉的，自行查询。
分析，功能

这是我们的功能界面。
简单分析一下，有哪些绘制点。
1、有一个标题。
2、密码显示区域。
3、忘记密码。
4、键盘输入界面。
对没有太多自定义控件绘制经验的人来说，drawText可能会比较蛋疼，特别是涉及到偏移量的计算，把握不好。
那么你只需要把你要绘制区域的4点坐标封装在Rect /RectF里然后 测量文字高度很容易得出一个正确的偏移量。
比如：你想绘制 Top 高度 0 Bottom 值 200，想要让文居中。
那么文字居中的计算方式是：
Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
top+bottom-fontMetricsInt.bottom-fontMetricsInt.top>>1 的计算结果就是高度的偏移量。
下面就是绘制各种区域：

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

        //绘制顶部View
        drawTopValue(canvas);
        //绘制输入密码框
        drawPasswordLine(canvas);
        //绘制忘记密码
        drawForgetPassword(canvas);
        //绘制键盘
        drawKeyboard(canvas);
    }

其中绘制 键盘逻辑比较重要，我给出我的绘制思路，有更好的欢迎交流

/**
     * 绘制键盘
     */
    private KeyboardBean[] keyboards=new KeyboardBean[12];//存放keyboard数组
    private Rect keyboardTotalArea;//键盘界面总大小
    private void drawKeyboard(Canvas canvas) {
        int startY=forgetRect.bottom+ forgetPasswordMarginBottom;
        //绘制4条横线
        for (int i=0;i<4;i++) {
            int horizontalLineStarY=startY+getKeyboardPreLineHeight()*i;
            canvas.drawLine(0,horizontalLineStarY,totalWidth,horizontalLineStarY+lineWidth,linePaint);
        }
        for (int i=0;i<2;i++) {
            int x_offset =totalWidth/3*(i+1);
            canvas.drawLine(x_offset,startY,x_offset+1,getHeight(),linePaint);
        }
        //将所有keyboard存入数组
        if (keyboards[0] == null) {
            String[] drawValue=new String[]{"1","2","3","4","5","6","7","8","9","","0","<--"};
            int preWidth=totalWidth/3;
            for (int i=0;i<12;i++) {
                int startX=i%3*preWidth;
                int endX=startX+preWidth;
                int y_star=startY+i/3*(keyboardHeight+lineWidth);
                int y_end=y_star+keyboardHeight+lineWidth;
                Rect rect=new Rect(startX,y_star,endX,y_end);
                boolean isFunction=false;
                if (i == 9 | i == 11) {
                    isFunction=true;
                }
                keyboards[i]=new KeyboardBean(isFunction,rect,PaintFactory.createPaint(lineWidth),drawValue[i]);
            }
            keyboardTotalArea=new Rect(0,startY,totalWidth,getHeight());
        }

        //去绘制所有背景
        for (KeyboardBean b:keyboards) {
            Rect rect = b.getRect();
            canvas.drawRect(rect, b.getBackgroundPaint());
            canvas.drawText(
                    b.getDrawText(),
                    rect.centerX()-(measureText(textPaint,b.getDrawText())>>1),
                    getTextOffsetTop(textPaint,rect),
                    textPaint);
        }
    }
 private int measureText(TextPaint paint, String value) {
        return (int) paint.measureText(value);
    }
    /**
     * 获取文本居中偏移量
     */
    private int getTextOffsetTop(TextPaint paint,Rect targetRect) {
        Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
        return targetRect.bottom+targetRect.top-fontMetricsInt.bottom-fontMetricsInt.top>>1;
    }
     /**
     * 键盘管理实体
     */
    private class KeyboardBean {
        //在onDraw的时候会用到是否是按下状态会有不同颜色显示
        private boolean isPressed =false;
        //功能键只有2个 分别为 空白内容 和 删除
        private boolean isFunctionKey=false;
        //记录每一个item的绘制区域
        private Rect rect;
        //画笔
        private Paint paint;
        //绘制文字
        private String drawText;
        //构造

        private KeyboardBean( boolean isFunctionKey, Rect rect, Paint paint,String drawText) {
            this.isFunctionKey = isFunctionKey;
            this.rect = rect;
            this.paint = paint;
            this.drawText=drawText;
        }

        //根据不同性质获取不同背景画笔
        private Paint getBackgroundPaint() {
            //按下状态同意设置为这个颜色
            if (isPressed) {
                paint.setStyle(Paint.Style.FILL);
                paint.setColor(0x6F666666);
            } else {
                //功能型按键设置这个颜色
                if (isFunctionKey) {
                    paint.setStyle(Paint.Style.FILL);
                    paint.setColor(0x6F999999);
                } else {
                    //其他建设置为空白
                    paint.setColor(Color.TRANSPARENT);
                }
            }

            return paint;
        }

        //其他一些set和get方法 不再额外添加注释

        private Rect getRect() {
            return rect;
        }

        public void setPressed(boolean pressed) {
            isPressed = pressed;
        }

        private String getDrawText() {
            return drawText;
        }

        @Override
        public String toString() {
            return "KeyboardBean{" +
                    "isPressed=" + isPressed +
                    ", isFunctionKey=" + isFunctionKey +
                    ", rect=" + rect +
                    ", paint=" + paint +
                    ", drawText='" + drawText + '\'' +
                    '}';
        }
    }

其他的请小伙伴自己根据自己的业务需求去做处理。
其实还有一个重头戏，事件处理。其实不客气的讲，让一个Android开发者自己设计一个OnClickListener的实现，大部分人是实现不了的，有的可能会有一些bug处理不到，当然我的也不一定正确，我没有看过关于onClickListener的实现原理代码，只是凭借我的想法去做这个事情，如果有不同意见，请交流。
先一点一点来。事件主要处理三种 down move 和up
我把这部分所有代码都先放出来

**
     * 分别是 按下动作 x，y值 移动操作x,y值 抬起动作x,y值
     */
    float[] touchData=new float[]{0,0,0,0,0,0};
    //分别是 按下 移动 抬起 如果没有设置-1
    private int defaultIndex=-1;
    int[] keyboardIndex=new int[]{defaultIndex,defaultIndex,defaultIndex};
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //按下
                touchData[0]=event.getX();
                touchData[1]=event.getY();
                onDownEvent();
                break;
            case MotionEvent.ACTION_UP:
                //抬起
                touchData[4]=event.getX();
                touchData[5]=event.getY();

                onUpEvent();
                break;
            case MotionEvent.ACTION_MOVE:
                //移动
                touchData[2]=event.getX();
                touchData[3]=event.getY();

                onMoveEvent();
                break;

            default:
                break;
        }
        return true;
    }
    /**
     * 按下事件响应
     */
    private void onDownEvent() {
        float x=touchData[0];
        float y=touchData[1];
        //判断区域，并且赋值
        action=getAreaFlagByXY(x,y);

//        if (isKeyboardArea(y)) {
//
//        } else if (isForgetPasswordArea(x, y)) {
//
//        }

        if (action == ACTION_KEYBOARD) {
            int index=getIndexByXY(x,y);
            keyboards[index].setPressed(true);
            keyboardIndex[0]=index;
            invalidate();
        }
    }

    /**
     * 抬起动作
     */
    private void onUpEvent() {
        float x=touchData[4];
        float y=touchData[5];
        Log.i("up x y","===x:"+x+"  y"+y);
        //判断键盘区域
        if (isKeyboardArea(y)&&action==ACTION_KEYBOARD) {
            int index=getIndexByXY(x,y);
            //记录抬起下标值
            keyboardIndex[2]=index;
            //按下下标跟抬起下标不相等，置缺省
            if (keyboardIndex[0] != keyboardIndex[2]) {
                keyboardIndex[0] = defaultIndex;

            } else {
                //判断是空白还有删除
                if (index == 9 || index == 11) {
                    if (index == 11) {
                        //如果是删除就删除
                        deletePassword();
                    }//过滤掉是9 没有东西的情况
                } else {
                    //如果不是删除就是增加，以下为增加逻辑
                    if (password.length() < passwordCount) {
                        addPassword(keyboards[index].getDrawText());
                    }

                }
                //设置Key对象为 抬起状态，刷新UI的时候用到
                keyboards[index].setPressed(false);
                //刷新
                invalidate();
            }

        }
        //校验 点击忘记密码区域
        if (isForgetPasswordArea(x, y) && action == ACTION_FORGET_PASSWORD) {
            if (mListener != null) {
                mListener.onForgetPasswordClick();
            }
        }
        //置为缺省值
        action=ACTION_EMPTY_AREA;
    }

    //移动
    private void onMoveEvent() {
        float x=touchData[2];
        float y=touchData[3];
        if (action == ACTION_KEYBOARD) {
           KeyboardBean bean= keyboards[keyboardIndex[0]];
            if (!bean.getRect().contains((int) x, (int) y)) {
                keyboards[keyboardIndex[0]].setPressed(false);
                action=ACTION_EMPTY_AREA;
                invalidate();
            }
        }
    }

主要解决问题：抬起和按下的区域不是有效区域，比如 在键盘1按下，在键盘数字4抬起，那么这个触碰事件是无效的。移动过程中移出有效区域，比如按下是键盘数字1 移动到2了 那么此时，1的背景应该不是点击时候的背景，而是默认背景。在抬起动作相应点击事件。
就先写到这里吧。给同学们一个思路，遇到问题可以尝试着换种解决方式，我可以 放心大胆的讲：效率上，这种方式完爆 10几个控件去组合。虽然现在手机好看不出来。。。。。。