Android仿微信/支付宝密码输入框
作者：yaya_soft
这篇文章主要介绍了Android仿微信/支付宝密码输入框的相关资料,需要的朋友可以参考下
在用到支付类app时，都有一个简密的输入框。。开始实现的时候思路有点问题，后来到github上搜了下，找到了一个开源的库看起来相当的牛逼，，来个地址先：
https://github.com/Jungerr/GridPasswordView
效果图：
这个开源库我研究了之后，又有了自己的一个思路：来个假的简密框---底部放一个EditTextView,顶部放置6个ImageView的原点，控制他们的显隐来实现这个简密宽
开发步骤：
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("回调");
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;
}
}
这样子其实也实现了简密功能，但是这个比前面那个开源库简单了许多，当然功能也没有前面的那个强大。
以上内容给大家介绍了Android仿微信/支付宝密码输入框的全部叙述，希望大家喜欢。