天天看點

自定義密碼框 讓你實作一格一格輸密碼

1.功能介紹及效果圖

做密碼框的時候考慮了兩個方案,一個方案是用6個EditText,另一個方案則是在EditText上畫5條線。因為我基本沒接觸過draw部分的代碼,對文法都不了解,是以果斷選擇了第一種。接下來考慮密碼框需要實作的功能和使用者體驗的問題。

自定義密碼框 讓你實作一格一格輸密碼

功能1:輸入密碼删除密碼流暢

功能2:使用者點選任意密碼框焦點在正确的位置

功能3:輸入的密碼直接顯示為圓點

2.源碼

[java]  view plain  copy

  1. package com.example.passwordview;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.os.Bundle;  
  7. import android.os.Handler;  
  8. import android.text.Editable;  
  9. import android.text.TextUtils;  
  10. import android.text.TextWatcher;  
  11. import android.util.Log;  
  12. import android.view.KeyEvent;  
  13. import android.view.View;  
  14. import android.view.View.OnClickListener;  
  15. import android.view.View.OnKeyListener;  
  16. import android.view.inputmethod.InputMethodManager;  
  17. import android.widget.Button;  
  18. import android.widget.EditText;  
  19. import android.widget.LinearLayout;  
  20. import android.widget.Toast;  
  21. public class MainActivity extends Activity implements TextWatcher{  
  22.     private EditText et_pwd1;  
  23.     private EditText et_pwd2;  
  24.     private EditText et_pwd3;  
  25.     private EditText et_pwd4;  
  26.     private EditText et_pwd5;  
  27.     private EditText et_pwd6;  
  28.     private List<EditText> et_group;  
  29.     private OnKeyListener onKeyListener;  
  30.     public int cursorPosition=0;  
  31.     private InputMethodManager imm;  
  32.     public Context context;  
  33.     private String[] password=new String[6];  
  34.     @Override  
  35.     protected void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         setContentView(R.layout.httfund_enter_password);  
  38.         intiView();  
  39.         setListener();  
  40.         testcursorPosition();  
  41.     }  
  42.     public void intiView(){  
  43.         et_pwd1=(EditText)findViewById(R.id.et_pwd1);  
  44.         et_pwd2=(EditText)findViewById(R.id.et_pwd2);  
  45.         et_pwd3=(EditText)findViewById(R.id.et_pwd3);  
  46.         et_pwd4=(EditText)findViewById(R.id.et_pwd4);  
  47.         et_pwd5=(EditText)findViewById(R.id.et_pwd5);  
  48.         et_pwd6=(EditText)findViewById(R.id.et_pwd6);  
  49.         et_group=new ArrayList<EditText>();  
  50.         et_group.add(et_pwd1);  
  51.         et_group.add(et_pwd2);  
  52.         et_group.add(et_pwd3);  
  53.         et_group.add(et_pwd4);  
  54.         et_group.add(et_pwd5);  
  55.         et_group.add(et_pwd6);  
  56.     }  
  57.     public void testcursorPosition(){  
  58.         cursorPosition=0;  
  59.         for(EditText editView : et_group){  
  60.             editView.setFocusableInTouchMode(true);  
  61.         }  
  62.         for(EditText et : et_group){  
  63.             if(!TextUtils.isEmpty(et.getText().toString())){  
  64.                 ++cursorPosition;  
  65.             }else{  
  66.                 break;  
  67.             }  
  68.         }  
  69.             if(cursorPosition==6){  
  70.                 cursorPosition=5;  
  71.             }  
  72.             EditText et=et_group.get(cursorPosition);  
  73.             et.requestFocus();  
  74.             et.setSelection(et.getText().toString().length());  
  75.             imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);  
  76.             if(imm.isActive()){  
  77.                 imm.toggleSoftInput(0, InputMethodManager.HIDE_IMPLICIT_ONLY);  
  78.         }  
  79.         setEditViewEnable();  
  80.     }  
  81.     public void setEditViewEnable(){  
  82.         int i=0;  
  83.         for(EditText et : et_group){  
  84.             if(i++!=cursorPosition){  
  85.                 et.setFocusableInTouchMode(false);  
  86.             }  
  87.         }  
  88.     }  
  89.     public void setListener(){  
  90.         onKeyListener=new OnKeyListener() {  
  91.             @Override  
  92.             public boolean onKey(View v, int keyCode, KeyEvent event) {  
  93.                 // TODO Auto-generated method stub  
  94.                 if(keyCode==KeyEvent.KEYCODE_DEL&&event.getAction()==KeyEvent.ACTION_DOWN){  
  95.                     testcursorPosition();  
  96.                     Log.d("pwd", "删除密碼"+Integer.toString(cursorPosition));  
  97.                     if(cursorPosition!=6&&cursorPosition!=0){  
  98.                         EditText et=et_group.get(cursorPosition);  
  99.                         if(TextUtils.isEmpty(et.getText().toString())){  
  100.                             et_group.get(cursorPosition-1).setText("");  
  101.                         }  
  102.                     }  
  103.                 }  
  104.                     return false;  
  105.             }  
  106.         };  
  107.         OnClickListener clickListener=new OnClickListener() {  
  108.             @Override  
  109.             public void onClick(View v) {  
  110.                 // TODO Auto-generated method stub  
  111.                 testcursorPosition();  
  112.             }  
  113.         };  
  114.         for(EditText et : et_group){  
  115.             et.addTextChangedListener(this);  
  116.             et.setOnKeyListener(onKeyListener);  
  117.             et.setOnClickListener(clickListener);  
  118.         }  
  119.     }  
  120.     @Override  
  121.     public void beforeTextChanged(CharSequence s, int start, int count,  
  122.             int after) {  
  123.         // TODO Auto-generated method stub  
  124.     }  
  125.     @Override  
  126.     public void onTextChanged(CharSequence s, int start, int before, int count) {  
  127.         // TODO Auto-generated method stub  
  128.         EditText et = et_group.get(cursorPosition);  
  129.         if(s.length()>1){  
  130.             s=s.toString().subSequence(0, 1);  
  131.             et.setText(s);  
  132.             et.setSelection(s.length());  
  133.         }  
  134.         if(!TextUtils.isEmpty(et.getText().toString())&&  
  135.                 !et.getText().toString().equals("*")){  
  136.             password[cursorPosition]=et.getText().toString();  
  137.             et.setText("*");  
  138.         }else if(!et.getText().toString().equals("*")){  
  139.             password[cursorPosition]=et.getText().toString();  
  140.         }  
  141.         testcursorPosition();  
  142.     }  
  143.     @Override  
  144.     public void afterTextChanged(Editable s) {  
  145.         // TODO Auto-generated method stub  
  146.     }  
  147. }  

