Android仿微信/支付宝密码输入框

薛朝

2023-03-14

本文向大家介绍Android仿微信/支付宝密码输入框，包括了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仿微信/支付宝密码输入框的全部叙述，希望大家喜欢。

Android仿微信/支付宝密码输入框

相关阅读

相关文章

相关问答

相关工具

相关文档