Androi 自定義輸入支付密碼框

1.佈局中的使用

2.控制元件程式碼

@SuppressLint("CommitPrefEdits")
public class PayPopWindow implements OnDismissListener, OnClickListener {
    private PopupWindow popupWindow;
    private OnItemClickListener listener;
    private Context context;
    private String cate_id;//回撥的id
    private
 
 String strPassword;     //輸入的密碼
    private TextView[] tvList;      //用陣列儲存6個TextView，為什麼用陣列？
    //因為就6個輸入框不會變了，用陣列記憶體申請固定空間，比List省空間（自己認為）
    private GridView gridView;    //用GrideView佈局鍵盤，其實並不是真正的鍵盤，只是模擬鍵盤的功能
    private ArrayList<Map<String, String>> valueList;    //有人可能有疑問，為何這裡不用陣列了？
    //因為要用Adapter中適配，用陣列不能往adapter中填充
 


    private ImageView imgCancel;
    private TextView tvForget;
    private int currentIndex = -1;    //用於記錄當前輸入密碼格位置

    private LinearLayout line;
    private ImageView pic;
    private PayViewAdp adapter;
    private Intent intent;
    private View backgroundView;
    private AnimationDrawable animationDrawable;

    public
 
 PayPopWindow(final Context context, View backgroundView) {
        this.context = context;
        this.backgroundView = backgroundView;
        View view = LayoutInflater.from(context).inflate(R.layout.layout_popup_bottom, null);
        popupWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        //設定popwindow的動畫效果
        popupWindow.setAnimationStyle(R.style.popWindow_anim_style);
        popupWindow.setBackgroundDrawable(new ColorDrawable(Color.WHITE));
        popupWindow.setOnDismissListener(this);// 當popWindow消失時的監聽
        valueList = new ArrayList<Map<String, String>>();
        tvList = new TextView[6];
        setView();

        imgCancel = (ImageView) view.findViewById(R.id.img_cance);
        tvForget = (TextView) view.findViewById(R.id.tv_forgetPwd);

        line = (LinearLayout) view.findViewById(R.id.pay_lin);
        pic = (ImageView) view.findViewById(R.id.pay_status);

        tvList[0] = (TextView) view.findViewById(R.id.tv_pass1);
        tvList[1] = (TextView) view.findViewById(R.id.tv_pass2);
        tvList[2] = (TextView) view.findViewById(R.id.tv_pass3);
        tvList[3] = (TextView) view.findViewById(R.id.tv_pass4);
        tvList[4] = (TextView) view.findViewById(R.id.tv_pass5);
        tvList[5] = (TextView) view.findViewById(R.id.tv_pass6);

        gridView = (GridView) view.findViewById(R.id.gv_keybord);
        adapter = new PayViewAdp(context, valueList);
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                if (position < 11 && position != 9) {    //點選0~9按鈕
                    if (currentIndex >= -1 && currentIndex < 5) {      //判斷輸入位置————要小心陣列越界
                        tvList[++currentIndex].setText(valueList.get(position).get("name"));
                    }
                } else {
                    if (position == 11) {      //點選退格鍵
                        if (currentIndex - 1 >= -1) {      //判斷是否刪除完畢————要小心陣列越界
                            tvList[currentIndex--].setText("");
                        }
                    }
                }
            }
        });
        imgCancel.setOnClickListener(this);
        tvForget.setOnClickListener(this);
    }

    public interface OnItemClickListener {
        /**
         * 設定點選確認按鈕時監聽介面
         */
        void onClickOKPop();
    }

    /**
     * 設定監聽
     */
    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }


    //當popWindow消失時響應
    @Override
    public void onDismiss() {
        setBackgroundBlack(backgroundView, 1);
        popupWindow.dismiss();
    }


    /**
     * 彈窗顯示的位置
     */
    public void showAsDropDown(View position) {

        popupWindow.showAtLocation(position, Gravity.BOTTOM, 0, 0);
        popupWindow.setFocusable(true);
        popupWindow.setOutsideTouchable(true);
        popupWindow.update();
        setBackgroundBlack(backgroundView, 0);
    }


    /**
     * 控制背景變暗 0變暗 1變亮
     */
    private void setBackgroundBlack(View view, int what) {
        switch (what) {
            case 0:
                view.setVisibility(View.VISIBLE);
                break;
            case 1:
                view.setVisibility(View.GONE);
                break;
        }
    }

    public void StartAnima() {
        line.setVisibility(View.VISIBLE);
        gridView.setVisibility(View.GONE);
        // 播放逐幀動畫
        animationDrawable = (AnimationDrawable) pic.getDrawable();
        animationDrawable.start();

        int duration = 0;
        for (int i = 0; i < animationDrawable.getNumberOfFrames(); i++) {
            duration += animationDrawable.getDuration(i);
        }
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                //此處呼叫第二個動畫播放方法
                onDismiss();
//              ((Activity)context).finish();
            }
        }, duration);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_cance:
                onDismiss();
                break;
            case R.id.tv_forgetPwd:
                context.startActivity(new Intent(context, FindPayPswActivity.class));
                break;
            default:
                break;
        }
    }

    //設定監聽方法，在第6位輸入完成後觸發
    public void setOnFinishInput(final OnPasswordInputFinish pass) {
        tvList[5].addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (s.toString().length() == 1) {
                    strPassword = "";     //每次觸發都要先將strPassword置空，再重新獲取，避免由於輸入刪除再輸入造成混亂
                    for (int i = 0; i < 6; i++) {
                        strPassword += tvList[i].getText().toString().trim();
                    }
                    pass.inputFinish();    //介面中要實現的方法，完成密碼輸入完成後的響應邏輯
                }
            }
        });
    }

    /* 獲取輸入的密碼 */
    public String getStrPassword() {
        return strPassword;
    }


    private void setView() {
        /* 初始化按鈕上應該顯示的數字 */
        for (int i = 1; i < 13; i++) {
            Map<String, String> map = new HashMap<String, String>();
            if (i < 10) {
                map.put("name", String.valueOf(i));
            } else if (i == 10) {
                map.put("name", "");
            } else if (i == 11) {
                map.put("name", String.valueOf(0));
            } else if (i == 12) {
                map.put("name", "<");
            }
            valueList.add(map);
        }
    }
}


