Android仿支付寶微信支付密碼界面彈窗封裝dialog
更新時(shí)間：2017年03月22日 10:04:05 作者：Aragon_
這篇文章主要介紹了Android仿支付寶微信支付密碼界面彈窗封裝dialog的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
一，功能效果
二，實(shí)現(xiàn)過程
1，先寫xml文件：dialog_keyboard.xml
注意事項(xiàng)
（1），密碼部分用的是一個(gè)線性布局中6個(gè)TextView，并設(shè)置android:inputType="numberPassword"，外框是用的一個(gè)有stroke屬性的shape，
（2），1-9數(shù)字是用的recycleview ，每個(gè)item的底部和右邊有1dp的黑線，填充后形成分割線。
（3），recycleview 要設(shè)置屬性 android:overScrollMode="never 不然滑動(dòng)鍵盤的時(shí)候有陰影
（4），底部三個(gè)按鈕用的線性布局里的三個(gè)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=""
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
注意事項(xiàng)
（1），封裝成dialog，這段代碼要在setContentView之前 window.requestFeature(Window.FEATURE_NO_TITLE)
（2），在構(gòu)造方法中設(shè)置樣式（后面詳述）
（3），適配器是已封裝的，用原生的也沒差
（4），密碼的存儲(chǔ)和刪除是操作字符串
（5），使用了butterknife 版本為：compile'com.jakewharton:butterknife:7.0.1'
（6），在設(shè)置attributes.width = ScreenUtils.getScreenWidth(context);使用了封裝的方法 目的是獲取屏幕的寬 可自行百度達(dá)到相同效果
<span style="font-size:14px;">public class KeyboardDialog extends Dialog {
private final Context context;
private final int money;
@Bind(R.id.rv_keyboard)//數(shù)字列表
RecyclerView rvKeyboard;
@Bind(R.id.iv_close_key)//關(guān)閉按鈕
ImageView ivCloseKey;
@Bind(R.id.tv_tip_money)//提現(xiàn)金額及手續(xù)費(fèi)
TextView tvTipMoney;
@Bind(R.id.tv_zero)//數(shù)字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;//數(shù)字列表
private String psw = "";//密碼
public KeyboardDialog(Context context, int money) {
super(context, R.style.keyboard_dialog);
this.context = context;
this.money = money;//要提現(xiàn)金額
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 + "");
}
//設(shè)置要提現(xiàn)的金額
tvTipMoney.setText("提現(xiàn)金額" + 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 + "");
}
};
}
/*
* 輸入密碼 先判斷現(xiàn)有密碼長度并設(shè)置顯示輸入了密碼 添加密碼到密碼字符串
* 后判斷輸入后密碼的長度 如果等于6則關(guān)閉并請(qǐng)求服務(wù)器
* */
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 請(qǐng)求服務(wù)器 密碼為 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://關(guān)閉dialog
dismiss();
break;
case R.id.tv_zero://輸入0
inputNum("0");
break;
case R.id.rl_undo://刪除輸入的密碼
deleteNum();
break;
}
}
/*
* 刪除密碼 根據(jù)已輸入的密碼長度將對(duì)應(yīng)的textview設(shè)置為空
* 并將密碼字符串最后一位切割掉
* */
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，設(shè)置彈框樣式
（1），在構(gòu)造方法中設(shè)置樣式 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;//要提現(xiàn)金額
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方法中設(shè)置彈框動(dòng)畫樣式
<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>
三，調(diào)用
調(diào)用很簡(jiǎn)單 一行就可以 需要返回?cái)?shù)據(jù)就需要自行添加了
<span style="font-size:14px;"> new KeyboardDialog(this, 1000).show();</span>
下面給大家推薦有關(guān)本站android方面的專題，大家可以參考下：
android 驗(yàn)證碼功能 //www.dhdzp.com/Special/899.htm
Android RecyclerView使用方法匯總 //www.dhdzp.com/Special/855.htm
Android ListView常見功能 //www.dhdzp.com/Special/850.htm
Android控件imageview詳細(xì)用法 //www.dhdzp.com/Special/726.htm
Android SDK基礎(chǔ)教程 //www.dhdzp.com/Special/637.htm
Android 開發(fā)中緩存知識(shí)匯總 //www.dhdzp.com/Special/622.htm
以上所述是小編給大家介紹的Android仿支付寶微信支付密碼界面彈窗封裝dialog，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
FlowLayout流式布局實(shí)現(xiàn)搜索清空歷史記錄
這篇文章主要為大家詳細(xì)介紹了FlowLayout流式布局實(shí)現(xiàn)搜索清空歷史記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Android 中對(duì)于圖片的內(nèi)存優(yōu)化方法
Android 中對(duì)于圖片的內(nèi)存優(yōu)化方法，需要的朋友可以參考一下2013-03-03
Android 自定義對(duì)話框 showSetPwdDialog
這篇文章主要介紹了Android 自定義對(duì)話框 showSetPwdDialog的相關(guān)資料,需要的朋友可以參考下2016-03-03
RecylerView實(shí)現(xiàn)流布局StaggeredGridLayoutManager使用詳解
這篇文章主要為大家詳細(xì)介紹了RecylerView實(shí)現(xiàn)流布局StaggeredGridLayoutManager使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
android使用Rxjava實(shí)現(xiàn)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了android使用Rxjava實(shí)現(xiàn)倒計(jì)時(shí)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
Android中ToggleButton開關(guān)狀態(tài)按鈕控件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android中ToggleButton開關(guān)狀態(tài)按鈕控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
音量控制鍵控制的音頻流(setVolumeControlStream)描述
當(dāng)開發(fā)多媒體應(yīng)用或者游戲應(yīng)用的時(shí)候，需要使用音量控制鍵來設(shè)置程序的音量大小,在Android系統(tǒng)中有多種音頻流,感興趣的朋友可以了解下2013-01-01
Android開發(fā)實(shí)現(xiàn)TextView超鏈接5種方式源碼實(shí)例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)TextView超鏈接5種方式源碼實(shí)例,需要的朋友可以參考下2020-03-03
本文主要介紹微信被舉報(bào)怎么解除?微信解除限制，這里整理了6種方法，有需要的小伙伴可以參考下2016-09-09
Android如何通過命令行操作Sqlite3數(shù)據(jù)庫的方法
這篇文章主要介紹了Android如何通過命令行操作Sqlite3數(shù)據(jù)庫的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06