android 實現密碼輸入彈窗

前言部分

最近有點忙好久沒寫啥東西了,正好項目中用到了一個輸入密碼的彈窗,順便單獨記錄下,防止以後需要用. 資源我放在文末,有需要的可下載,或者留郵箱

內容部分

內容比較簡單:
主要分爲幾個步驟,如下:

1. 實現dialog的部分內容.
   • 這裏注意一下就是dialog的顯示問題,比如,你需要設置一個主題,否則dialog顯示的可能會有縫隙;還有就是你需要設置dialog的佈局屬性來保證dialog不是一個變形的彈窗.
   • 代碼如下:

val window = window
        // 設置顯示動畫
        val wl = window!!.attributes
        setCanceledOnTouchOutside(true)
        window.setWindowAnimations(R.style.main_menu_animstyle)
        wl.x = 0
        wl.y = mContext.windowManager.defaultDisplay.height
        // 以下這兩句是爲了保證按鈕可以水平滿屏
        wl.width = ViewGroup.LayoutParams.MATCH_PARENT
        wl.height = ViewGroup.LayoutParams.WRAP_CONTENT
        // 設置顯示位置
        onWindowAttributesChanged(wl)

以上基本上就差不多,其他問題應該都比較好解決.

2. 密碼輸入的佈局

   這裏我使用是的GridLayout(表格佈局)佈局,因爲我們要使用的就是表格的樣式,但是因爲使用了只用21版本以上才能使用的api,所以如果你的app需要兼容到21以下.可以替換成其他佈局,比如線性佈局.(還有就我覺得直接自定義view會更好,因爲以前我繪製過影院選座的組件.感覺這個就是隻繪製座位和點擊時間那部分代碼.)
   代碼如下:

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/ll_password_number_result"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="@color/white"
            android:orientation="horizontal">

            <TextView style="@style/password_number" />

            <TextView style="@style/password_number" />

            <TextView style="@style/password_number" />

            <TextView style="@style/password_number" />

            <TextView style="@style/password_number" />

            <TextView style="@style/password_number" />
        </LinearLayout>
        <!--鍵盤部分-->
        <GridLayout
            android:id="@+id/gl_password_numbers"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:columnCount="3"
            android:orientation="horizontal"
            android:rowCount="4">

            <TextView
                style="@style/password_btn"
                android:text="1" />

            <TextView
                style="@style/password_btn"
                android:text="2" />

            <TextView
                style="@style/password_btn"
                android:text="3" />


            <TextView
                style="@style/password_btn"
                android:text="4" />

            <TextView
                style="@style/password_btn"
                android:text="5" />

            <TextView
                style="@style/password_btn"
                android:text="6" />

            <TextView
                style="@style/password_btn"
                android:text="7" />

            <TextView
                style="@style/password_btn"
                android:text="8" />

            <TextView
                style="@style/password_btn"
                android:text="9" />

            <TextView
                style="@style/password_btn"
                android:enabled="false"
                android:text="      " />

            <TextView
                style="@style/password_btn"
                android:text="   0   " />

            <TextView
                style="@style/password_btn"
                android:text="delete" />
        </GridLayout>
    </LinearLayout>


</LinearLayout>

代碼簡單明瞭.

3. 密碼操作的部分,主要是一些判斷邏輯,直接貼出來代碼吧,

  fun setData() {
        for (i in 0 until gl_password_numbers.childCount) {
            gl_password_numbers.getChildAt(i).setOnClickListener { v ->
                if (v is TextView) {
                    val s = v.text.toString().trim { it <= ' ' }
                    if (s.length == 1) {
                        if (count < 6) {
                            val childAt = ll_password_number_result.getChildAt(count) as TextView
                            childAt.text = s
                            passwordList.add(s)
                            if (count == 5) {
                                completeListener.onCompleteListener(passwordList)
                            }
                            count++
                        }

                    } else {
                        if (count > 0) {
                            count--
                            val childAt = ll_password_number_result.getChildAt(count) as TextView
                            childAt.text = ""
                            passwordList.removeAt(count)
                        }
                    }
                }

            }
        }

    }

4. 加入回調

   回調就很簡單了,把拿到的數字返回回去就可以了.
   . 沒了

內容比較簡單有需要的直接拿去改一改應該就可以了.
demo下載地址

結束部分

由於在忙新的商城項目,最近也沒怎麼看東西,目前計劃如果有時間會學習flutter相關.