android仿支付宝输入支付密码详细介绍

一、自定义六位密码框输入

效果图如下：

public class InputSixPwdView extends TextView {

    private Paint borderPaint;

    private Paint passwordPaint;

    private int passwordLength = 6;

    private int borderWidth = 8;

    private int passwordWidth = 16;

    private int textLength;

    private OnFinishListener onFinishListener;

    private Stack pwdQuee = new Stack();

    public InputSixPwdView(Context context) {

        super(context);

        // TODO Auto-generated constructor stub

    }

    public InputSixPwdView(Context context, AttributeSet attr) {

        super(context, attr);

        init(context, attr);

    }

    private void init(Context context, AttributeSet attr) {

        borderPaint = new Paint();

        borderPaint.setAntiAlias(true);

        borderPaint.setColor(getResources().getColor(R.color.txtcolor_light));

        borderPaint.setStrokeWidth(borderWidth);

        borderPaint.setStyle(Paint.Style.FILL);

        passwordPaint = new Paint();

        passwordPaint.setAntiAlias(true);

        passwordPaint.setColor(getResources().getColor(R.color.txtcolor));

        passwordPaint.setStrokeWidth(passwordWidth);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        // TODO Auto-generated method stub

        super.onDraw(canvas);

        int height = getHeight();

        int width = getWidth();

        //画边框

        RectF rect = new RectF(0, 0, width, height);

        borderPaint.setColor(getResources().getColor(R.color.txtcolor_light));

        canvas.drawRoundRect(rect, 12, 12, borderPaint);

        //画内容区域

        RectF rectContent = new RectF(rect.left + 4, rect.top + 4, rect.right - 4, rect.bottom - 4);

        borderPaint.setColor(getResources().getColor(R.color.main_background));

        canvas.drawRoundRect(rectContent, 10, 10, borderPaint);

        //画分割线:分割线数量比密码数少1

        borderPaint.setColor(getResources().getColor(R.color.bg_ed));

        borderPaint.setStrokeWidth(4);

        for (int i = 1; i < passwordLength; i++) {

            float x = width * i / passwordLength;

            canvas.drawLine(x, 17, x, height - 17, borderPaint);

        }

        //画密码内容

        float px, py = height / 2;

        float halfWidth = width / passwordLength / 2;

        for (int i = 0; i < textLength; i++) {

            px = width * i / passwordLength + halfWidth;

            canvas.drawCircle(px, py, passwordWidth, passwordPaint);

        }

    }

    public void addPwd(String tpwd) {

        textLength = pwdQuee.size();

        if (textLength < 6) {

            pwdQuee.add(tpwd);

            textLength = pwdQuee.size();

            if (textLength == 6) {

                StringBuffer sb = new StringBuffer();

                for (String s : pwdQuee) {

                    sb.append(s);

                }

                onFinishListener.setOnPasswordFinished(sb.toString());

            }

            postInvalidate();

        }

    }

    public void reSetView() {

        if (null != pwdQuee) {

            pwdQuee.clear();

        }

        textLength = 0;

        invalidate();

    }

    public void deletePwd() {

        if (!pwdQuee.isEmpty()) {

            pwdQuee.pop();

            textLength = pwdQuee.size();

            if (textLength < 7) {

                invalidate();

            }

        }

    }

    public void reset() {

        if (!pwdQuee.isEmpty()) {

            pwdQuee.clear();

        }

        postInvalidate();

    }

    public void setOnFinishListener(OnFinishListener onFinishListener) {

        this.onFinishListener = onFinishListener;

    }

    public interface OnFinishListener {

        void setOnPasswordFinished(String pwd);

    }

}

二、界面布局

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@color/main_background"

    android:orientation="vertical">

   

        android:id="@+id/activity_setpaypassword_tv"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="@dimen/y48"

        android:layout_marginTop="@dimen/y60"

        android:gravity="center"

        android:text="请输入新的支付密码"

        android:textColor="@color/txtcolor"

        android:textSize="20sp" />

   

        android:id="@+id/activity_forgetpaypassword_view"

        android:layout_width="match_parent"

        android:layout_height="@dimen/y86"

        android:layout_marginLeft="@dimen/x48"

        android:layout_marginRight="@dimen/x48" />

   

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1" />

   

        android:id="@+id/activity_forgetpaypassword_gv"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#5C5C5C"

        android:divider="@color/clear"

        android:horizontalSpacing="@dimen/x12"

        android:numColumns="3"

        android:paddingBottom="@dimen/y6"

        android:paddingLeft="@dimen/x12"

        android:paddingRight="@dimen/x12"

        android:paddingTop="@dimen/y12"

        android:verticalSpacing="@dimen/y14" />

三、activity

public class SetPayPasswordActivity extends AppBaseActivity {

    @BindView(R.id.activity_setpaypassword_tv)

    TextView tvSetPayPassword;

    @BindView(R.id.activity_forgetpaypassword_view)

    InputSixPwdView mInputSixPwdView;

    @BindView(R.id.activity_forgetpaypassword_gv)

    GridView mGridView;

    private InputPwdViewAdapter mAdapter;

    private int isType;//0设置新密码1输入原密码

    public static final String SETPAYPASSWORDSTR = "SetPayPassword_str";

    @Override

    protected void setinitVariable() {

        isType = getIntent().getIntExtra(SETPAYPASSWORDSTR, 0);

    }