各種資源的引用:
 <!--支付彈出框-->
    <style name="popWindow_anim_style" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/pop_down_in</item>
        <item name="android:windowExitAnimation">@anim/pop_down_out</item>
    </style>

 佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/blackLight40"
    android:gravity="bottom"
    android:orientation="vertical">

    <View
        android:id="@+id/pay_view"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/userview" />

    <LinearLayout
        android:id="@+id/linear_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:padding="10dp">

            <LinearLayout
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/img_cance"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:background="@drawable/del" />
            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="請輸入交易密碼"
                android:textColor="@color/userblack"
                android:textSize="@dimen/sp_16" />
            <!-- 取消按鈕 -->

        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/userview" />

        <!-- 6位密碼框佈局，需要一個圓角邊框的shape作為layout的背景 -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/shape_input_area"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_pass1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#999999" />

            <TextView
                android:id="@+id/tv_pass2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#999999" />

            <TextView
                android:id="@+id/tv_pass3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#999999" />

            <TextView
                android:id="@+id/tv_pass4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#999999" />

            <TextView
                android:id="@+id/tv_pass5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#999999" />

            <TextView
                android:id="@+id/tv_pass6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:inputType="numberPassword"
                android:textSize="40sp" />
        </LinearLayout>

        <!-- 忘記密碼連結 -->

        <TextView
            android:id="@+id/tv_forgetPwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:text="忘記密碼？"
            android:textColor="#354EEF" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/userview" />

    <RelativeLayout
        android:id="@+id/pay_rel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/pay_lin"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/white"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">

            <ImageView
                android:id="@+id/pay_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tag_anim" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:gravity="center"
                android:text="支付成功"
                android:textColor="@color/textblack"
                android:textSize="20dp" />
        </LinearLayout>

        <!-- 輸入鍵盤 -->

        <GridView
            android:id="@+id/gv_keybord"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/usergray"
            android:horizontalSpacing="1px"
            android:numColumns="3"
            android:verticalSpacing="1px" />
    </RelativeLayout>

</LinearLayout>

3.JAVA中的使用

    /**
     * 提現輸入密碼操作
     */

    private void withdrawEnterPassword() {
        popWindow = new PayPopWindow(context, background); //background  一個在底層的空白View 
        popWindow.showAsDropDown(background);
        popWindow.setOnFinishInput(new OnPasswordInputFinish() {
            @Override
            public void inputFinish() {
                // popWindow.getStrPassword()  獲取輸入的支付密碼
            }
        });
    }


    //空白View的資源
    <View
        android:id="@+id/auw_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/blackLight40"
      />