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

2024-02-08 06:14:16

在用到支付类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 实现仿支付宝的密码均分输入框

Android 仿支付宝的密码均分输入框此为安卓项目,通过重绘edittext进行文字的均分排布. 直接贴上代码: package com.xxx.xxx; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android
Android实现支付宝6位密码输入界面

我们先来照图分析一下: (1)限制输入6位,每一位都有自己的框格,每个格显示一位: (2)有回退/取消支付按钮: (3)有忘记密码链接: (4)自定义的只能输入数字的键盘输入区: (5)在6位输完后自动进行密码校验和支付交易.如上图左边是iOS支付宝支付密码输入控件,右边是我模仿实现的效果. 首先,我们需要一个页面来完成以上的静态布局,.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <Relativ
Android 仿支付宝密码输入框效果

模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
Android实现支付宝手势密码功能

今天就给大家分享android实现支付宝手势密码,很常见,像现在用微信支付,支付宝支付的时候都要自己设置的4位PIN码,然后输入PIN码后立即调用支付接口去支付,毫无疑问的安全问题,不会觉得手机被人拿了后却不知道自己网银的钱的去向,这也是正常安全逻辑性问题. 好,下面我们来看下具体的实现: 入口,启动页面就简单的几个按钮,布局贴出来,代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
Android自定义View仿支付宝输入六位密码功能

跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
android仿微信支付宝的支付密码输入框示例

大家好,我是狸小华,萌汉子一枚.今天给大家带来的是仿微信/支付宝的密码输入框.这个效果也出来有一段时间了,所以搜索一下还是有不少的网友实现,但是,但是!经过一番查看后,我发现他们的实现分为两大类. 一,直接继承EditText,然后在ondraw里面做文章:二,EditText外面包一个viewGroup.我不喜欢这两种实现方式,觉着有些臃肿了,所以我详细介绍下我的实现方式:直接继承View,获取用户的输入,然后draw出来. 我们实现的是上面的密码输入框,这个键盘...系统自带的哦,调用用户输
Android仿支付宝、京东的密码键盘和输入框

首先看下效果图一:布局代码键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方法来定义.点击键的时候背景有变色的效果. 密码输入框由六个EditText组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听. 二:键盘键盘中的主要逻辑处理,键盘样式,item的点击事件 @Override public int getViewTypeCount() { return 2; } @Override publi
Android仿支付宝手势密码解锁功能

Starting 创建手势密码可以查看 CreateGestureActivity.java 文件. 登陆验证手势密码可以看 GestureLoginActivity.java 文件. Features 使用了 JakeWharton/butterknife butterknife 使用了 ACache 来存储手势密码 /** * 保存手势密码 */ private void saveChosenPattern(List<LockPatternView.Cell> cells) { byte[
Android仿支付宝支付密码输入框

本文实例为大家分享了Android实现一个仿支付宝支付密码的输入框,主要实现如下: PasswordView.java package com.jackie.alipay.password; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphic
Android仿支付宝微信支付密码界面弹窗封装dialog

一,功能效果二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性 android:overScrollMode=&quo

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

相关推荐

随机推荐