2. 程式人生 > >自定義密碼框 讓你實現一格一格輸密碼

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

阿新 • • 發佈：2019-01-24

我自己手頭一直用的IOS系統，寫這個密碼框的時候功能方面也參考了一個下蘋果的螢幕解鎖。這個密碼框也是修修改改兩三天才算完善，效果雖然實現了，但很多細節地方還是不太明白，還希望高人指點。

1.功能介紹及效果圖

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

功能1：輸入密碼刪除密碼流暢

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

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

2.原始碼

[java] view plain
copyprint?
  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.     /** 
  58.      * 輸入判斷，游標永遠在第一個空白格 
  59.      */  
  60.     public void testcursorPosition(){  
  61.         cursorPosition=0;  
  62.         for(EditText editView : et_group){  
  63.             editView.setFocusableInTouchMode(true);  
  64.         }  
  65.         for(EditText et : et_group){  
  66.             if(!TextUtils.isEmpty(et.getText().toString())){  
  67.                 ++cursorPosition;  
  68.             }else{  
  69.                 break;  
  70.             }  
  71.         }  
  72.             if(cursorPosition==6){  
  73.                 cursorPosition=5;  
  74.             }  
  75.             EditText et=et_group.get(cursorPosition);  
  76.             et.requestFocus();  
  77.             et.setSelection(et.getText().toString().length());  
  78.             imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);  
  79.             if(imm.isActive()){  
  80.                 imm.toggleSoftInput(0, InputMethodManager.HIDE_IMPLICIT_ONLY);  
  81.         }  
  82.         setEditViewEnable();  
  83.     }  
  84.     /** 
  85.      * 設定EditView的Enable屬性 
  86.      * 僅將包含游標的EditView設定為true 
  87.      */  
  88.     public void setEditViewEnable(){  
  89.         int i=0;  
  90.         for(EditText et : et_group){  
  91.             if(i++!=cursorPosition){  
  92.                 et.setFocusableInTouchMode(false);  
  93.             }  
  94.         }  
  95.     }  
  96.     /** 
  97.      * 事件監聽 
  98.      */  
  99.     public void setListener(){  
  100.         /** 
  101.          * EditView 監聽軟鍵盤，監聽刪除鍵 
  102.          */  
  103.         onKeyListener=new OnKeyListener() {  
  104.             @Override  
  105.             public boolean onKey(View v, int keyCode, KeyEvent event) {  
  106.                 // TODO Auto-generated method stub  
  107.                 if(keyCode==KeyEvent.KEYCODE_DEL&&event.getAction()==KeyEvent.ACTION_DOWN){  
  108.                     testcursorPosition();  
  109.                     Log.d("pwd", "刪除密碼"+Integer.toString(cursorPosition));  
  110.                     if(cursorPosition!=6&&cursorPosition!=0){  
  111.                         EditText et=et_group.get(cursorPosition);  
  112.                         if(TextUtils.isEmpty(et.getText().toString())){  
  113.                             et_group.get(cursorPosition-1).setText("");  
  114.                         }  
  115.                     }  
  116.                 }  
  117.                     return false;  
  118.             }  
  119.         };  
  120.         /** 
  121.          * EditView的點選事件 
  122.          */  
  123.         OnClickListener clickListener=new OnClickListener() {  
  124.             @Override  
  125.             public void onClick(View v) {  
  126.                 // TODO Auto-generated method stub  
  127.                 testcursorPosition();  
  128.             }  
  129.         };  
  130.         for(EditText et : et_group){  
  131.             et.addTextChangedListener(this);  
  132.             et.setOnKeyListener(onKeyListener);  
  133.             et.setOnClickListener(clickListener);  
  134.         }  
  135.     }  
  136.     @Override  
  137.     public void beforeTextChanged(CharSequence s, int start, int count,  
  138.             int after) {  
  139.         // TODO Auto-generated method stub  
  140.     }  
  141.     @Override  
  142.     public void onTextChanged(CharSequence s, int start, int before, int count) {  
  143.         // TODO Auto-generated method stub  
  144.         EditText et = et_group.get(cursorPosition);  
  145.         if(s.length()>1){  
  146.             s=s.toString().subSequence(0, 1);  
  147.             et.setText(s);  
  148.             et.setSelection(s.length());  
  149.         }  
  150.         if(!TextUtils.isEmpty(et.getText().toString())&&  
  151.                 !et.getText().toString().equals("*")){  
  152.             password[cursorPosition]=et.getText().toString();  
  153.             et.setText("*");  
  154.         }else if(!et.getText().toString().equals("*")){  
  155.             password[cursorPosition]=et.getText().toString();  
  156.         }  
  157.         testcursorPosition();  
  158.     }  
  159.     @Override  
  160.     public void afterTextChanged(Editable s) {  
  161.         // TODO Auto-generated method stub  
  162.     }  
  163. }  
