轻松实现支付界面密码框控件

在应用中，涉及到支付界面一般都会采用自定义的控件，采用点号占位符来代替输入的密码，保护用户的隐私。很显然，这是一种输入框。针对这种场景，最直接的实现是采用多个输入框来实现的，这可能是最丑陋的实现了。笔者在这里介绍一种通过自定义控件的方式来实现。

继承原生的输入框

实现自定义控件的方式大致有继承和组合两种方式。此处，场景单一，需求简单，如果利用组合来实现，势必要引入ViewGroup，增加控件的层级，因此，这里我们选择继承系统原生的EditText来实现，通过一个控件来解决问题。安卓原生的输入框控件EditText其实是一款很强大的控件，我们可以对之进行简单的改造，就可实现上文所说的密码框输入功能。

需要解决的问题

在使用系统原生的EditText的时，我们需要解决几个问题：

1. 隐藏系统控件的光标
2. 隐藏系统控件的下划线
3. 隐藏系统的文本输入内容
4. 控制输入的最大长度
5. 点号占位符和方块的绘制

这些问题，有些是由于系统EditText的特性引入的，有些是控件的需求，解决好这些问题，控件的实现就变得很简单。

具体实现

首先，我们看下如何解决以上提出的5个问题。

隐藏系统控件的光标

通过EditText的方法来控制

// 隐藏光标
setCursorVisible(false);

隐藏系统控件的下划线

通过设置EditText的背景为空来实现

//设置背景为null，去掉下划线
setBackground(null);

隐藏系统的文本输入内容

这里需要去取下巧，通过设置文本大小为0来实现

// 设置文字带大小为0
setTextSize(0);
    

控制输入的最大长度

这里需要通过监听文本框的内容长度，来及时更新输入框的文本内容，确保文本内容不超过密码的长度，这里，我们通过重写onTextChanged方法来实现的，主要是监听当前文本长度，对之进行实时修改。

@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
  Editable editable = getText();
  // mTextLength是当前的密码最大长度，默认为6
  if (editable != null && editable.length() > mTextLength) {
    editable.delete(mTextLength, editable.length());
  }
}

在这里，我们通过getText方法获取到当前的文本相关的接口对象Editable，通过判定其文本的长度，来对它超过长度的文本进行删除，从而达到控制文本输入最大长度的目的。

点号占位符和方块的绘制

点号占位符和方块是需要控件来绘制的，这里就需要重写onDraw方法，这里，我们需要几个参数，一个是密码的最大长度mTextLength，一个控件的宽和高。有了这些，我们就可以计算每个格子的宽度，从而进行边框，方块格子，点号占位符的绘制，大致逻辑可参考下面代码：

  @Override protected void onDraw(Canvas canvas) {
    int height = getMeasuredHeight();
    int width = getMeasuredWidth();
    // 每个格子的宽度
    mElementW = width / mTextLength;
    // 每个点号占位符的半径，DEFAULT_RADIUS_SCALE默认值为6
    mDotRadius = mElementW / DEFAULT_RADIUS_SCALE;
    // 绘制外边框
    canvas.drawLine(1, 1, width, 1, mPaint);
    canvas.drawLine(1, 1, 1, height - 1, mPaint);
    canvas.drawLine(width - 1, 1, width - 1, height - 1, mPaint);
    canvas.drawLine(1, height - 1, width, height - 1, mPaint);
    // 绘制格子的隔离线
    for (int i = 1; i < mTextLength; i++) {
      canvas.drawLine(mElementW * i, 1, mElementW * i, height - 1, mPaint);
    }
    Editable editable = getText();
    if (editable != null) {
      String content = editable.toString();
      int length = content.length();
      // 根绝当前文本长度，绘制圆点占位符
      for (int i = 0; i < length; i++) {
        canvas.drawCircle(mElementW * i + mElementW / 2F, height / 2F, mDotRadius, mPaint);
      }
    }
  }
  

到这里，其实最主要的工作都已经结束了。接下来，是对控件的补充。

重写设置文本属性的方法，确保文本大小为0

  @Override public void setTextSize(float size) {
    mPaint.setTextSize(0);
  }

  @Override public void setTextSize(int unit, float size) {
    mPaint.setTextSize(0);
  }

  @Override public void setTextColor(int color) {
    mPaint.setColor(color);
  }

添加设置密码长度的方法

这需要注意一下，当当前密码框已经有填充内容时，如果减少格子的数量，需要对当前的文本进行适当的修改。

 public void setLength(int len) {
    mTextLength = len;
    Editable editable = getText();
    if (editable != null && editable.length() > mTextLength) {
      editable.delete(mTextLength, editable.length());
    }
    postInvalidate();
  }

到此，整个控件才能说设计完毕了。我们来看下效果。

可以看到，跟我们平常看到的密码框控件基本是一致的。

写在最后

自定义控件是一件很有意思的事情，通过自定义控件，你可以发现系统控件很多精妙的内容，那些看起来很简单的控件，其实包罗了很多精湛的编码技巧。通过自定义控件，可以让安卓开发人员对源码中View的特性有更深的理解。让开发人员的思维更加严谨。