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="never  不然滑动键盘的时候有阴影

(4),底部三个按钮用的线性布局里的三个TextView

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/bgItemCheck"
 android:orientation="vertical">
 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="60dp">
  <ImageView
   android:id="@+id/iv_close_key"
   android:layout_width="45dp"
   android:layout_height="45dp"
   android:layout_centerVertical="true"
   android:padding="10dp"
   android:src="@mipmap/icon_close" />
  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:text="输入密码"
   android:textColor="@color/black"
   android:textSize="20sp" />
  <View
   android:layout_width="match_parent"
   android:layout_height="1dp"
   android:layout_alignParentBottom="true"
   android:background="@color/underLine" />
 </RelativeLayout>
 <TextView
  android:id="@+id/tv_tip_money"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="15dp"
  android:gravity="center"
  android:text="提现金额0元,服务费0元"
  android:textColor="@color/black" />
 <LinearLayout
  android:layout_width="335dp"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:background="@drawable/shape_bg_psw"
  android:orientation="horizontal">
  <TextView
   android:id="@+id/tv_first_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
  <View
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:background="@color/strokePsw" />
  <TextView
   android:id="@+id/tv_second_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
  <View
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:background="@color/strokePsw" />
  <TextView
   android:id="@+id/tv_third_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
  <View
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:background="@color/strokePsw" />
  <TextView
   android:id="@+id/tv_fourth_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
  <View
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:background="@color/strokePsw" />
  <TextView
   android:id="@+id/tv_fifth_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
  <View
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:background="@color/strokePsw" />
  <TextView
   android:id="@+id/tv_sixth_num"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:gravity="center"
   android:inputType="numberPassword"
   android:textColor="@color/black"
   android:textSize="30sp" />
 </LinearLayout>
 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <TextView
   android:id="@+id/tv_forget_psw"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_margin="10dp"
   android:padding="5dp"
   android:text="忘记密码?"
   android:textColor="@color/mainColor"
   android:textSize="13sp"
   android:visibility="invisible" />
 </RelativeLayout>
 <android.support.v7.widget.RecyclerView
  android:id="@+id/rv_keyboard"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="30dp"
  android:background="@color/white"
  android:overScrollMode="never" />
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="58dp"
  android:orientation="horizontal">
  <TextView
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:background="@color/bgItemPsw" />
  <TextView
   android:id="@+id/tv_zero"
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:background="@drawable/selector_bg_psw_item"
   android:gravity="center"
   android:text="0"
   android:textColor="@color/black"
   android:textSize="25sp" />
  <RelativeLayout
   android:id="@+id/rl_undo"
   android:layout_width="1dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:background="@drawable/selector_bg_undo">
   <ImageView
    android:layout_width="25dp"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:src="@mipmap/icon_undo" />
  </RelativeLayout>
 </LinearLayout>
</LinearLayout></span> 

2,Java代码 KeyboardDialog.java

注意事项

(1),封装成dialog,这段代码要在setContentView之前   window.requestFeature(Window.FEATURE_NO_TITLE)

(2),在构造方法中设置样式(后面详述)

(3),适配器是已封装的,用原生的也没差

(4),密码的存储和删除是操作字符串

(5),使用了butterknife  版本为:compile'com.jakewharton:butterknife:7.0.1'

(6),在设置attributes.width = ScreenUtils.getScreenWidth(context);使用了封装的方法 目的是获取屏幕的宽  可自行百度达到相同效果