package com.example.passwordview;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity implements TextWatcher{

	private EditText et_pwd1;
	private EditText et_pwd2;
	private EditText et_pwd3;
	private EditText et_pwd4;
	private EditText et_pwd5;
	private EditText et_pwd6;
	private List<EditText> et_group;
	private OnKeyListener onKeyListener;
	public int cursorPosition=0;
	private InputMethodManager imm;
	public Context context;
	private String[] password=new String[6];
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.httfund_enter_password);
		intiView();
		setListener();
		testcursorPosition();
	}
	
	public void intiView(){
		et_pwd1=(EditText)findViewById(R.id.et_pwd1);
		et_pwd2=(EditText)findViewById(R.id.et_pwd2);
		et_pwd3=(EditText)findViewById(R.id.et_pwd3);
		et_pwd4=(EditText)findViewById(R.id.et_pwd4);
		et_pwd5=(EditText)findViewById(R.id.et_pwd5);
		et_pwd6=(EditText)findViewById(R.id.et_pwd6);
		
		et_group=new ArrayList<EditText>();
		et_group.add(et_pwd1);
		et_group.add(et_pwd2);
		et_group.add(et_pwd3);
		et_group.add(et_pwd4);
		et_group.add(et_pwd5);
		et_group.add(et_pwd6);
		
	}
	
	/**
	 * 輸入判斷，游標永遠在第一個空白格
	 */
	public void testcursorPosition(){
		cursorPosition=0;
		for(EditText editView : et_group){
			editView.setFocusableInTouchMode(true);
		}
		
		for(EditText et : et_group){
			if(!TextUtils.isEmpty(et.getText().toString())){
				++cursorPosition;
				
			}else{
				break;
			}
		}
		
			if(cursorPosition==6){
				cursorPosition=5;
			}
			EditText et=et_group.get(cursorPosition);
			et.requestFocus();
			et.setSelection(et.getText().toString().length());
			
			imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
			if(imm.isActive()){
				imm.toggleSoftInput(0, InputMethodManager.HIDE_IMPLICIT_ONLY);
			
			
		}
		setEditViewEnable();
	}
	/**
	 * 設定EditView的Enable屬性
	 * 僅將包含游標的EditView設定為true
	 */
	public void setEditViewEnable(){
		int i=0;
		for(EditText et : et_group){
			if(i++!=cursorPosition){
				et.setFocusableInTouchMode(false);
			}
		}
	}
	/**
	 * 事件監聽
	 */
	public void setListener(){
		/**
		 * EditView 監聽軟鍵盤，監聽刪除鍵
		 */
		onKeyListener=new OnKeyListener() {
			@Override
			public boolean onKey(View v, int keyCode, KeyEvent event) {
				// TODO Auto-generated method stub
				if(keyCode==KeyEvent.KEYCODE_DEL&&event.getAction()==KeyEvent.ACTION_DOWN){
					testcursorPosition();
					Log.d("pwd", "刪除密碼"+Integer.toString(cursorPosition));
					if(cursorPosition!=6&&cursorPosition!=0){
						EditText et=et_group.get(cursorPosition);
						if(TextUtils.isEmpty(et.getText().toString())){
							et_group.get(cursorPosition-1).setText("");
						}
					}
				}
					return false;
				
			}
		};
		/**
		 * EditView的點選事件
		 */
		OnClickListener clickListener=new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				testcursorPosition();
			}
		};
		
		for(EditText et : et_group){
			et.addTextChangedListener(this);
			et.setOnKeyListener(onKeyListener);
			et.setOnClickListener(clickListener);
		}
	}
	
	@Override
	public void beforeTextChanged(CharSequence s, int start, int count,
			int after) {
		// TODO Auto-generated method stub
	}

	@Override
	public void onTextChanged(CharSequence s, int start, int before, int count) {
		// TODO Auto-generated method stub
		EditText et = et_group.get(cursorPosition);
		if(s.length()>1){
			s=s.toString().subSequence(0, 1);
			et.setText(s);
			et.setSelection(s.length());
		}
		
		if(!TextUtils.isEmpty(et.getText().toString())&&
				!et.getText().toString().equals("*")){
			password[cursorPosition]=et.getText().toString();
			et.setText("*");
		}else if(!et.getText().toString().equals("*")){
			password[cursorPosition]=et.getText().toString();
		}
		
		testcursorPosition();
	}

	@Override
	public void afterTextChanged(Editable s) {
		// TODO Auto-generated method stub
	}
}


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

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