    @Override

    protected void setTitleViews() {

        setTitle(getString(R.string.paypassword_titlestr));

        dismissTopLine();

    }

    @Override

    protected Object getLayout() {

        return R.layout.activity_setpaypassword_layout;

    }

    @Override

    protected void setupDataForPage() {

        if (isType == 1) {//输入原密码

            tvSetPayPassword.setText("请输入原支付密码");

        } else {//设置新密码

            tvSetPayPassword.setText("请输入新的支付密码");

        }

        mInputSixPwdView.reSetView();

        mAdapter = new InputPwdViewAdapter(mContext);

        mGridView.setAdapter(mAdapter);

        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView parent, View view, int position, long id) {

                if (position == 11) {//点击删除键

                    mInputSixPwdView.deletePwd();

                } else if (position == 10) {

                    mInputSixPwdView.addPwd("0");

                } else if (position == 9) {

                } else {

                    mInputSixPwdView.addPwd(String.valueOf(++position));

                }

            }

        });

        mInputSixPwdView.setOnFinishListener(new InputSixPwdView.OnFinishListener() {

            @Override

            public void setOnPasswordFinished(String pwd) {

                mInputSixPwdView.reSetView();

                if (isType == 1) {//输入原密码

                    checkPayPassword(pwd);//进行原密码校验

                } else {//设置新密码

                    Intent mIntent = new Intent(SetPayPasswordActivity.this, SureSetPayPasswordActivity.class);

                    mIntent.putExtra(SureSetPayPasswordActivity.FIRSTPAYPASSWORD, pwd);

                    startActivityForResult(mIntent, 0);

                }

            }

        });

    }

    /**

    * 支付密码校验

    */

    private void checkPayPassword(final String password) {

        //校验逻辑

}

四、键盘Adapter

public class InputPwdViewAdapter extends BaseAdapter {

    private Context mContext;

    public InputPwdViewAdapter(Context context) {

        this.mContext = context;

    }

    @Override

    public int getCount() {

        return 12;

    }

    @Override

    public Object getItem(int i) {

        return null;

    }

    @Override

    public long getItemId(int i) {

        return 0;

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        final Holder holder;

        if (convertView == null) {

            convertView = View.inflate(mContext, R.layout.adapter_inputpwdview_item_layout, null);

            holder = new Holder(convertView);

            convertView.setTag(holder);

        } else {

            holder = (Holder) convertView.getTag();

        }

        convertView.setBackgroundResource(R.drawable.bg_black_selector);

        holder.tvNum.setVisibility(View.VISIBLE);

        holder.tvNum.setText((position + 1) + "");

        holder.tvABC.setVisibility(View.VISIBLE);

        holder.tvDelete.setVisibility(View.GONE);

        switch (position) {

            case 0:

                holder.tvABC.setVisibility(View.INVISIBLE);

                break;

            case 1:

                holder.tvABC.setText("ABC");

                break;

            case 2:

                holder.tvABC.setText("DEF");

                break;

            case 3:

                holder.tvABC.setText("GHI");

                break;

            case 4:

                holder.tvABC.setText("JKL");

                break;

            case 5:

                holder.tvABC.setText("MNO");

                break;

            case 6:

                holder.tvABC.setText("PQRS");

                break;

            case 7:

                holder.tvABC.setText("TUV");

                break;

            case 8:

                holder.tvABC.setText("WXYZ");

                break;

            case 9:

                holder.tvNum.setVisibility(View.GONE);

                holder.tvABC.setVisibility(View.GONE);

                holder.tvDelete.setVisibility(View.GONE);

                break;

            case 10:

                holder.tvNum.setVisibility(View.VISIBLE);

                holder.tvNum.setText("0");

                holder.tvABC.setText("");

                holder.tvDelete.setVisibility(View.GONE);

                break;

            case 11:

                holder.tvNum.setText("");

                holder.tvABC.setText("");

                holder.tvDelete.setVisibility(View.VISIBLE);

                convertView.setBackgroundColor(mContext.getResources().getColor(R.color.clear));

                break;

            default:

                break;

        }

        return convertView;

    }

    class Holder {

        TextView tvNum, tvABC, tvDelete;

        Holder(View view) {

            tvNum = (TextView) view.findViewById(R.id.adapter_inputpwd_tv);

            tvABC = (TextView) view.findViewById(R.id.adapter_inputpwd_abc);

            tvDelete = (TextView) view.findViewById(R.id.adapter_inputpwd_delete);

        }

    }

}

五、键盘adapter布局

    android:layout_width="match_parent"

    android:layout_height="@dimen/y100"

    android:elevation="2dp"

    android:background="@drawable/bg_black_selector">

   

        android:id="@+id/adapter_inputpwd_delete"

        android:layout_width="@dimen/x46"

        android:layout_height="@dimen/y36"

        android:layout_centerInParent="true"

        android:background="@mipmap/icon_delete_inputpwd"

        android:visibility="gone" />

   

        android:id="@+id/adapter_inputpwd_tv"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center_horizontal"

        android:text="1"

        android:textColor="@color/white"

        android:textSize="25sp" />

   

        android:id="@+id/adapter_inputpwd_abc"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="@dimen/y56"

        android:gravity="center_horizontal"

        android:text="ABC"

        android:textColor="@color/white"

        android:textSize="10sp" />

   

   

   

   

   

#9B9797

#272121

#FCFCFC