代碼并不難,testcursorPosition用來檢測光标應該在的正确位置。InputMethodManager用于顯示軟鍵盤,設定成HIDE_IMPLICIT_ONLY唯一的一個問題就是可能彈出密碼框的時候會自動彈出軟鍵盤,這個軟鍵盤在彈出後會彈回,但是解決了在輸入密碼的時候軟鍵盤彈出彈回影響使用者體驗的問題。在onTextChanged對EditText的長度進行了限制。把數字顯示成“*”

整個邏輯跑通之後最大的問題就是輸入密碼變圓點,如果不直接設定成*号,密碼框變成圓點的過程會很長,而且時間不定,體驗非常差。

3.源碼下載下傳

源碼下載下傳

1.功能介紹及效果圖

做密碼框的時候考慮了兩個方案,一個方案是用6個EditText,另一個方案則是在EditText上畫5條線。因為我基本沒接觸過draw部分的代碼,對文法都不了解,是以果斷選擇了第一種。接下來考慮密碼框需要實作的功能和使用者體驗的問題。

自定義密碼框 讓你實作一格一格輸密碼

功能1:輸入密碼删除密碼流暢

功能2:使用者點選任意密碼框焦點在正确的位置

功能3:輸入的密碼直接顯示為圓點

2.源碼