<span style="font-size:14px;">public class KeyboardDialog extends Dialog {
 private final Context context;
 private final int money;
 @Bind(R.id.rv_keyboard)//数字列表
   RecyclerView rvKeyboard;
 @Bind(R.id.iv_close_key)//关闭按钮
   ImageView ivCloseKey;
 @Bind(R.id.tv_tip_money)//提现金额及手续费
   TextView tvTipMoney;
 @Bind(R.id.tv_zero)//数字0
   TextView tvZero;
 @Bind(R.id.rl_undo)//后退键
   RelativeLayout rlUndo;
 //六位密码
 @Bind(R.id.tv_first_num)
 TextView tvFirstNum;
 @Bind(R.id.tv_second_num)
 TextView tvSecondNum;
 @Bind(R.id.tv_third_num)
 TextView tvThirdNum;
 @Bind(R.id.tv_fourth_num)
 TextView tvFourthNum;
 @Bind(R.id.tv_fifth_num)
 TextView tvFifthNum;
 @Bind(R.id.tv_sixth_num)
 TextView tvSixthNum;
 private ArrayList<String> keyboardList;//数字列表
 private String psw = "";//密码
 public KeyboardDialog(Context context, int money) {
  super(context, R.style.keyboard_dialog);
  this.context = context;
  this.money = money;//要提现金额
  setCanceledOnTouchOutside(true);
 }
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  Window window = this.getWindow();
  assert window != null;
  window.requestFeature(Window.FEATURE_NO_TITLE);
  window.setWindowAnimations(R.style.keyboard_dialog_anim);
  setContentView(R.layout.dialog_keyboard);
  ButterKnife.bind(this);
  WindowManager.LayoutParams attributes = window.getAttributes();
  attributes.gravity = Gravity.BOTTOM;
  attributes.width = ScreenUtils.getScreenWidth(context);
  attributes.height = GridLayoutManager.LayoutParams.WRAP_CONTENT;
  initData();
 }
 /*
 * 初始化
 * */
 private void initData() {
  keyboardList = new ArrayList<>();
  for (int i = 1; i < 10; i++) {
   keyboardList.add(i + "");
  }
  //设置要提现的金额
  tvTipMoney.setText("提现金额" + money + "元");
  GridLayoutManager glManager = new GridLayoutManager(context, 3);
  rvKeyboard.setLayoutManager(glManager);
  RcyCommonAdapter adapter = getAdapter();
  rvKeyboard.setAdapter(adapter);
 }
 private RcyCommonAdapter getAdapter() {
  return new RcyCommonAdapter<String>(context, keyboardList, false, rvKeyboard) {
   @Override
   public void convert(RcyViewHolder holder, String keyboard) {
    TextView tvKeyboard = holder.getView(R.id.tv_keyboard_item);
    tvKeyboard.setText(keyboard);
   }
   @Override
   public int getmLayoutId(int position) {
    return R.layout.item_keyboard;
   }
   @Override
   public void onItemClickListener(int position) {
    inputNum(position + 1 + "");
   }
  };
 }
 /*
 * 输入密码 先判断现有密码长度并设置显示输入了密码 添加密码到密码字符串
 * 后判断输入后密码的长度 如果等于6则关闭并请求服务器
 * */
 private void inputNum(String num) {
  switch (psw.length()) {
   case 0:
    tvFirstNum.setText(num);
    break;
   case 1:
    tvSecondNum.setText(num);
    break;
   case 2:
    tvThirdNum.setText(num);
    break;
   case 3:
    tvFourthNum.setText(num);
    break;
   case 4:
    tvFifthNum.setText(num);
    break;
   case 5:
    tvSixthNum.setText(num);
    break;
  }
  psw += num;
  if (psw.length() == 6) {
   //TODO 请求服务器 密码为 psw
   Log.d("psw", psw);
   dismiss();
  }
 }
 @OnClick({R.id.iv_close_key, R.id.tv_zero, R.id.rl_undo})
 public void onClick(View view) {
  switch (view.getId()) {
   case R.id.iv_close_key://关闭dialog
    dismiss();
    break;
   case R.id.tv_zero://输入0
    inputNum("0");
    break;
   case R.id.rl_undo://删除输入的密码
    deleteNum();
    break;
  }
 }
 /*
 * 删除密码 根据已输入的密码长度将对应的textview设置为空
 * 并将密码字符串最后一位切割掉
 * */
 private void deleteNum() {
  switch (psw.length()) {
   case 1:
    tvFirstNum.setText("");
    psw = "";
    break;
   case 2:
    tvSecondNum.setText("");
    psw = psw.substring(0, 1);
    break;
   case 3:
    tvThirdNum.setText("");
    psw = psw.substring(0, 2);
    break;
   case 4:
    tvFourthNum.setText("");
    psw = psw.substring(0, 3);
    break;
   case 5:
    tvFifthNum.setText("");
    psw = psw.substring(0, 4);
    break;
  }
 }
}</span><span style="font-size:18px;">
</span> 