下載地址 ：http://download.csdn.net/detail/u013107635/8026475

相關推薦

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

我自己手頭一直用的IOS系統，寫這個密碼框的時候功能方面也參考了一個下蘋果的螢幕解鎖。這個密碼框也是修修改改兩三天才算完善，效果雖然實現了，但很多細節地方還是不太明白，還希望高人指點。 1.功能介紹及效果圖 做密碼框的時候考慮了兩個方案，一個方案是用6個EditText，另一個方案則是在EditText上

IOS 自定義按鈕（代碼實現）＋九宮格

uifont 排列 end uiview height iyu void rec name 在一些下載應用裏整個頁面都是按鈕，有好多好多，但是仔細觀察不難發現他們很有規律。就像下面一樣?? 很有規律的排列在屏幕上，那麽這需要我們怎麽去做能。 正如標題，我們需要了解兩個知

Android項目實戰（七）：Dialog主題Activity實現自定義對話框效果

utf 定義 nim 亮點 close .com 去除 span 代碼 原文:Android項目實戰（七）：Dialog主題Activity實現自定義對話框效果想必大家都用過Dialog主題的Activity吧，用它來顯示自定義對話框效果絕對是一個非常不錯的選擇。 即把a

自定義Metrics：讓Prometheus監控你的應用程式

前言 Prometheus社群提供了大量的官方以及第三方Exporters，可以滿足Prometheus的採納者快速實現對關鍵業務，以及基礎設施的監控需求。如上所示，一個簡單的應用以及環境架構。一般而言，我們通常會從幾個層面進行監控指標的採集： 入口閘道器：這裡可以是Nginx/HaProxy這一類

GuavaCache學習筆記一：自定義LRU演算法的快取實現

前言 今天在看GuavaCache快取相關的原始碼，這裡想到先自己手動實現一個LRU演算法。於是乎便想到LinkedHashMap和LinkedList+HashMap, 這裡僅僅是作為簡單的複習一下。 LRU LRU（Least recently used，最近最少使用）演算法根據資料的歷史訪問記錄來

一款讓你實現財富自由的 EOS 遊戲——平行世界（Parallel Universe）

什麼是平行世界基於區塊鏈技術的平行世界，每個人都可以通過自己的努力和策略重新塑造自己的社會價值，實現財富自由。在平行世界中，利用區塊鏈結合token來實現一個虛擬社會。平行世界中的token就代表了你的社會價值，持有的token越多，社會價值和地位就越高。在平行世界中重塑你的

Android自定義View——從零開始實現水波浪進度框

前言：相信同行們都知道，我們程式設計師有一種痛，叫做別人的程式碼。讀懂別人的程式碼很重要的一點就是要抓住作者的思路，有了思路才能將過程推匯出來，否則腦闊會疼。為己為人，本系列教程部落格，我都會將自己實現的思路寫下來，帶大家一步步從零開始實現我們想要的效果

【安卓-自定義佈局】安卓App開發思路 一步一個腳印（十）實現內嵌在app中的webview 騰訊開源X5 高效安全

實現內嵌在app中的webview 採用騰訊開源X5 高效安全 webview在app的使用中，十分頻繁，原生的webview載入速度相對來說很慢，而且很費流量。騰訊開源了x5的webview

【安卓-自定義佈局】安卓App開發思路 一步一個腳印（九）實現自定義滾動的新聞條目上下滾動-仿蘑菇街

