支付宝密码输入框

在用到支付类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" > <RelativeLayoutstyle="@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> <RelativeLayoutstyle="@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> <RelativeLayoutstyle="@style/common_ho_vm"android:layout_weight="1"android:orientation="horizontal" ><ImageViewandroid: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> <RelativeLayoutstyle="@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> <RelativeLayoutstyle="@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> <RelativeLayoutstyle="@style/common_ho_vm"android:layout_weight="1"android:orientation="horizontal" ><ImageViewandroid: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仿微信/支付宝密码输入框的全部叙述，希望大家喜欢。