自定义支付时的密码输入框是什么?自定义密码支付页面 精选
因项目要求,需要实现钱包支付功能。故需要自定义支付时的密码输入页面,主要涉及参考支付宝支付。经过短时间的折腾,小编算是弄出了大概样子,实际效果和实现大家可以参照着修改。当然,代码仍需要进一步完善才行。
定义密码输入框
这里小编自定义其宽度自适应高度从.xml形成,重写onDraw();方法,在这里面主要是实现的是密码输入框的显示,包括边框,分割线以及最主要的密码实心圆的绘制。当然我们需要监听编辑框的内容变化并通过调用invalidate();实时更新实心圆的数量和状态。其中,绘制的数量其实就是编辑框的文本长度,至于具体输入什么内容可以通过getText();获取就行了。
【资料图】
public class GridPwdEditText extends EditText {// 边框大小 (分割线/3) private float mBoardSize = 1.5f; // 圆角大小 private float mRadius = 15; // 可输入密码长度 public int mLength = 6; // 密码●的半径 private float mCircleRadius = 10; // 画笔 private Paint mPaint; public GridPwdEditText(Context context) { super(context); init(context); } public GridPwdEditText(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public GridPwdEditText(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } private void init(Context context) { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(Color.BLACK); InputFilter[] filters = {new InputFilter.LengthFilter(mLength)}; setFilters(filters); setMaxLines(1); setFocusable(false); setFocusableInTouchMode(false); setEnabled(false);// 设置不可编辑 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float width = getWidth() - mBoardSize; float height = getHeight() - mBoardSize; RectF rectf = new RectF(); rectf.left = mBoardSize; rectf.top = mBoardSize; rectf.right = width; rectf.bottom = height; canvas.drawColor(Color.WHITE); // 绘制边框以及分割线 mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mBoardSize / 3); for (int i = 1, k = mLength; i < k; i++) { float xPoint = width * i / k; canvas.drawLine(xPoint, 0, xPoint, height, mPaint); } mPaint.setStrokeWidth(mBoardSize); canvas.drawRoundRect(rectf, mRadius, mRadius, mPaint); // 绘制密码圆点 mPaint.setStyle(Paint.Style.FILL); for (int i = 1, k = getText().length(); i <= k; i++) {// k_已输入密码长度 // xPoint_分割平均点位置 - 最小间距(第一个符号/最后一个符号)- 符号本身大小/2 float xPoint = width * i / mLength - width / (mLength * 2) - mCircleRadius / 2 ; float yPoint = height / 2; canvas.drawCircle(xPoint, yPoint, mCircleRadius, mPaint); } } /** * @param pwd 更新当前输入的密码 */ public void updatePwd(String pwd){ this.setText(pwd); invalidate();// 更新密码显示● }}
密码输入键盘
除了密码显示框以外我们还得自定义一个数值键盘才行,小编看到有部分大手直接通过.xml中不对追加Button实现,而这里小编则是通过基础GridView来实现。该实现同样需要定义好每个Item项所代表的数值或者操作(比如说回退,这里回退按钮引用系统原声的icon,自行定义修改吧)。既然我们已经能拿到每个Item的点击了,那么我们需要将每次点击后的数值采集并组装成字符串,给到上面密码编辑框并更新密码显示。
public class GridPwdKeyBoard extends GridView {private Adapter mAdapter; private Context mContext; private int mFontSize = 14; private Integer[] keyNum = {1, 2, 3, 4, 5, 6, 7, 8, 9, -1, 0, -2}; // 当前输入的密码 public String mInputPwd = ""; // 最大输入长度 private int maxInput; public GridPwdKeyBoard(Context context) { super(context); this.mContext = context; initView(); } public GridPwdKeyBoard(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; initView(); } public GridPwdKeyBoard(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext = context; initView(); } /** * @param maxLength 最大输入长度 */ public void setMaxInput(int maxLength) { this.maxInput = maxLength; } private void initView() { ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); this.setLayoutParams(params); this.setNumColumns(AUTO_FIT); this.setStretchMode(STRETCH_COLUMN_WIDTH); this.setBackgroundColor(Color.WHITE); this.setNumColumns(3); this.setHorizontalSpacing(3); this.setVerticalSpacing(3); this.setOnItemClickListener(onItemClick); mAdapter = new Adapter(Arrays.asList(keyNum)); this.setAdapter(mAdapter); } public class Adapter extends BaseAdapter {Listinfos = new ArrayList<>(); public Adapter(Listinfos) { this.infos = infos; } @Override public int getCount() { return infos.size(); } @Override public Object getItem(int position) { return infos.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { TextView keyTv = new TextView(mContext); keyTv.setTextSize(DisplayUtil.dip2px(mContext, mFontSize)); keyTv.setTextColor(Color.rgb(60, 60, 60)); keyTv.setGravity(Gravity.CENTER); AbsListView.LayoutParams params = new AbsListView.LayoutParams( AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.MATCH_PARENT); keyTv.setLayoutParams(params); int numStr = infos.get(position); if (numStr > -1) {// 普通数字 keyTv.setText(String.valueOf(numStr)); } else if (numStr < -1) {// 回退按钮 params = new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT, getHeight() / 4); ImageView deleteImg = new ImageView(mContext); deleteImg.setBackgroundColor(Color.argb(80, 227, 232, 238)); deleteImg.setLayoutParams(params); deleteImg.setImageResource(android.R.drawable.ic_input_delete); deleteImg.setScaleType(ImageView.ScaleType.CENTER_INSIDE); return deleteImg; } else { keyTv.setBackgroundColor(Color.argb(80, 227, 232, 238)); keyTv.setOnClickListener(null); } return keyTv; } } AdapterView.OnItemClickListener onItemClick = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { int numStr = keyNum[position]; if (mInputPwd.length() < maxInput && numStr > -1) { mInputPwd += String.valueOf(numStr); } else if (mInputPwd.length() > 0 && numStr < -1) { // 点击回退按钮,替换最后一个字符为"" mInputPwd = mInputPwd.substring(0, mInputPwd.length() - 1); } if (mListener != null) { mListener.keyCall(mInputPwd, mInputPwd.length() == maxInput); } } }; public void setOnKeyBoardListener(OnKeyBoardListener listener) { this.mListener = listener; } private OnKeyBoardListener mListener; public interface OnKeyBoardListener {/** * @param inputStr 当前用户输入密码 * @param isOk true_输入密码已达到指定长度 */ void keyCall(String inputStr, boolean isOk); }}
.xml引用编辑框和键盘
上面我们已经把编辑框和键盘都设计好了,接下来就该根据个人项目需求组装起来了。这里小编仅根据支付宝的显示样式实现。引用的时候记得更改自定义视图的路径。
<自己的路径.gridpwdedittext android:id="@+id/pwd_view_edt" android:layout_width="match_parent" android:layout_height="50dp" android:layout_margin="12dp"><自己的路径.gridpwdkeyboard android:id="@+id/pwd_gv_keyboard" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="50dp">
Dialog对话框显示
好吧,实际上是继承了PopupWindow实现的对话框。源码带中小编也另外加上了密码输入状态的接口回调监听,为的就是能方便我们取得用户输入的密码或者是否点击了忘记密码的操作。如果有其他见解或者需求请自行完善。
public class GridPwdInputDialog extends PopupWindow {private ImageButton mCancleIvb; private GridPwdEditText mPwdEdt; private TextView mForgetTv; private GridPwdKeyBoard mKeyBoardGv; private Context mContext; public GridPwdInputDialog(Context context) { super(context); this.mContext = context; initView(); } private void initView() { LayoutInflater inflater = (LayoutInflater) mContext .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View conentView = inflater.inflate(R.layout.dialog_pwd_input, null); mCancleIvb = (ImageButton) conentView.findViewById(R.id.pwd_ivb_cancle); mPwdEdt = (GridPwdEditText) conentView.findViewById(R.id.pwd_view_edt); mForgetTv = (TextView) conentView.findViewById(R.id.pwd_tv_forget); mKeyBoardGv = (GridPwdKeyBoard) conentView.findViewById(R.id.pwd_gv_keyboard); mKeyBoardGv.setOnKeyBoardListener(onKeyBoard); mKeyBoardGv.setMaxInput(mPwdEdt.mLength); mCancleIvb.setOnClickListener(onClick); mForgetTv.setOnClickListener(onClick); // 设置SelectPicPopupWindow的View this.setContentView(conentView); // 设置SelectPicPopupWindow弹出窗体的宽 this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT); // 设置SelectPicPopupWindow弹出窗体的高 this.setHeight(ViewGroup.LayoutParams.MATCH_PARENT); // 设置SelectPicPopupWindow弹出窗体可点击 this.setFocusable(false); this.setOutsideTouchable(false); // 刷新状态 this.update(); // 实例化一个ColorDrawable颜色为半透明 ColorDrawable dw = new ColorDrawable(Color.argb(100, 0, 0, 0)); // 点back键和其他地方使其消失,设置了这个才能触发OnDismisslistener ,设置其他控件变化等操作 this.setBackgroundDrawable(dw); // 设置SelectPicPopupWindow弹出窗体动画效果 this.setAnimationStyle(android.R.style.Animation_Dialog); this.setOnDismissListener(onDismiss); } GridPwdKeyBoard.OnKeyBoardListener onKeyBoard = new GridPwdKeyBoard.OnKeyBoardListener() { @Override public void keyCall(String inputStr, boolean isOk) { mPwdEdt.updatePwd(inputStr); if (isOk && mListener != null) { mListener.inPutEnd(mKeyBoardGv.mInputPwd, 1); } } }; View.OnClickListener onClick = new View.OnClickListener() { @Override public void onClick(View v) { switch (v.getId()){ case R.id.pwd_ivb_cancle: dismiss(); break; case R.id.pwd_tv_forget: if (mListener != null) { mListener.inPutEnd(mKeyBoardGv.mInputPwd, 0); } break; } } }; OnDismissListener onDismiss = new OnDismissListener() { @Override public void onDismiss() { mKeyBoardGv.mInputPwd = ""; mPwdEdt.updatePwd(""); } }; public void setOnInPutListener(OnInPutdListener listener) { this.mListener = listener; } private OnInPutdListener mListener; public interface OnInPutdListener {/** * @param inputStr 当前用户输入密码 * @param code 0_输入密码状态,1_忘记密码 */ void inPutEnd(String inputStr, int code); }}
自定义支付密码输入Dialog引用
最后仅贴一下dialog的引用和设置监听。相信该demo还有很多不足的地方,毕竟小编很少接触自定义控件(组件)的实现,所以不管是理论上还是实现上都还有很多需要注意和完善的地方。如果对该自定义demo实现有见解请及时艾特小编吧。
private void showDialog(){ GridPwdInputDialog mDialog = new GridPwdInputDialog(this); mDialog.setOnInPutListener(onInPut); mDialog.showAtLocation(view, Gravity.BOTTOM, 0, 0);}GridPwdInputDialog.OnInPutdListener onInPut = new GridPwdInputDialog.OnInPutdListener() { @Override public void inPutEnd(String inputStr, int code) { switch (code) { case 0:break;// 忘记密码 case 1:break;// 完成密码输入 } }};
标签:
相关推荐:
最新新闻:
- xml格式详解 xml与操作系统的基础详解-天天时讯
- 西安哪些大专院校计算机专业好?西安的大学计算机专业排名
- pinterest是什么?pinterest打不开的解决方法
- 如何下载网页视频?怎么下载手机网页视频?
- win10系统jqs.exe是什么进程?jqs.exe进程描述及关闭方法
- repeater控件如何实现分页排序?repeater控件实现分页
- 出现此选项卡已经恢复是怎么回事?解决办法
- 怎么用win10制作iso镜像文件?win10制作iso镜像文件的步骤
- 桌面回收站不见了怎么办?Win10桌面的回收站不见了的解决方法
- oppor11什么时候上市的?oppo怎么强制恢复出厂设置?
- 自定义支付时的密码输入框是什么?自定义密码支付页面 精选
- Portraiture是什么软件?Portraiture注册码及使用方法
- 尼康D40X相机好用吗?如何调整尼康D40X相机参数?
- 电脑如何卸载ie9浏览器?卸载ie9浏览器的方法
- 世界快报:《哈利·波特》全新衍生游戏公布!魁地奇来啦
- 3dmax如何设置漫反射的颜色?3dmax如何设置漫反射的光泽度?
- 天天新动态:windows732bit开机蓝屏怎么办?windows73232bit蓝屏信息汇总
- win7如何格式化C盘?格式化C盘的方法步骤
- DNF称号宝珠有哪些?分享DNF称号宝珠大全
- oppo手机的语音助手在哪里打开?OPPO手机的语音助手介绍
- 如何在Android手机上格式化SD卡?这篇文章告诉你|观天下
- 百度一键Root应该怎么使用?百度一键root的七个步骤使用教程
- 小蚁运动相机是什么相机?手机APP还是必备的?:世界快消息
- 云服务器优势差别?三大主流云平台对比
- 域名前缀和域名后缀具体指什么?域名到底带不带www?
- 赛酷ocr破解版功能介绍 赛酷ocr怎么识别公式?
- 索伊冰箱质量怎么样?品牌知识简单介绍|全球看点
- 最资讯丨不会跑代码怎么办?python3的代码帮你解决
- 眼睛干涩、视力下降怎么办?显示器亮度调节软件推荐 世界播资讯
- 什么是跨境电商ERP系统?跨境业务贴心管家
- 【环球时快讯】如何获取qq空间图片的url?获取方法步骤
- 全球即时看!打印机打印状态提示“出错”是什么意思?怎么解决?
- 当前短讯!U盘无法打开怎么办?如何修复U盘丢失的数据?
- 如何在电脑桌面上添加文字提醒?教你一个简单实用的方法:天天简讯
- 高主频的N79和高能效的N82哪个更好用?两者评测 世界速讯
- 三星s5830i怎么刷机?三星s5830i详细刷机教程:当前热文
- 环球今热点:word怎么去除页眉横线?简单使用的方法
- 全球播报:巴法络路由器怎么样?巴法络无线路由器WHR-GN-HP评测
- 乔治:大桥是季后赛最被低估的球员 他的成星之路已搭建好 世界视点
- 美人相机怎么用?美人相机使用教程 每日看点
- 参数错误是什么意思?通常是哪些原因导致的?
- 雷柏V500S纯白色背光版机械键盘怎么样?雷柏V500S纯白色背光版鉴赏|热点聚焦
- 【技术】如何判定一个点是否在三角形内?判定方法介绍
- 搜苹果安装失败如何解决?问题原因及解决方法介绍
- 建站之星模板好吗?模板建站需要虚拟主机吗?
- 人民币符号怎么打?人民币符号的输入方法 即时焦点
- xda助手是什么?xda助手有什么作用?
- 联想电脑品牌机排名介绍:联想扬天T4900上榜:独家
- 离心过滤器工作原理是什么?离心过滤器的工作原理及使用方法
- win7待机时间在哪里设置?待机时间设置方法步骤
- 百度一键Root应该怎么使用?百度一键root的七个步骤使用教程
- 域名前缀和域名后缀具体指什么?域名到底带不带www?
- 赛酷ocr破解版功能介绍 赛酷ocr怎么识别公式?
- 参数错误是什么意思?通常是哪些原因导致的?
- 搜苹果安装失败如何解决?问题原因及解决方法介绍
- xda助手是什么?xda助手有什么作用?
- win7待机时间在哪里设置?待机时间设置方法步骤
- ios7发布时间是什么时候?ios7支持机型有哪些?
- 一天7个瓜!男星为户口陪睡男大佬,叔圈顶流潜规则女演员
- 曝Tango Gameworks目前有两个项目在开发 其中之一为JRPG|天天快资讯
- 大熊猫暖暖被饲养员用竹竿打 园方回应:永不允许此人养熊猫
- 焦点消息!被疯狂“种草”的布艺清洗机到底“香不香”?
- 马来西亚国旗的含义(马来西亚国旗)-世界视讯
- 《幽灵线:东京》XSX版的表现比PS5更差_环球关注
- 天天通讯!光环系列主创加盟网飞游戏将打造多平台3A游戏
- 当前要闻:天力锂能(301152):4月17日北向资金减持4.81万股
- 美的电水壶不到1折39元|环球新消息
- 航嘉携高端硬件装备亮相武汉“这里潮好玩"嘉年华
- 报道:华为小羊皮手机壳11.2元
- 宁美3060主机5619元
- 乔思伯超美小机箱特价仅需199元了
- 天天热资讯!曝阿加莎《波洛:伦敦案》9月30日发售 或于明日公布
- 任天堂状告欧洲网盘提供盗版游戏下载获赔44万欧元:今日热搜
- 《哈利波特:魁地奇冠军》面向主机和PC公布
- CyberConnect2蒙特利尔工作室将于7月底关闭