3,设置弹框样式

(1),在构造方法中设置样式  R.style.keyboard_dialog

<span style="font-size:14px;">public KeyboardDialog(Context context, int money) {
  super(context, R.style.keyboard_dialog);
  this.context = context;
  this.money = money;//要提现金额
  setCanceledOnTouchOutside(true);
 }</span> 

样式代码为

<span style="font-size:14px;"><style name="keyboard_dialog" parent="AppTheme.base">
  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:windowFrame">@null</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowIsFloating">true</item>
  <item name="android:windowIsTranslucent">true</item>
  <item name="android:windowContentOverlay">@null</item>
  <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
  <item name="android:backgroundDimEnabled">true</item>
 </style></span> 

(2),在onCreate方法中设置弹框动画样式

<span style="font-size:14px;">window.setWindowAnimations(R.style.keyboard_dialog_anim);</span> 

样式代码为

<span style="font-size:14px;"><style name="keyboard_dialog_anim">
  <item name="android:windowEnterAnimation">@anim/enter_dialog_anim</item>
  <item name="android:windowExitAnimation">@anim/exit_dialog_anim</item>
 </style></span> 

三,调用

调用很简单 一行就可以  需要返回数据就需要自行添加了

<span style="font-size:14px;">  new KeyboardDialog(this, 1000).show();</span> 

下面给大家推荐有关本站android方面的专题,大家可以参考下:

android 验证码功能  http://www.jb51.net/Special/899.htm

Android RecyclerView使用方法汇总    http://www.jb51.net/Special/855.htm

Android ListView常见功能   http://www.jb51.net/Special/850.htm

Android控件imageview详细用法   http://www.jb51.net/Special/726.htm

Android SDK基础教程   http://www.jb51.net/Special/637.htm

Android 开发中缓存知识汇总  http://www.jb51.net/Special/622.htm

