Android自定义View仿支付宝输入六位密码功能_Android

2024-02-24 05:48
文章标签 android 自定义 功能 输入 密码 view 支付宝 六位

本文主要是介绍Android自定义View仿支付宝输入六位密码功能_Android，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

摘要： 本文讲的是Android自定义View仿支付宝输入六位密码功能_Android，跟选择银行卡界面类似，也是用一个PopupWindow,不过输入密码界面是一个自定义view，当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码。效果图如下：自定义view布局效果图及代码如下：
转发抽手机 云计算 大数据 建站 备案 文档 域名 whois查询 文集 主题

跟选择银行卡界面类似，也是用一个PopupWindow,不过输入密码界面是一个自定义view，当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码。效果图如下：

20161017101009829.gif

自定义view布局效果图及代码如下：

20161017101136852.gif

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_pop_window"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll_main_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fff"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<ImageView
android:id="@+id/iv_pay_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@drawable/back_white"/>
<TextView
android:id="@+id/tv_pay_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="标题"
android:textColor="#333"
android:textSize="18dp"/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#e5e5e5"/>
<!-- 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="20dp"
android:background="@drawable/shape_input_area"
android:orientation="horizontal">
<!-- inputType设置隐藏密码明文
textSize设置大一点，否则“点”太小了，不美观 -->
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#e5e5e5"/>
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#e5e5e5"/>
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#e5e5e5"/>
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#e5e5e5"/>
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#e5e5e5"/>
<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:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="32sp"/>
</LinearLayout>
<TextView
android:id="@+id/tv_pay_forgetPwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="15dp"
android:text="忘记密码？"
android:textColor="#354EEF"/>
<!-- 输入键盘 -->
<GridView
android:id="@+id/gv_keybord"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ll_main_password"
android:layout_marginTop="30dp"
android:horizontalSpacing="0.5dp"
android:background="#8E8E8E"
android:numColumns="3"
android:verticalSpacing="0.5dp"/>
</LinearLayout>
</RelativeLayout>

java代码

/**
* Created by zhpan on 2016/9/25.
*/
public class PayView extends RelativeLayout{
private MainActivity mContext;
private String mStringPassword; //输入的密码
private TextView[] mTextViewPsw; // 用数组保存6个TextView
private GridView mGridView; //支付键盘布局
private ArrayList<Map<String, String>> valueList;
private ImageView mImageViewCancel;
private TextView mTextViewForgetPsw;
private int currentIndex = -1;// 用于记录当前输入密码格位置
private View mView;
private TextView mTextViewTitle;
private TextView mTextViewDel;
public PayView(Context context) {
super(context, null);
}
public PayView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = (MainActivity) context;
mView = View.inflate(context, R.layout.pay_view, null);
valueList = new ArrayList<>();
mTextViewPsw = new TextView[6];
mImageViewCancel = (ImageView) mView.findViewById(R.id.iv_pay_back);
mTextViewPsw[0] = (TextView) mView.findViewById(R.id.tv_pass1);
mTextViewPsw[1] = (TextView) mView.findViewById(R.id.tv_pass2);
mTextViewPsw[2] = (TextView) mView.findViewById(R.id.tv_pass3);
mTextViewPsw[3] = (TextView) mView.findViewById(R.id.tv_pass4);
mTextViewPsw[4] = (TextView) mView.findViewById(R.id.tv_pass5);
mTextViewPsw[5] = (TextView) mView.findViewById(R.id.tv_pass6);
mGridView = (GridView) mView.findViewById(R.id.gv_keybord);
mTextViewTitle = (TextView) mView.findViewById(R.id.tv_pay_title);
mTextViewForgetPsw = (TextView) mView.findViewById(R.id.tv_pay_forgetPwd);
setView();
addView(mView); //必须要，不然不显示控件
}
// 初始化按钮上应该显示的数字
private void setView() {
for (int i = 1; i < 13; i++) {
Map<String, String> map = new HashMap<>();
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);
}
mGridView.setAdapter(adapter);
}
/**
* 设置监听方法，在第6位输入完后触发
*/
public void setOnFinishInput(final OnPasswordInputFinish pass) {
mTextViewPsw[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) {
mStringPassword = ""; //每次触发都要将mStringPassword置空再重新获取，避免由于输入删除再输入造成混乱
for (int i = 0; i < 6; i++) {
mStringPassword += mTextViewPsw[i].getText().toString().trim();
}
pass.inputFinish();//接口中要实现的方法，完成密码输入完成后的响应逻辑
}
}
});
}
/**
* 获取输入的密码
*/
public String getPassword() {
return mStringPassword;
}
/**
* 返回取消支付的ImageView
*/
public ImageView getCancel() {
return mImageViewCancel;
}
/**
* 返回忘记密码的TextView
*/
public TextView getForgetPsw() {
return mTextViewForgetPsw;
}
/**
* 返回标题的TextView
*/
public TextView getTitle() {
return mTextViewTitle;
}
// GridView的适配器
BaseAdapter adapter = new BaseAdapter() {
@Override
public int getCount() {
return valueList.size();
}
@Override
public Object getItem(int position) {
return valueList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = View.inflate(mContext, R.layout.item_pay_gride, null);
holder = new ViewHolder();
holder.btnKey = (TextView) convertView.findViewById(R.id.btn_keys);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.btnKey.setText(valueList.get(position).get("name"));
if (position == 9) {
holder.btnKey.setBackgroundResource(R.drawable.selector_key_del);
}
if (position == 11) {
mTextViewDel = holder.btnKey;
holder.btnKey.setBackgroundResource(R.drawable.selector_key_del);
}
holder.btnKey.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (position < 11 && currentIndex != 9&&position!=9) { //点击0-9按钮
if (currentIndex >= -1 && currentIndex < 5) { //判断输入位置
mTextViewPsw[++currentIndex].setText(valueList.get(position).get("name"));
}
} else {
if (position == 11) { //点击退格键
if (currentIndex - 1 >= -1) { // 判断是否删除完毕
mTextViewPsw[currentIndex--].setText("");
}
}
if(position==9){
}
}
}
});
return convertView;
}
};
static class ViewHolder {
public TextView btnKey;
}
}