實現自定義滾動的新聞條目上下滾動-仿蘑菇街       這種上下滾動的自定義佈局，就像是公告那種上下的翻滾，一般為文字的滾動，很明顯，就是自定義佈局，一般是線性佈局。這裡提到的安卓原生的控制元件自然是

在Struts2中實現自定義分頁標籤全攻略（一）

我們先看看這個分頁標籤的效果： 使用標籤的最大好處就是下次再用到的話直接引用就行，而不必重寫。 本人對Struts2自定義標籤沒有太深究，在網上找了一些資料可以參考參考： 其實，開發自定義標籤並不需要Struts2的支援，一般情況下，只需要繼承javax.servle

Android 輪播圖 實現 一 ：三方框架 自定義viewPager （CircleViewPager.）實現無限輪播。

使用流程：1  。 gradle中新增依賴compile 'com.zhpan.library:viewpager:1.0.3'2.在xml檔案中新增如下程式碼：<com.zhpan.viewpager.view.CircleViewPager andr

android：如何通過自定義工程模板讓新建的工程都默認支持lambda表達式

wan tro idt ref height 代碼 spa span oid 首先參考這篇文章：自定義Android Studio工程模板，了解如何自定義模板然後結合我們上一篇文章 android: 在android studio中使用retrolambda的步驟的要點，修

手機影音第六天 自定義播放器頁面的實現（按鈕暫時未監聽）

手機影音第六天 自定義播放器布局以及橫豎屏切換播放器時的問題解決 目前進度的項目源代碼托管在裏碼雲上，地址如下： https://git.oschina.net/joy_yuan/MobilePlayer 感興趣的可以去下載看看，多多支持

說說自定義註解的場景及實現---------

lin 場景 框架 .html int utm 方法 註解配置 http 說說自定義註解的場景及實現 跟蹤代碼的依賴性，實現代替配置文件的功能。比較常見的是Spring等框架中的基於註解配置。 還可以生成文檔常見的@See@param@return等。如@overrid

js-自定義對話框

效果 hid abs cli width ces 對象 xtend 關系 引用插件 <link rel="stylesheet" type="text/css" href="${ctx }/resources/common/css/xcConfirm.css"/&g

除錯經驗——使用自定義函式在Oracle中實現類似LISTAGG函式的行轉列（字串連線）功能

問題描述： LISTAGG函式是一個很實用的函式，但僅在Oracle 11.2以後的版本中才有。 生產環境中有個資料庫是Oracle 11.1，需要行轉列，但並不能使用LISTAGG函式。 解決方法： 參考以下文章： https://oracle-base.com/artic

Lucene筆記20-Lucene的分詞-實現自定義同義詞分詞器-實現分詞器（良好設計方案）

一、目前存在的問題 在getSameWords()方法中，我們使用map臨時存放了兩個鍵值對用來測試，實際開發中，往往需要很多的這種鍵值對來處理，比如從某個同義詞詞典裡面獲取值之類的，所以說，我們需要一個類，根據key提供近義詞。 為了能更好的適應應用場景，我們先定義一個介面，其中定義一

Lucene筆記19-Lucene的分詞-實現自定義同義詞分詞器-實現分詞器

一、同義詞分詞器的程式碼實現 package com.wsy; import com.chenlb.mmseg4j.Dictionary; import com.chenlb.mmseg4j.MaxWordSeg; import com.chenlb.mmseg4j.analysis.MM

echart使用自定義單個柱狀顏色實現

專案實踐中遇到一個根據需要，當X軸等於某個值是，柱狀變成特殊顏色的需求，大致有兩個方案實現： 1、在前臺遍歷資料物件，判斷設定； 2、在後臺拼裝資料是，按照格式要求拼裝好； 具體程式碼如下： 方法一： option = {     title: { &nb

Android自定義View——自定義搜尋框（SearchView） 非常實用的控制元件

好多東西寫起來太麻煩了,而且我在最開始用的也不是自己寫的,所以找了一個非常棒的測試了一下.  轉載的 在 Android開發中，當系統資料項比較多時，常常會在app新增搜尋功能，方便使用者能快速獲得需要的資料。搜尋欄對於我們並不陌生，在許多app都能見到它，比如豌