以上所述是小编给大家介绍的Android仿支付宝微信支付密码界面弹窗封装dialog,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android中ProgressDialog的dismiss()与cancel()方法的区别

    progressDialog, 它有两个方法dialog.cancel() 和 dialog.dimiss() 1. public void cancel () Since: API Level 1 Cancel the dialog. This is essentially the same as calling dismiss(), but it will also call your DialogInterface.OnCancelListener (if registered). 2.p

  • Android实现自定义圆角对话框Dialog的示例代码

    前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角显示 2.考虑到提示文本字数不确定,在不影响美观的情况下,需要在一行内显示提示的文字信息 3.设置对话框的宽和高 技术储备: 1.安卓开发_使用AlertDialog实现对话框    知道AlertDialog有setView(view) ,Dialog 有ContentView(view) 方法. 2.An

  • Android自定义dialog可选择展示年月日时间选择栏

    自定义dialog package com.poptest; import android.app.DatePickerDialog; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.DatePicker; //dialog类 public class YearPickerDialog extends DatePickerD

  • Android Dialog中软键盘的显示与隐藏的示例

    1.写在前面 本篇的主要内容是关于在Dialog中软键盘的显示与隐藏问题,需求是在Dialog中有一个密码输入框,弹出Dialog显示软键盘,关闭Dialog隐藏软键盘. 嗯,是不是有点简单,不过在实现的过程中还是遇到了一些问题,在试过了网上大部分的方法之后,最终找到了一个还不错的方法,分享给大家. 看下效果图: 2.实现过程 先说说最开始的实现方法: // 显示Dialog dialog.show(); // 显示软键盘 SoftInputUtils.showSoftInput(activit

  • Android实现底部对话框BottomDialog弹出实例代码

    最近项目上需要实现一个底部对话框,要实现这样的功能其实很简单,先看代码: private void show1() { Dialog bottomDialog = new Dialog(this, R.style.BottomDialog); View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_normal, null); bottomDialog.setContentView(contentV

  • Android仿IOS自定义AlertDialog提示框

    本文介绍的仿IOS对话框的实现,先来看一下效果图 具体代码如下: public class AlertDialog { private Context context; private Dialog dialog; private LinearLayout lLayout_bg; private TextView txt_title; private TextView txt_msg; private Button btn_neg; private Button btn_pos; private

  • Android 常用log 关键字

    记录下常用的log关键字 1.windowmanager接收到全局按键 WindowManager: interceptKeyTq keycode=26 interactive=false keyguardActive=true policyFlags=2000000 WindowManager: interceptKeyTq keycode=26 interactive=false keyguardActive=true policyFlags=2000000 down =true // 按下

  • Android 自定义AlertDialog对话框样式

    实际的项目开发当中,经常需要根据实际的需求来自定义AlertDialog.最近在开发一个WIFI连接的功能,点击WIFI需要弹出自定义密码输入框.在此权当记录 效果图 点击首页的Button即跳出对话框,显示WIFI信息(TextView),密码输入框(EditText),取消和连接按钮(Button) 实现 根据自己实际的需求,为AlertDialog创建一个布局,在此我需要定义一个如图所示的WIFI密码输入框,故在 res/layout 目录下建立一个 dialog_layout.xml 文

  • 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

  • js仿支付宝填写支付密码效果实现多方框输入密码

    不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说

  • Android仿支付宝密码输入效果封装

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

  • Android高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思路应该这样子. Ⅰ.将要输入密码数量动态通过代码加载出来. Ⅱ.利用Gridview模拟产生一个输入数字键盘,并且按照习惯从屏幕底部弹出来. Ⅲ.对输入数字键盘进行事件监听,将这个输入数字填入到这个密码框中,并且当您输入密码长度一致的时候,进行事件回调. 这个思维导图应该是这样的: 首先,我们要根据需求动态加

  • Android仿微信支付密码弹出层功能

    预览 使用 这个弹出层是一个DialogFragment,逻辑都封装在其内部,使用起来很简单: Bundle bundle = new Bundle(); bundle.putString(PayFragment.EXTRA_CONTENT, "提现:¥ " + 100.00); PayFragment fragment = new PayFragment(); fragment.setArguments(bundle); fragment.setPaySuccessCallBack(

  • Android自定义View仿支付宝输入六位密码功能

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

  • Android仿支付宝自定义密码输入框及安全键盘(密码键盘)

     0.前言 之前做过的项目里有运用到一个支付场景:用户办理业务时需要输入交易密码,并且可根据平台下发的支付方式进行选择.这与支付宝的密码输入方式十分相似,如果使用Android系统或者第三方软件的键盘,会有密码泄露的风险.因此,大多数的应用软件使用的是自定义的密码输入框及安全键盘. 由于密码输入方式需要实现一个从底部弹出的效果,因此总体上决定采用BottomSheetDialog来进行封装,同时为了提高安全性,还应该随机生成键盘上的数字,界面如下图所示:   首先新建一个PasswordInpu

  • Android仿支付宝的头部伸缩动画效果

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟

  • Android 仿支付宝密码输入框效果

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

  • android仿支付宝密码输入框效果

    本文实例为大家分享了android仿支付宝密码输入框展示的具体代码,供大家参考,具体内容如下 这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更具体 布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

随机推荐