實現效果圖：

實現流程：

1、定義6位密碼輸入View?

思路：要繪制邊框矩形，繪制分割線，繪制圓點。繪制圓的數目要與字符串的長度有關，添加或者刪除都要修改字符串，輸入6位后就是要關閉彈框，拿到密碼，做判斷工作了。

public class PasswordEditText extends AppCompatEditText { // 畫筆 private Paint mPaint; // 一個密碼所占的寬度 private int mPasswordItemWidth; // 密碼的個數默認為6位數 private int mPasswordNumber = 6; // 背景邊框顏色 private int mBgColor = Color.parseColor("#FFDDDDDD"); // 背景邊框大小 private int mBgSize = 1; // 背景邊框圓角大小 private int mBgCorner = 8; // 分割線的顏色 private int mDivisionLineColor = mBgColor; // 分割線的大小 private int mDivisionLineSize = 1; // 密碼圓點的顏色 private int mPasswordColor = Color.parseColor("#FF000000"); // 密碼圓點的半徑大小 private int mPasswordRadius = 6; public PasswordEditText(Context context) { this(context, null); } public PasswordEditText(Context context, AttributeSet attrs) { super(context, attrs); initAttributeSet(context, attrs); initPaint(); // 默認只能夠設置數字和字母 setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD); } /** * 初始化畫筆 */ private void initPaint() { mPaint = new Paint(); // 抗鋸齒 mPaint.setAntiAlias(true); // 防抖動 mPaint.setDither(true); } /** * 初始化屬性 */ private void initAttributeSet(Context context, AttributeSet attrs) { TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText); // 獲取大小 //分割線的大小 mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize)); //圓點的半徑 mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius)); //背景邊框大小 mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize)); //背景邊框圓角大小 mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, mBgCorner); // 獲取邊框顏色 mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor); // 分割線顏色 mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor); //圓點顏色 mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mPasswordColor); array.recycle(); } /** * dip 轉 px */ private float dip2px(int dip) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, getResources().getDisplayMetrics()); } @Override protected void onDraw(Canvas canvas) { // 一個密碼的寬度 [View寬度 - 邊框的寬度(背景邊框與分割線)]/6 mPasswordItemWidth = (getWidth() - 2 * mBgSize - (mPasswordNumber - 1) * mDivisionLineSize) / mPasswordNumber; // 畫背景 drawBg(canvas); // 畫分割線 drawDivisionLine(canvas); // 畫密碼 drawPassword(canvas); // 當前密碼是不是滿了 if (mListener != null) { String password = getText().toString().trim(); if (password.length() >= mPasswordNumber) { mListener.passwordFull(password); } } } /** * 繪制密碼 */ private void drawPassword(Canvas canvas) { // 密碼繪制是實心 mPaint.setStyle(Paint.Style.FILL); // 設置密碼的顏色 mPaint.setColor(mPasswordColor); // 獲取當前text String text = getText().toString().trim(); // 獲取密碼的長度 int passwordLength = text.length(); // 不斷的繪制密碼 for (int i = 0; i < passwordLength; i++) { int cy = getHeight() / 2; int cx = mBgSize + i * mPasswordItemWidth + i * mDivisionLineSize + mPasswordItemWidth / 2; canvas.drawCircle(cx, cy, mPasswordRadius, mPaint); } } /** * 繪制分割線 */ private void drawDivisionLine(Canvas canvas) { // 給畫筆設置大小 mPaint.setStrokeWidth(mDivisionLineSize); // 設置分割線的顏色 mPaint.setColor(mDivisionLineColor); //畫豎線，x值不變 for (int i = 0; i < mPasswordNumber - 1; i++) { int startX = mBgSize + (i + 1) * mPasswordItemWidth + i * mDivisionLineSize; int startY = mBgSize; int endX = startX; int endY = getHeight() - mBgSize; canvas.drawLine(startX, startY, endX, endY, mPaint); } } /** * 繪制背景 */ private void drawBg(Canvas canvas) { //背景矩形 RectF rect = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize); // 給畫筆設置大小 mPaint.setStrokeWidth(mBgSize); // 設置背景的顏色 mPaint.setColor(mBgColor); // 畫空心 mPaint.setStyle(Paint.Style.STROKE); // 繪制背景 drawRect , drawRoundRect , // 如果有圓角那么就繪制drawRoundRect，否則繪制drawRect if (mBgCorner == 0) { canvas.drawRect(rect, mPaint); } else { //rx：x方向上的圓角半徑。ry：y方向上的圓角半徑。 canvas.drawRoundRect(rect, mBgCorner, mBgCorner, mPaint); } } /** * 添加一個密碼 */ public void addPassword(String number) { // 把之前的密碼取出來 String password = getText().toString().trim(); if (password.length() >= mPasswordNumber) { // 密碼不能超過當前密碼個輸 return; } // 密碼疊加 password += number; setText(password); } /** * 刪除最后一位密碼 */ public void deleteLastPassword() { String password = getText().toString().trim(); // 判斷當前密碼是不是空 if (TextUtils.isEmpty(password)) { return; } password = password.substring(0, password.length() - 1); setText(password); } // 設置當前密碼是否已滿的接口回掉 private PasswordFullListener mListener; public void setOnPasswordFullListener(PasswordFullListener listener) { this.mListener = listener; } public void clear() { setText(""); } /** * 密碼已經全部填滿 */ public interface PasswordFullListener { public void passwordFull(String password); }}

2、鍵盤View

思路：主要是點擊數字后，拿到數字，在給PasswordEditText它。點擊刪除后，刪除PasswordEditText里面的一個字符。邏輯都是在Dialog里面控制的。public class CustomerKeyboard extends LinearLayout implements View.OnClickListener { public CustomerKeyboard(Context context) { this(context, null); } public CustomerKeyboard(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomerKeyboard(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 直接加載布局 inflate(context, R.layout.ui_customer_keyboard, this); setItemClickListener(this); } /** * 設置子View的ClickListener */ private void setItemClickListener(View view) { if (view instanceof ViewGroup) { ViewGroup viewGroup = (ViewGroup) view; int childCount = viewGroup.getChildCount(); for (int i = 0; i < childCount; i++) { //不斷的遞歸給里面所有的View設置OnClickListener View childView = viewGroup.getChildAt(i); setItemClickListener(childView); } } else { view.setOnClickListener(this); } } @Override public void onClick(View v) { if (v instanceof TextView) { if ("刪除".equals(((TextView) v).getText().toString().trim())) { // 點擊的是刪除 if (mListener != null) { mListener.delete(); } } else { // 點擊的是數字 String number = ((TextView) v).getText().toString().trim(); if (mListener != null) { mListener.click(number); } } } } // 設置點擊回掉監聽 private CustomerKeyboardClickListener mListener; public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) { this.mListener = listener; } /** * 點擊鍵盤的回調監聽 */ public interface CustomerKeyboardClickListener { public void click(String number); public void delete(); }}3、對話框/** * 支付密碼對話框 */public class PayPWDialogFragment extends DialogFragment implements CustomerKeyboard.CustomerKeyboardClickListener, PasswordEditText.PasswordFullListener { private PasswordEditText mPasswordEt; private OnCompleteListener mOnCompleteListener; private OnCancelListener mOnCancelListener; private static PayPWDialogFragment payPWDialogFragment; //寫一個靜態方法產生實例 public static PayPWDialogFragment newInstance() { if (payPWDialogFragment == null) { payPWDialogFragment = new PayPWDialogFragment(); } return payPWDialogFragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.pay_password_dialog_layout, container, false); mPasswordEt = (PasswordEditText) view.findViewById(R.id.password_et); CustomerKeyboard mCustomerKeyboard = view.findViewById(R.id.custom_key_board); mCustomerKeyboard.setOnCustomerKeyboardClickListener(this); mPasswordEt.setEnabled(false); mPasswordEt.setOnPasswordFullListener(this); return view; } @Override public void onCreate(Bundle savedInstanceState) { //此處可以設置Dialog的style等等 super.onCreate(savedInstanceState); } @Override public Dialog onCreateDialog(Bundle savedInstanceState) { Dialog dialog = new Dialog(getActivity(), R.style.CustomDialog); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setContentView(R.layout.pay_password_dialog_layout); dialog.setCanceledOnTouchOutside(false); /** * 設置寬度全屏，要設置在show的后面 */ WindowManager.LayoutParams layoutParams = dialog.getWindow().getAttributes(); layoutParams.gravity = Gravity.BOTTOM; layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT; layoutParams.height = WindowManager.LayoutParams.WRAP_CONTENT; dialog.getWindow().getDecorView().setPadding(0, 0, 0, 0); dialog.getWindow().setAttributes(layoutParams); return dialog; } @Override public void click(String number) { mPasswordEt.addPassword(number); } @Override public void delete() { mPasswordEt.deleteLastPassword(); } @Override public void passwordFull(String password) { if (mOnCompleteListener != null) mOnCompleteListener.onComplete(password); dismiss(); mPasswordEt.clear(); } public interface OnCompleteListener { void onComplete(String content); } public interface OnCancelListener { void onCancel(); } public PayPWDialogFragment setOnCompleteListener(OnCompleteListener listener) { this.mOnCompleteListener = listener; return this; } public PayPWDialogFragment setOnCancelListener(OnCancelListener listener) { this.mOnCancelListener = listener; return this; }}4、使用PayPWDialogFragment.newInstance().setOnCompleteListener(new PayPWDialogFragment.OnCompleteListener() { @Override public void onComplete(String content) { } }).show(getFragmentManager(), "payPWDialogFragment");配置： <style name="CustomDialog" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@nullitem> <item name="android:windowIsFloating">trueitem> <item name="android:windowContentOverlay">@nullitem> <item name="android:windowAnimationStyle">@android:style/Animation.Dialogitem> <item name="android:windowSoftInputMode">stateUnspecified|adjustPanitem>style>ui_customer_keyboard.xml<?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="#FFE6E6E6" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="1dp"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="1" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="2" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="3" android:textColor="#ff444444" android:textSize="30sp" /> LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="1dp"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="4" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="5" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="6" android:textColor="#ff444444" android:textSize="30sp" /> LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="1dp"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="7" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="8" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="9" android:textColor="#ff444444" android:textSize="30sp" /> LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="1dp" android:orientation="horizontal"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:gravity="center" android:padding="8dp" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="1dp" android:layout_weight="1" android:background="#FFFFFF" android:gravity="center" android:padding="8dp" android:text="0" android:textColor="#ff444444" android:textSize="30sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:gravity="center" android:padding="8dp" android:text="刪除" android:textColor="#ff444444" /> LinearLayout>LinearLayout>pay_password_dialog_layout.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:ver="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFFFF" android:orientation="vertical"> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="18dp" android:paddingBottom="18dp" android:text="請輸入支付密碼" android:textColor="#ff252525" android:textSize="16sp" /> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="#FFEEEEEE" /> <com.example.paybox.PasswordEditText android:id="@+id/password_et" android:layout_width="match_parent" android:layout_height="47dp" android:layout_marginTop="20dp" android:layout_marginStart="15dp" android:layout_marginEnd="15dp" android:layout_marginBottom="40dp" android:background="@null" /> <com.example.paybox.CustomerKeyboard android:id="@+id/custom_key_board" android:layout_width="match_parent" android:layout_height="wrap_content" />LinearLayout>到這里就結束啦。

往期精彩回顧：

• Android指紋識別詳解

• Android使用SurfaceView實現花瓣飄落效果

• Android實現清理緩存功能

• 換膚框架Android-skin-support的使用

• Android實現商城購物車功能

總結

以上是生活随笔為你收集整理的qt弹框输入密码_Android仿支付宝密码输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。