欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

Android仿支付宝、京东的密码键盘和输入框

时间:2021-04-09 09:01:09|栏目:Android代码|点击:

首先看下效果图

一:布局代码

键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方法来定义。点击键的时候背景有变色的效果。

密码输入框由六个EditText组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听。

二:键盘

键盘中的主要逻辑处理,键盘样式,item的点击事件

@Override
public int getViewTypeCount() {
  return 2;
}

@Override
public int getItemViewType(int position) {
  return (getItemId(position) == KEY_NINE) ? 2 : 1;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder viewHolder = null;
  if (convertView == null) {
    if (getItemViewType(position) == 1) {
      //数字键
      convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard, parent, false);
      viewHolder = new ViewHolder(convertView);
    } else {
      //删除键
      convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard_delete, parent, false);
    }
  }

  if (getItemViewType(position) == 1) {
    viewHolder = (ViewHolder) convertView.getTag();
    viewHolder.tvKey.setText(key[position]);
  }

  return convertView;
}

三:密码输入框

密码输入框要处理的逻辑有删除、输入、输入完成回调等

/**
 * 输入密码,根据StringBuilder中数据的多少进行逻辑判断
 * @param value
 */
public void add(String value) {
  if (mPassword != null && mPassword.length() < 6) {
    mPassword.append(value);//此处先添加到StringBuilder中,再在输入框中显示
    if (mPassword.length() == 1) {
      tvFirst.setText(value);
    } else if (mPassword.length() == 2) {
      tvSecond.setText(value);
    }else if (mPassword.length() == 3) {
      tvThird.setText(value);
    }else if (mPassword.length() == 4) {
      tvForth.setText(value);
    }else if (mPassword.length() == 5) {
      tvFifth.setText(value);
    }else if (mPassword.length() == 6) {
      tvSixth.setText(value);
    }
  }
}

/**
 * 删除密码,根据StringBuilder中数据的多少进行逻辑判断
 */
public void remove() {
  if (mPassword != null && mPassword.length() > 0) {
    if (mPassword.length() == 1) {
      tvFirst.setText("");
    } else if (mPassword.length() == 2) {
      tvSecond.setText("");
    }else if (mPassword.length() == 3) {
      tvThird.setText("");
    }else if (mPassword.length() == 4) {
      tvForth.setText("");
    }else if (mPassword.length() == 5) {
      tvFifth.setText("");
    }else if (mPassword.length() == 6) {
      tvSixth.setText("");
    }
    mPassword.deleteCharAt(mPassword.length() - 1);
  }
}

获取完整密码

/**
 * 返回完整密码
 * @return 
 */
public String getText() {
  return (mPassword == null) ? null : mPassword.toString();
}

四:实际应用

布局,也可以把键盘拆分开来,当输入的时候从窗口下方滑入

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <com.github.phoenix.widget.PayEditText
    android:id="@+id/PayEditText_pay"
    android:layout_width="match_parent"
    android:layout_marginTop="20dp"
    android:paddingLeft="12dp"
    android:layout_alignParentTop="true"
    android:paddingRight="12dp"
    android:layout_height="48dp"/>

  <com.github.phoenix.widget.Keyboard
    android:id="@+id/KeyboardView_pay"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="300dp"/>

</RelativeLayout>

代码中

//键
private static final String[] KEY = new String[] {
      "1", "2", "3",
      "4", "5", "6",
      "7", "8", "9",
      "<<", "0", "完成"
  };
//设置键盘
keyboard.setKeyboardKeys(KEY);
//键盘键的点击事件
keyboard.setOnClickKeyboardListener(new Keyboard.OnClickKeyboardListener() {
  @Override
  public void onKeyClick(int position, String value) {
    if (position < 11 && position != 9) {
      payEditText.add(value);
    } else if (position == 9) {
      payEditText.remove();
    }else if (position == 11) {
      //当点击键盘上的完成按钮时,也可以通过payEditText.getText()获取密码,此时不应该注册OnInputFinishedListener接口
      Toast.makeText(getApplication(), "您的密码是:" + payEditText.getText(), Toast.LENGTH_SHORT).show();
      finish();
    }
  }
});

//当密码输入完成时的回调
payEditText.setOnInputFinishedListener(new PayEditText.OnInputFinishedListener() {
  @Override
  public void onInputFinished(String password) {
    Toast.makeText(getApplication(), "您的密码是:" + password, Toast.LENGTH_SHORT).show();
 }
});

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。

上一篇:Android新闻广告条滚动效果

栏    目:Android代码

下一篇:Flutter使用JsBridge方式处理Webview与H5通信的方法

本文标题:Android仿支付宝、京东的密码键盘和输入框

本文地址:http://www.codeinn.net/misctech/97735.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有