Android   发布时间:2022-04-28  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Android 自定义输入支付密码的软键盘实例代码大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

Android 自定义输入支付密码的软键盘

               有项目需求需要做一个密码锁功能,还有自己的软键盘,类似与支付宝那种,这里是整理的资料,大家可以看下,如有错误,欢迎留言指正

需求:要实现类似支付宝的输入支付密码的功能效果图如下:

Android 自定义输入支付密码的软键盘实例代码


键盘效果

使用 android.inputmethodservice.KeyboardView 这个类自定义键盘

键盘的实现

1. 自定义输入数字的软键盘 passwordKeyboardView 类,继承自 android.inputmethodservice.KeyboardView

/**
 * 输入数字密码的键盘布局控件。
 */
public class passwordKeyboardView extends KeyboardView implements
    android.inputmethodservice.KeyboardView.onKeyboardActionListener {

  // 用于区分左下角空白的按键
  private static final int KEYCODE_EMPTY = -10;

  privatE int   m@R_801_9421@eBACkgroundColor;
  private Rect   m@R_801_9421@eDrawRect;
  private Drawable m@R_801_9421@eDrawable;

  private IOnKeyboardListener mOnKeyboardListener;

  public passwordKeyboardView(Context context,AttributeSet attrs) {
    super(context,attrs);
    init(context,attrs,0);
  }

  public passwordKeyboardView(Context context,AttributeSet attrs,int defStyleAttr) {
    super(context,defStyleAttr);
    init(context,defStyleAttr);
  }

  private void init(Context context,int defStyleAttr) {
    TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.passwordKeyboardView,defStyleAttr,0);
    m@R_801_9421@eDrawable = a.getDrawable(
        R.styleable.passwordKeyboardView_pkv@R_801_9421@eDrawablE);
    m@R_801_9421@eBACkgroundColor = a.getColor(
        R.styleable.passwordKeyboardView_pkv@R_801_9421@eBACkgroundColor,Color.TRANSPARENT);
    a.recycle();

    // 设置软键盘按键的布局
    Keyboard keyboard = new Keyboard(context,R.xml.keyboard_number_password);
    setKeyboard(keyboard);

    setEnabled(true);
    setPreviewEnabled(false);
    setOnKeyboardActionListener(this);
  }

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

    // 遍历所有的按键
    List<Keyboard.Key> keys = getKeyboard().getKeys();
    for (Keyboard.Key key : keys) {
      // 如果是左下角空白的按键,重画按键的背景
      if (key.codes[0] == KEYCODE_EMPTY) {
        drawKeyBACkground(key,canvas,m@R_801_9421@eBACkgroundColor);
      }
      // 如果是右下角的删除按键,重画背景,并且绘制删除的图标
      else if (key.codes[0] == Keyboard.KEYCODE_Delete) {
        drawKeyBACkground(key,m@R_801_9421@eBACkgroundColor);
        draw@R_801_9421@eButton(key,canvas);
      }
    }
  }

  // 绘制按键的背景
  private void drawKeyBACkground(Keyboard.Key key,Canvas canvas,int color) {
    ColorDrawable drawable = new ColorDrawable(color);
    drawable.setBounds(key.x,key.y,key.x + key.width,key.y + key.height);
    drawable.draw(canvas);
  }

  // 绘制删除按键
  private void draw@R_801_9421@eButton(Keyboard.Key key,Canvas canvas) {
    if (m@R_801_9421@eDrawable == null)
      return;

    // 计算删除图标绘制的坐标
    if (m@R_801_9421@eDrawRect == null || m@R_801_9421@eDrawRect.isEmpty()) {
      int intrinsicWidth = m@R_801_9421@eDrawable.geTintrinsicWidth();
      int intrinsicHeight = m@R_801_9421@eDrawable.geTintrinsicHeight();
      int drawWidth = intrinsicWidth;
      int drawHeight = intrinsicHeight;

      // 限制图标的大小,防止图标超出按键
      if (drawWidth > key.width) {
        drawWidth = key.width;
        drawHeight = drawWidth * intrinsicHeight / intrinsicWidth;
      }
      if (drawHeight > key.height) {
        drawHeight = key.height;
        drawWidth = drawHeight * intrinsicWidth / intrinsicHeight;
      }

      // 获取删除图标绘制的坐标
      int left = key.x + (key.width - drawWidth) / 2;
      int top = key.y + (key.height - drawHeight) / 2;
      m@R_801_9421@eDrawRect = new Rect(left,top,left + drawWidth,top + drawHeight);
    }

    // 绘制删除的图标
    if (m@R_801_9421@eDrawRect != null && !m@R_801_9421@eDrawRect.isEmpty()) {
      m@R_801_9421@eDrawable.setBounds(m@R_801_9421@eDrawRect.left,m@R_801_9421@eDrawRect.top,m@R_801_9421@eDrawRect.right,m@R_801_9421@eDrawRect.bottom);
      m@R_801_9421@eDrawable.draw(canvas);
    }
  }

  @Override
  public void onKey(int pri@R_874_11035@Code,int[] keyCodes) {
    // 处理按键的点击事件
    // 点击删除按键
    if (pri@R_874_11035@Code == Keyboard.KEYCODE_Delete) { 
      if (mOnKeyboardListener != null) {
        mOnKeyboardlistener.on@R_801_9421@eKeyEvent();
      }
    }
    // 点击了非左下角按键的其他按键
    else if (pri@R_874_11035@Code != KEYCODE_EMPTY) {
      if (mOnKeyboardListener != null) {
        mOnKeyboardlistener.onInsertKeyEvent(
            Character.toString((char) pri@R_874_11035@CodE));
      }
    }
  }

  @Override
  public void onPress(int pri@R_874_11035@CodE) {

  }

  @Override
  public void onRelease(int pri@R_874_11035@CodE) {

  }

  @Override
  public void ontext(CharSequence text) {

  }

  @Override
  public void swipeLeft() {

  }

  @Override
  public void swipeRight() {

  }

  @Override
  public void swipeDown() {

  }

  @Override
  public void swipeUp() {

  }

  /**
   * 设置键盘的监听事件。
   *
   * @param listener
   *     监听事件
   */
  public void setIOnKeyboardListener(IOnKeyboardListener listener) {
    this.mOnKeyboardListener = listener;
  }

  public interface IOnKeyboardListener {

    void onInsertKeyEvent(String text);

    void on@R_801_9421@eKeyEvent();
  }
}

