Android仿微信/支付寶密碼輸入框
在用到支付類app時,都有一個簡密的輸入框。。開始實現(xiàn)的時候思路有點問題,后來到github上搜了下,找到了一個開源的庫看起來相當(dāng)?shù)呐1疲?,來個地址先:
https://github.com/Jungerr/GridPasswordView
效果圖:

這個開源庫我研究了之后,又有了自己的一個思路:來個假的簡密框---底部放一個EditTextView,頂部放置6個ImageView的原點,控制他們的顯隱來實現(xiàn)這個簡密寬
開發(fā)步驟:
1 布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/common_hm_vw"
android:layout_height="50dp" >
<LinearLayout
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/sdk2_simple_pwd_bg_"
android:orientation="horizontal" >
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="@+id/sdk2_pwd_one_img"
style="@style/common_hm_vm"
android:layout_centerInParent="true"
android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="@+id/sdk2_pwd_two_img"
style="@style/common_hw_vw"
android:layout_centerInParent="true"
android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="@+id/sdk2_pwd_three_img"
style="@style/common_hw_vw"
android:layout_centerInParent="true"
android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="@+id/sdk2_pwd_four_img"
style="@style/common_hw_vw"
android:layout_centerInParent="true"
android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="@+id/sdk2_pwd_five_img"
style="@style/common_hw_vw"
android:layout_centerInParent="true"
android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
<RelativeLayout
style="@style/common_ho_vm"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView android:id="@+id/sdk2_pwd_six_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon"
android:visibility="invisible" />
<View
android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" />
</RelativeLayout>
</LinearLayout>
<EditText
android:id="@+id/sdk2_pwd_edit_simple"
style="@style/common_hm_vm"
android:background="@null"
android:cursorVisible="false"
android:inputType="numberPassword"
android:maxLength="6"
android:textColor="@color/sdk2_color_black" />
</FrameLayout>
2:自定義一個控件來處理輸入、刪除、顯隱等事件
package com.suning.mobile.paysdk.view;
import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.suning.mobile.paysdk.R;
import com.suning.mobile.paysdk.utils.FunctionUtils;
import com.suning.mobile.paysdk.utils.log.LogUtils;
/**
*
* 〈一句話功能簡述〉<br>
* 〈功能詳細描述〉 簡密輸入框
*/
public class SecurityPasswordEditText extends LinearLayout {
private EditText mEditText;
private ImageView oneTextView;
private ImageView twoTextView;
private ImageView threeTextView;
private ImageView fourTextView;
private ImageView fiveTextView;
private ImageView sixTextView;
LayoutInflater inflater;
ImageView[] imageViews;
View contentView;
public SecurityPasswordEditText(Context context, AttributeSet attrs) {
super(context, attrs);
inflater = LayoutInflater.from(context);
builder = new StringBuilder();
initWidget();
}
private void initWidget() {
contentView = inflater.inflate(R.layout.sdk_simple_pwd_widget, null);
mEditText = (EditText) contentView
.findViewById(R.id.sdk_pwd_edit_simple);
oneTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_one_img);
twoTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_two_img);
fourTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_four_img);
fiveTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_five_img);
sixTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_six_img);
threeTextView = (ImageView) contentView
.findViewById(R.id.sdk_pwd_three_img);
LinearLayout.LayoutParams lParams = new LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
mEditText.addTextChangedListener(mTextWatcher);
mEditText.setOnKeyListener(keyListener);
imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView,
fourTextView, fiveTextView, sixTextView };
this.addView(contentView, lParams);
}
TextWatcher mTextWatcher = new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before,
int count) {
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}
@Override
public void afterTextChanged(Editable s) {
if (s.toString().length() == ) {
return;
}
if (builder.length() < ) {
builder.append(s.toString());
setTextValue();
}
s.delete(, s.length());
}
};
OnKeyListener keyListener = new OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DEL
&& event.getAction() == KeyEvent.ACTION_UP) {
delTextValue();
return true;
}
return false;
}
};
private void setTextValue() {
String str = builder.toString();
int len = str.length();
if (len <= ) {
imageViews[len - ].setVisibility(View.VISIBLE);
}
if (len == ) {
LogUtils.i("回調(diào)");
LogUtils.i("支付密碼" + str);
if (mListener != null) {
mListener.onNumCompleted(str);
}
LogUtils.i("jone", builder.toString());
FunctionUtils.hideSoftInputByView(getContext(), mEditText);
}
}
private void delTextValue() {
String str = builder.toString();
int len = str.length();
if (len == ) {
return;
}
if (len > && len <= ) {
builder.delete(len - , len);
}
imageViews[len - ].setVisibility(View.INVISIBLE);
;
}
StringBuilder builder;
public interface SecurityEditCompleListener {
public void onNumCompleted(String num);
}
public SecurityEditCompleListener mListener;
public void setSecurityEditCompleListener(
SecurityEditCompleListener mListener) {
this.mListener = mListener;
}
public void clearSecurityEdit() {
if (builder != null) {
if (builder.length() == ) {
builder.delete(, );
}
}
for (ImageView tv : imageViews) {
tv.setVisibility(View.INVISIBLE);
}
}
public EditText getSecurityEdit() {
return this.mEditText;
}
}
這樣子其實也實現(xiàn)了簡密功能,但是這個比前面那個開源庫簡單了許多,當(dāng)然功能也沒有前面的那個強大。
以上內(nèi)容給大家介紹了Android仿微信/支付寶密碼輸入框的全部敘述,希望大家喜歡。
相關(guān)文章
android針對json數(shù)據(jù)解析方法實例分析
這篇文章主要介紹了android針對json數(shù)據(jù)解析方法,以實例形式較為詳細的分析了Android操作json格式數(shù)據(jù)的各種常用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Android提高之自定義Menu(TabMenu)實現(xiàn)方法
這篇文章主要介紹了Android自定義Menu(TabMenu)實現(xiàn)方法,是非常實用的功能,需要的朋友可以參考下2014-08-08
flutter自定義InheritedProvider實現(xiàn)狀態(tài)管理詳解
這篇文章主要為大家介紹了flutter自定義InheritedProvider實現(xiàn)狀態(tài)管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
Android 自定義view實現(xiàn)進度條加載效果實例代碼
這篇文章主要介紹了Android 自定義view實現(xiàn)進度條加載效果實例代碼,需要的朋友可以參考下2017-08-08
Android編程判斷當(dāng)前應(yīng)用是否在后臺運行的方法示例
這篇文章主要介紹了Android編程判斷當(dāng)前應(yīng)用是否在后臺運行的方法,涉及Android針對當(dāng)前程序運行狀態(tài)相關(guān)屬性操作與判定技巧,需要的朋友可以參考下2018-03-03
使用ViewPager實現(xiàn)左右循環(huán)滑動及滑動跳轉(zhuǎn)
今天實現(xiàn)了左右滑動,至于在最后一頁滑動跳轉(zhuǎn),這個也做了但是效果不是太好,也希望有實現(xiàn)的朋友能夠分享下2013-01-01
android中用xml文件實現(xiàn)帶邊框背景效果的方法
這篇文章主要給大家介紹了在android中xml文件實現(xiàn)帶邊框背景效果的方法,其實實現(xiàn)的功能不是很難,僅作記錄,幫助需要的朋友們做個參考,需要的朋友們下面來一起看看吧。2017-06-06

