史上最全最好用的自定义交易支付密码及弹框

近些天项目中需要用的交易支付，实现第三方资产转账支付的功能，网上找了好多代码，但是都不是很完善，于是就自己写了一个

记下来就看看实现思路吧

1.总定义数字安全键盘，这里采用gridview的方式实现(为了提高安全性能，防止别人对系统键盘可以实行监听)

2.使用6个textview(用来获取输入的密码同时与自定义的键盘进行绑定) 和六个imageview(用来显示六个小圆点，因为本身的textview使用inputtype="textnumber"属性的话

生成的黑色圆点比较小，所以这里就采用的imageview这样可以加大小圆点的显示尺寸)

3.外部写一个输入完成回调的接口，同时提供一个抽象方法，供所有调用该接口的类或者界面使用

好了，实现思路基本就是这些了，接下来看看，代码实现吧

A.首先看一下自定义数字安全键盘的实现

/** * 防京东密码键盘 * * @author 张全乐 * @date 2017-6-24 11:06 */public class Keyboard extends RelativeLayout {    private Context context;    private CustomeGridView gvKeyboard;    private String[] key;    private OnClickKeyboardListener onClickKeyboardListener;    public Keyboard(Context context) {        this(context, null);    }    public Keyboard(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public Keyboard(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.context = context;    }//    @Override//    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {////        super.onMeasure(widthMeasureSpec, heightMeasureSpec);//    }    /**     * 初始化键盘的点击事件     */    private void initEvent() {        gvKeyboard.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                if (onClickKeyboardListener != null && position >= 0) {                    onClickKeyboardListener.onKeyClick(position, key[position]);                }            }        });    }    /**     * 初始化KeyboardView     */    private void initKeyboardView() {        View view = View.inflate(context, R.layout.view_keyboard, this);        gvKeyboard = (CustomeGridView) view.findViewById(R.id.gv_keyboard);        gvKeyboard.setAdapter(keyboardAdapter);        initEvent();    }    public interface OnClickKeyboardListener {        void onKeyClick(int position, String value);    }    /**     * 对外开放的方法     *     * @param onClickKeyboardListener     */    public void setOnClickKeyboardListener(OnClickKeyboardListener onClickKeyboardListener) {        this.onClickKeyboardListener = onClickKeyboardListener;    }    /**     * 设置键盘所显示的内容     *     * @param key     */    public void setKeyboardKeys(String[] key) {        this.key = key;        initKeyboardView();    }    private BaseAdapter keyboardAdapter = new BaseAdapter() {        private static final int KEY_ELEVEN = 11;        @Override        public int getCount() {            return key.length;        }        @Override        public Object getItem(int position) {            return key[position];        }        @Override        public long getItemId(int position) {            return position;        }        @Override        public int getViewTypeCount() {            return 2;        }        @Override        public int getItemViewType(int position) {            return (getItemId(position) == KEY_ELEVEN) ? 2 : 1;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            ViewHolder viewHolder = null;            if (convertView == null) {                if (getItemViewType(position) == 1) {                    //数字键                    convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard, parent, false);                    viewHolder = new ViewHolder(convertView);                } else {                    //删除键                    convertView = LayoutInflater.from(context).inflate(R.layout.item_grid_keyboard_delete, parent, false);                }            }            if (getItemViewType(position) == 1) {                viewHolder = (ViewHolder) convertView.getTag();                viewHolder.tvKey.setText(key[position]);                if(position == 9)                    viewHolder.tvKey.setBackgroundColor(Color.parseColor("#999999"));            }            return convertView;        }    };    /**     * ViewHolder,view缓存     */    static class ViewHolder {        private TextView tvKey;        public ViewHolder(View view) {            tvKey = (TextView) view.findViewById(R.id.tv_keyboard_keys);            view.setTag(this);        }    }}

自定义gridview(当然也可以不用自定义，具体根据需求定，我这里使用自定义是为了监听他的滑动方法，因为当gridview至于布局最底部，如果高度不够，系统默认的gridview就会进行上下滑动以全部显示出键盘，我这里控制了gridview也就是键盘滚动事件的禁止，静听使用
dispatchTouchEvent，返回为true便不可以滑动
)

public class CustomeGridView extends GridView {    public CustomeGridView(Context context) {        super(context);    }    public CustomeGridView(Context context, AttributeSet attrs) {        super(context, attrs);    }    /**     * 设置上下不滚动     */    @Override    public boolean dispatchTouchEvent(MotionEvent ev) {        if(ev.getAction() == MotionEvent.ACTION_MOVE){            return true;//true:禁止滚动        }        return super.dispatchTouchEvent(ev);    }}

密码框的xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:orientation="horizontal">    <LinearLayout        android:layout_width="match_parent"        android:orientation="horizontal"        android:gravity="center"        android:layout_height="wrap_content">        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:background="@drawable/circle_pay"            android:layout_marginRight="@dimen/dp_5"            >            <TextView                android:id="@+id/tv_pay1"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:maxLength="1"                android:inputType="numberPassword"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass1"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:background="@drawable/circle_pay"            android:layout_marginRight="@dimen/dp_5"            >            <TextView                android:id="@+id/tv_pay2"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:maxLength="1"                android:inputType="numberPassword"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass2"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:background="@drawable/circle_pay"            android:layout_marginRight="@dimen/dp_5"            >            <TextView                android:id="@+id/tv_pay3"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:maxLength="1"                android:inputType="numberPassword"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass3"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:background="@drawable/circle_pay"            android:layout_marginRight="@dimen/dp_5"            >            <TextView                android:id="@+id/tv_pay4"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:inputType="numberPassword"                android:maxLength="1"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass4"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:background="@drawable/circle_pay"            android:layout_marginRight="@dimen/dp_5"            >            <TextView                android:id="@+id/tv_pay5"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:inputType="numberPassword"                android:maxLength="1"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass5"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>        <FrameLayout            android:layout_width="@dimen/dp_40"            android:layout_height="@dimen/dp_40"            android:layout_marginRight="@dimen/dp_5"            android:background="@drawable/circle_pay"            >            <TextView                android:id="@+id/tv_pay6"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:inputType="numberPassword"                android:maxLength="1"                android:textSize="36sp" />            <ImageView                android:id="@+id/img_pass6"                android:layout_width="14dp"                android:layout_height="14dp"                android:layout_gravity="center"                android:src="@drawable/img_psw_bg"                android:visibility="invisible" />        </FrameLayout>    </LinearLayout></LinearLayout>
其他的xml我就不贴出来了，实现就这么多，希望能帮助到大家  弹框实现效果如下