2. 自定义属性

values/attrs.xml

<declare-styleable name="passwordKeyboardView">
  <attr name="pkv@R_801_9421@eDrawable" format="reference"/>
  <attr name="pkv@R_801_9421@eBACkgroundColor" format="color|reference"/>
</declare-styleable>

3. 软键盘按键的布局文件 res/xml/keyboard_number_password

说明:

  1. android:keyWidth="33.33333%p":指定按键的宽度,保证键盘的每一列宽度一致
  2. android:keyHeight="8%p":设置键盘的高度
  3. android:horizontalGap="1dp":实现键盘每一列之间的分割线
  4. android:verticalGap="1dp":实现键盘每一行之间的分割线
  5. @H_874_60@
    <?xml version="1.0" encoding="utf-8"?>
    <Keyboard
      xmlns:android="http://scheR_213_11845@as.android.com/apk/res/android"
      android:keyWidth="33.33333%p"
      android:keyHeight="8%p"
      android:horizontalGap="1dp"
      android:verticalGap="1dp">
      <Row>
        <Key
          android:codes="49"
          android:keyLabel="1"/>
        <Key
          android:codes="50"
          android:keyLabel="2"/>
        <Key
          android:codes="51"
          android:keyLabel="3"/>
      </Row>
    
      <Row>
        <Key
          android:codes="52"
          android:keyLabel="4"/>
        <Key
          android:codes="53"
          android:keyLabel="5"/>
        <Key
          android:codes="54"
          android:keyLabel="6"/>
      </Row>
    
      <Row>
        <Key
          android:codes="55"
          android:keyLabel="7"/>
        <Key
          android:codes="56"
          android:keyLabel="8"/>
        <Key
          android:codes="57"
          android:keyLabel="9"/>
      </Row>
    
      <Row>
        <Key
          android:codes="-10"
          android:keyLabel=""/>
        <Key
          android:codes="48"
          android:keyLabel="0"/>
        <Key
          android:codes="-5"
          android:keyIcon="@mipmap/keyboard_BACkspace"/>
      </Row>
    </Keyboard>
    
    

    3. 在布局中引用软键盘控件:

    <[包名].passwordKeyboardView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:BACkground="#b0b0b0"
      android:focusable="true"
      android:focusableInTouchMode="true"
      android:keyBACkground="#ffffff"
      android:keyTextColor="#000000"
      android:shadowColor="#00000000"
      android:shadowRadius="0"
      app:pkv@R_801_9421@eBACkgroundColor="#d2d2d2"
      app:pkv@R_801_9421@eDrawable="@drawable/keyboard_BACkspace" />
    

    随机数字键盘的实现

    目前能想到的有两种实现方式:

    1. 在 onDraw 方法里重新绘制键盘上的文字,覆盖掉原来的键盘,这种实现方式相对比较麻烦。
    2. 调用 KeyboardView.setKeyboard() 方法重新设置键盘,实现的代码如下:

    // 0-9 的数字
    private final List<Character> keyCodes = Arrays.asList(
        '0','1','2','3','4','5','6','7','8','9');
    
    /**
     * 随机打乱数字键盘显示的数字顺序。
     */
    public void shuffleKeyboard() {
      Keyboard keyboard = getKeyboard();
      if (keyboard != null && keyboard.getKeys() != null
          && keyboard.getKeys().size() > 0) {
        // 随机排序数字
        Collections.shuffle(keyCodes);
    
        // 遍历所有的按键
        List<Keyboard.Key> keys = getKeyboard().getKeys();
        int index = 0;
        for (Keyboard.Key key : keys) {
          // 如果按键是数字
          if (key.codes[0] != KEYCODE_EMPTY
              && key.codes[0] != Keyboard.KEYCODE_Delete) {
            char code = keyCodes.get(index++);
            key.codes[0] = code;
            key.label = Character.toString(codE);
          }
        }
        // 更新键盘
        setKeyboard(keyboard);
      }
    }
    
    

    调用 shuffleKeyboard 即可生成随机键盘

    最终实现的效果如下:

    Android 自定义输入支付密码的软键盘实例代码


    随机键盘

    踩坑

    1. 点击按键的放大镜效果提示

    键盘认点击按键时会显示放大镜效果提示,如果不需要可以使用 setPreviewEnabled(false) 设置不显示提示
    可以在布局中使用 android:keyPreviewLayout 指定提示文字的布局。

    2. 按键文字不清晰

    键盘按键认带有阴影效果,会导致文字不清楚,可以使用下面方式去掉阴影:

    <[包名].passwordKeyboardView
      android:shadowColor="@color/transparent"
      android:shadowRadius="0"
      ...
      />
    
    

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

    大佬总结

    以上是大佬教程为你收集整理的Android 自定义输入支付密码的软键盘实例代码全部内容,希望文章能够帮你解决Android 自定义输入支付密码的软键盘实例代码所遇到的程序开发问题。

    如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:软键盘