自定义输入支付密码框

来源:互联网 发布:长隆集团 Java 编辑:程序博客网 时间:2024/05/01 12:42

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"      />