首页 > 系统 > Android > 正文

Android的支付密码输入框实现浅析

2019-12-12 05:15:30
字体:
来源:转载
供稿:网友

先看一下效果图

实现思路:

变成点的控件不是TextViewEditText而是Imageview。首先写一个RelativeLayout里边包含6个ImageView和一个EditText(EditText要覆盖ImageView)将EditText的背景设置成透明。

<?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="wrap_content"> <LinearLayout  android:layout_width="match_parent"  android:layout_height="50dp"  android:orientation="horizontal"  android:background="@android:color/white">  <ImageView   android:id="@+id/item_password_iv1"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/>  <ImageView   android:id="@+id/item_password_iv2"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/>  <ImageView   android:id="@+id/item_password_iv3"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/>  <ImageView   android:id="@+id/item_password_iv4"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/>  <ImageView   android:id="@+id/item_password_iv5"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/>  <ImageView   android:id="@+id/item_password_iv6"   android:layout_width="0dp"   android:layout_height="match_parent"   android:layout_weight="1"   android:src="@mipmap/nopassword"/> </LinearLayout> <EditText  android:id="@+id/item_edittext"  android:layout_width="match_parent"  android:layout_height="50dp"  android:background="@android:color/transparent"/></RelativeLayout>

自定义一个控件ItemPasswordLayout,用来给布局做一些处理,重点是将EditText的光标去掉,并监听输入文字的事件在文字变化后将文字放在一个StringBuffer中,并将edittext设置为"";再监听按下键盘删除键的事件,当按下删除键后会将StringBuffer中删除相应位置的字符。

/** * 密码输入框的控件布局 * Created by Went_Gone on 2016/9/14. */public class ItemPasswordLayout extends RelativeLayout{ private EditText editText; private ImageView[] imageViews;//使用一个数组存储密码框 private StringBuffer stringBuffer = new StringBuffer();//存储密码字符 private int count = 6; private String strPassword;//密码字符串 public ItemPasswordLayout(Context context) {  this(context,null); } public ItemPasswordLayout(Context context, AttributeSet attrs) {  this(context, attrs,0); } public ItemPasswordLayout(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  imageViews = new ImageView[6];  View view = View.inflate(context, R.layout.item_password,this);  editText = (EditText) findViewById(R.id.item_edittext);  imageViews[0] = (ImageView) findViewById(R.id.item_password_iv1);  imageViews[1] = (ImageView) findViewById(R.id.item_password_iv2);  imageViews[2] = (ImageView) findViewById(R.id.item_password_iv3);  imageViews[3] = (ImageView) findViewById(R.id.item_password_iv4);  imageViews[4] = (ImageView) findViewById(R.id.item_password_iv5);  imageViews[5] = (ImageView) findViewById(R.id.item_password_iv6);  editText.setCursorVisible(false);//将光标隐藏  setListener(); } private void setListener() {  editText.addTextChangedListener(new TextWatcher() {   @Override   public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {   }   @Override   public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {   }   @Override   public void afterTextChanged(Editable editable) {    //重点 如果字符不为""时才进行操作    if (!editable.toString().equals("")) {     if (stringBuffer.length()>5){      //当密码长度大于5位时edittext置空      editText.setText("");      return;     }else {      //将文字添加到StringBuffer中      stringBuffer.append(editable);      editText.setText("");//添加后将EditText置空 造成没有文字输入的错局      Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);      count = stringBuffer.length();//记录stringbuffer的长度      strPassword = stringBuffer.toString();      if (stringBuffer.length()==6){       //文字长度位6 则调用完成输入的监听       if (inputCompleteListener!=null){        inputCompleteListener.inputComplete();       }      }     }     for (int i =0;i<stringBuffer.length();i++){      imageViews[i].setImageResource(R.mipmap.ispassword);     }    }   }  });  editText.setOnKeyListener(new OnKeyListener() {   @Override   public boolean onKey(View v, int keyCode, KeyEvent event) {    if (keyCode == KeyEvent.KEYCODE_DEL      && event.getAction() == KeyEvent.ACTION_DOWN) {//     Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);     if (onKeyDelete()) return true;     return true;    }    return false;   }  }); } public boolean onKeyDelete() {  if (count==0){   count = 6;   return true;  }  if (stringBuffer.length()>0){   //删除相应位置的字符   stringBuffer.delete((count-1),count);   count--;   Log.e("TAG", "afterTextChanged: stringBuffer is "+stringBuffer);   strPassword = stringBuffer.toString();   imageViews[stringBuffer.length()].setImageResource(R.mipmap.nopassword);  }  return false; } @Override public boolean onKeyDown(int keyCode, KeyEvent event) {  return super.onKeyDown(keyCode, event); } private InputCompleteListener inputCompleteListener; public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {  this.inputCompleteListener = inputCompleteListener; } public interface InputCompleteListener{  void inputComplete(); } public EditText getEditText() {  return editText; } /**  * 获取密码  * @return  */ public String getStrPassword() {  return strPassword; } public void setContent(String content){  editText.setText(content); }}

接下来只需要在Activity调用就可以了。

在xml中声明

 <com.example.went_gone.demo.view.ItemPasswordLayout  android:id="@+id/act_zhifubao_IPLayout"  android:layout_width="match_parent"  android:layout_height="wrap_content"> </com.example.went_gone.demo.view.ItemPasswordLayout>

在Activity中调用

 itemPasswordLayout = (ItemPasswordLayout) findViewById(R.id.act_zhifubao_IPLayout);  itemPasswordLayout.setInputCompleteListener(new ItemPasswordLayout.InputCompleteListener() {   @Override   public void inputComplete() {    Toast.makeText(ZhifubaoActivity.this, "密码是:"+itemPasswordLayout.getStrPassword(), Toast.LENGTH_SHORT).show();   }  });

总结

好了,本文的内容到这就结束了,如此就可以了,是不是很简单。希望这篇文章能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表