在Android應用中怎么利用dialog實現一個支付密碼界面彈窗

這篇文章將為大家詳細講解有關在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 ><?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 >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 > 
</span>

3，設置彈框樣式

（1），在構造方法中設置樣式  R.style.keyboard_dialog

<span >public KeyboardDialog(Context context, int money) { 
  super(context, R.style.keyboard_dialog); 
  this.context = context; 
  this.money = money;//要提現金額 
  setCanceledOnTouchOutside(true); 
 }</span>

  樣式代碼為

<span ><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 >window.setWindowAnimations(R.style.keyboard_dialog_anim);</span>

樣式代碼為

<span ><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 >  new KeyboardDialog(this, 1000).show();</span>

關于在Android應用中怎么利用dialog實現一個支付密碼界面彈窗就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。