PopupWindow中直接使用该控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.zhpan.mypayui.PayView
android:id="@+id/pv_pop_win"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

MainActivity中显示PupupWindow

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private TextView mTextView;
private PopupWindow mPopupWindow;
private View popView;
private PayView mPayView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setListener();
}
private void initView() {
mTextView = (TextView) findViewById(R.id.tv_main_pay);
}
private void setListener() {
mTextView.setOnClickListener(this);
}
// 显示弹窗
public void showPopupWindow() {
// 初始化弹窗
popView = View.inflate(this, R.layout.pop_window, null);
mPopupWindow = new PopupWindow(popView, ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
mPayView = (PayView) popView.findViewById(R.id.pv_pop_win);
mPayView.getTitle().setText("选择到账银行卡");
// 设置动画
mPopupWindow.setAnimationStyle(R.style.popwin_anim_style);
mPopupWindow.showAsDropDown(findViewById(R.id.ll_main), 0, 0);
mPopupWindow.setOutsideTouchable(true);
mPayView.setOnFinishInput(new OnPasswordInputFinish() {
@Override
public void inputFinish() {
Toast.makeText(MainActivity.this, mPayView.getPassword(), Toast.LENGTH_SHORT).show();
}
});
mPayView.getCancel().setOnClickListener(this);
mPayView.getForgetPsw().setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_main_pay:
showPopupWindow();
break;
case R.id.iv_pay_back:
mPopupWindow.dismiss();
break;
case R.id.tv_pay_forgetPwd:
Toast.makeText(MainActivity.this,"忘记密码",Toast.LENGTH_SHORT).show();
break;
}
}
}

以上所述是小编给大家介绍的Android自定义View仿支付宝输入六位密码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对云栖社区网站的支持！

以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android 自定义view android 自定义view、android自定义webview、android中自定义view、android的自定义view、android 自定义圆view，以便于您获取更多的相关知识。

这篇关于Android自定义View仿支付宝输入六位密码功能_Android的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/741132。

相关文章

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更
阅读更多...
使用EasyPoi快速导出Word文档功能的实现步骤

使用EasyPoi快速导出Word文档功能的实现步骤

《使用EasyPoi快速导出Word文档功能的实现步骤》EasyPoi是一个基于ApachePOI的开源Java工具库,旨在简化Excel和Word文档的操作,本文将详细介绍如何使用EasyPoi快速... 目录一、准备工作1、引入依赖二、准备好一个word模版文件三、编写导出方法的工具类四、在Export
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...
C#中通过Response.Headers设置自定义参数的代码示例

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》：本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型
阅读更多...
C#实现高性能拍照与水印添加功能完整方案

C#实现高性能拍照与水印添加功能完整方案

《C#实现高性能拍照与水印添加功能完整方案》在工业检测、质量追溯等应用场景中,经常需要对产品进行拍照并添加相关信息水印,本文将详细介绍如何使用C#实现一个高性能的拍照和水印添加功能,包含完整的代码实现... 目录1. 概述2. 功能架构设计3. 核心代码实现python3.1 主拍照方法3.2 安全HBIT
阅读更多...
录音功能在哪里? 电脑手机等设备打开录音功能的技巧

录音功能在哪里? 电脑手机等设备打开录音功能的技巧

《录音功能在哪里?电脑手机等设备打开录音功能的技巧》很多时候我们需要使用录音功能，电脑和手机这些常用设备怎么使用录音功能呢？下面我们就来看看详细的教程... 我们在会议讨论、采访记录、课堂学习、灵感创作、法律取证、重要对话时，都可能有录音需求，便于留存关键信息。下面分享一下如何在电脑端和手机端上找到录音功能
阅读更多...
Android实现图片浏览功能的示例详解(附带源码)

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文
阅读更多...
在Android中使用WebView在线查看PDF文件的方法示例

在Android中使用WebView在线查看PDF文件的方法示例

《在Android中使用WebView在线查看PDF文件的方法示例》在Android应用开发中,有时我们需要在客户端展示PDF文件,以便用户可以阅读或交互,：本文主要介绍在Android中使用We... 目录简介：1. WebView组件介绍2. 在androidManifest.XML中添加Interne
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2