[java]  view plain  copy

  1. package com.example.passwordview;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4. import android.app.Activity;  
  5. import android.content.Context;  
  6. import android.os.Bundle;  
  7. import android.os.Handler;  
  8. import android.text.Editable;  
  9. import android.text.TextUtils;  
  10. import android.text.TextWatcher;  
  11. import android.util.Log;  
  12. import android.view.KeyEvent;  
  13. import android.view.View;  
  14. import android.view.View.OnClickListener;  
  15. import android.view.View.OnKeyListener;  
  16. import android.view.inputmethod.InputMethodManager;  
  17. import android.widget.Button;  
  18. import android.widget.EditText;  
  19. import android.widget.LinearLayout;  
  20. import android.widget.Toast;  
  21. public class MainActivity extends Activity implements TextWatcher{  
  22.     private EditText et_pwd1;  
  23.     private EditText et_pwd2;  
  24.     private EditText et_pwd3;  
  25.     private EditText et_pwd4;  
  26.     private EditText et_pwd5;  
  27.     private EditText et_pwd6;  
  28.     private List<EditText> et_group;  
  29.     private OnKeyListener onKeyListener;  
  30.     public int cursorPosition=0;  
  31.     private InputMethodManager imm;  
  32.     public Context context;  
  33.     private String[] password=new String[6];  
  34.     @Override  
  35.     protected void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         setContentView(R.layout.httfund_enter_password);  
  38.         intiView();  
  39.         setListener();  
  40.         testcursorPosition();  
  41.     }  
  42.     public void intiView(){  
  43.         et_pwd1=(EditText)findViewById(R.id.et_pwd1);  
  44.         et_pwd2=(EditText)findViewById(R.id.et_pwd2);  
  45.         et_pwd3=(EditText)findViewById(R.id.et_pwd3);  
  46.         et_pwd4=(EditText)findViewById(R.id.et_pwd4);  
  47.         et_pwd5=(EditText)findViewById(R.id.et_pwd5);  
  48.         et_pwd6=(EditText)findViewById(R.id.et_pwd6);  
  49.         et_group=new ArrayList<EditText>();  
  50.         et_group.add(et_pwd1);  
  51.         et_group.add(et_pwd2);  
  52.         et_group.add(et_pwd3);  
  53.         et_group.add(et_pwd4);  
  54.         et_group.add(et_pwd5);  
  55.         et_group.add(et_pwd6);  
  56.     }  
  57.     public void testcursorPosition(){  
  58.         cursorPosition=0;  
  59.         for(EditText editView : et_group){  
  60.             editView.setFocusableInTouchMode(true);  
  61.         }  
  62.         for(EditText et : et_group){  
  63.             if(!TextUtils.isEmpty(et.getText().toString())){  
  64.                 ++cursorPosition;  
  65.             }else{  
  66.                 break;  
  67.             }  
  68.         }  
  69.             if(cursorPosition==6){  
  70.                 cursorPosition=5;  
  71.             }  
  72.             EditText et=et_group.get(cursorPosition);  
  73.             et.requestFocus();  
  74.             et.setSelection(et.getText().toString().length());  
  75.             imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);  
  76.             if(imm.isActive()){  
  77.                 imm.toggleSoftInput(0, InputMethodManager.HIDE_IMPLICIT_ONLY);  
  78.         }  
  79.         setEditViewEnable();  
  80.     }  
  81.     public void setEditViewEnable(){  
  82.         int i=0;  
  83.         for(EditText et : et_group){  
  84.             if(i++!=cursorPosition){  
  85.                 et.setFocusableInTouchMode(false);  
  86.             }  
  87.         }  
  88.     }  
  89.     public void setListener(){  
  90.         onKeyListener=new OnKeyListener() {  
  91.             @Override  
  92.             public boolean onKey(View v, int keyCode, KeyEvent event) {  
  93.                 // TODO Auto-generated method stub  
  94.                 if(keyCode==KeyEvent.KEYCODE_DEL&&event.getAction()==KeyEvent.ACTION_DOWN){  
  95.                     testcursorPosition();  
  96.                     Log.d("pwd", "删除密碼"+Integer.toString(cursorPosition));  
  97.                     if(cursorPosition!=6&&cursorPosition!=0){  
  98.                         EditText et=et_group.get(cursorPosition);  
  99.                         if(TextUtils.isEmpty(et.getText().toString())){  
  100.                             et_group.get(cursorPosition-1).setText("");  
  101.                         }  
  102.                     }  
  103.                 }  
  104.                     return false;  
  105.             }  
  106.         };  
  107.         OnClickListener clickListener=new OnClickListener() {  
  108.             @Override  
  109.             public void onClick(View v) {  
  110.                 // TODO Auto-generated method stub  
  111.                 testcursorPosition();  
  112.             }  
  113.         };  
  114.         for(EditText et : et_group){  
  115.             et.addTextChangedListener(this);  
  116.             et.setOnKeyListener(onKeyListener);  
  117.             et.setOnClickListener(clickListener);  
  118.         }  
  119.     }  
  120.     @Override  
  121.     public void beforeTextChanged(CharSequence s, int start, int count,  
  122.             int after) {  
  123.         // TODO Auto-generated method stub  
  124.     }  
  125.     @Override  
  126.     public void onTextChanged(CharSequence s, int start, int before, int count) {  
  127.         // TODO Auto-generated method stub  
  128.         EditText et = et_group.get(cursorPosition);  
  129.         if(s.length()>1){  
  130.             s=s.toString().subSequence(0, 1);  
  131.             et.setText(s);  
  132.             et.setSelection(s.length());  
  133.         }  
  134.         if(!TextUtils.isEmpty(et.getText().toString())&&  
  135.                 !et.getText().toString().equals("*")){  
  136.             password[cursorPosition]=et.getText().toString();  
  137.             et.setText("*");  
  138.         }else if(!et.getText().toString().equals("*")){  
  139.             password[cursorPosition]=et.getText().toString();  
  140.         }  
  141.         testcursorPosition();  
  142.     }  
  143.     @Override  
  144.     public void afterTextChanged(Editable s) {  
  145.         // TODO Auto-generated method stub  
  146.     }  
  147. }  

代碼并不難,testcursorPosition用來檢測光标應該在的正确位置。InputMethodManager用于顯示軟鍵盤,設定成HIDE_IMPLICIT_ONLY唯一的一個問題就是可能彈出密碼框的時候會自動彈出軟鍵盤,這個軟鍵盤在彈出後會彈回,但是解決了在輸入密碼的時候軟鍵盤彈出彈回影響使用者體驗的問題。在onTextChanged對EditText的長度進行了限制。把數字顯示成“*”

整個邏輯跑通之後最大的問題就是輸入密碼變圓點,如果不直接設定成*号,密碼框變成圓點的過程會很長,而且時間不定,體驗非常差。

3.源碼下載下傳

源碼下載下傳