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 验证码功能  //www.jb51.net/special/899.htm

android recyclerview使用方法汇总    //www.jb51.net/special/855.htm

android listview常见功能   //www.jb51.net/special/850.htm

android控件imageview详细用法   //www.jb51.net/special/726.htm

android sdk基础教程   //www.jb51.net/special/637.htm

android 开发中缓存知识汇总  //www.jb51.net/special/622.htm

以上所述是小编给大家介绍的android仿支付宝微信支付密码界面弹窗封装dialog，希望对大家有所帮助