高仿支付界面实现

最新推荐文章于 2024-06-15 14:06:44 发布

对话~

最新推荐文章于 2024-06-15 14:06:44 发布

阅读量1w

点赞数 1

分类专栏：安卓文章标签： Android 支付 Android支付界面 Android自定义布局高仿支付界面

本文链接：https://blog.csdn.net/duihuapixiu/article/details/102981817

版权

安卓专栏收录该内容

21 篇文章 2 订阅

订阅专栏

效果

在这里插入图片描述

实现步骤

绘制支付界面布局
传递支付界面事件

核心代码

创建自定义布局继承 RelativeLayout绘制界面

	//view布局
		View view = View.inflate(context, R.layout.layout_popup_bottom, null);
		valueList = new ArrayList<Map<String, String>>();
		tvList = new TextView[6];
		//初始化控件
		tvCancel=(ImageView) view.findViewById(R.id.tvCancel);
		tvForget = (TextView) view.findViewById(R.id.tv_forgetPwd);
		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);

编写按钮逻辑

// 初始化按钮上应该显示的数字
		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 == 12) {
				map.put("name", "<<-");
			} else if (i == 11) {
				map.put("name", String.valueOf(0));
			}
			valueList.add(map);
		}
		//为键盘gridview设置适配器
		gridView.setAdapter(adapter);
		//为键盘按键添加点击事件
		gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// 点击0~9按钮
				if (position < 11 && position != 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("");
						}
					}
				}
			}
		});

设置触发事件

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();
				}
			}
		});
		tvCancel.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//点击取消调用接口
				pass.outfo();
			}
		});
		tvForget.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//单击忘记密码调用接口
				pass.forgetPwd();
			}
		});

完整代码

public class MyView extends RelativeLayout {
	Context context;
	private String strPassword; // 输入的密码
	private TextView[] tvList; // 就6个输入框不会变了，用数组内存申请固定空间，比List省空间
	private GridView gridView; // 用GrideView布局键盘，其实并不是真正的键盘，只是模拟键盘的功能
	private ArrayList<Map<String, String>> valueList; // 要用Adapter中适配，用数组不能往adapter中填充
	private ImageView tvCancel;//取消按钮
	private TextView tvForget;//忘记密码按钮
	private int currentIndex = -1; // 用于记录当前输入密码格位置

	public MyView(Context context) {
		this(context, null);
	}

	public MyView(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context = context;
		//view布局
		View view = View.inflate(context, R.layout.layout_popup_bottom, null);
		valueList = new ArrayList<Map<String, String>>();
		tvList = new TextView[6];
		//初始化控件
		tvCancel=(ImageView) view.findViewById(R.id.tvCancel);
		tvForget = (TextView) view.findViewById(R.id.tv_forgetPwd);
		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);
		//设置键盘显示按钮到集合
		setView();
		// 必须要，不然不显示控件
		addView(view);
	}
    //设置按钮显示内容
	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 == 12) {
				map.put("name", "<<-");
			} else if (i == 11) {
				map.put("name", String.valueOf(0));
			}
			valueList.add(map);
		}
		//为键盘gridview设置适配器
		gridView.setAdapter(adapter);
		//为键盘按键添加点击事件
		gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// 点击0~9按钮
				if (position < 11 && position != 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("");
						}
					}
				}
			}
		});
	}

	// 设置监听方法，在第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();
				}
			}
		});
		tvCancel.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//点击取消调用接口
				pass.outfo();
			}
		});
		tvForget.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//单击忘记密码调用接口
				pass.forgetPwd();
			}
		});
	}

	//获取输入的密码
	public String getStrPassword() {
		return strPassword;
	}
	// GrideView的适配器
	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(int position, View convertView, ViewGroup parent) {
			ViewHolder viewHolder;
			if (convertView == null) {
				//装载数字键盘布局
				convertView = View.inflate(context, R.layout.item_gride, null);
				viewHolder = new ViewHolder();
				//初始化键盘按钮
				viewHolder.btnKey = (TextView) convertView
						.findViewById(R.id.btn_keys);
				convertView.setTag(viewHolder);
			} else {
				viewHolder = (ViewHolder) convertView.getTag();
			}
			//设置按钮显示数字
			viewHolder.btnKey.setText(valueList.get(position).get("name"));
			if (position == 9) {
				//设置按钮背景
				viewHolder.btnKey
						.setBackgroundResource(R.drawable.selector_key_del);
                //设置按钮不可点击
				viewHolder.btnKey.setEnabled(false);
			}
			if (position == 11) {
				//设置按钮背景
				viewHolder.btnKey
						.setBackgroundResource(R.drawable.selector_key_del);
			}
			return convertView;
		}
	};
	// 存放控件
	public final class ViewHolder {
		public TextView btnKey;
	}
}

使用到的接口

//自定义接口
public interface OnPasswordInputFinish {
	//添加密码输入完成的接口
	void inputFinish();
	//取消支付接口
	void outfo();
	//忘记密码接口
	void forgetPwd();
}

自定义支付界面完成。

对话~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高仿支付界面实现

效果实现步骤绘制支付界面布局传递支付界面事件核心代码创建自定义布局继承 RelativeLayout绘制界面 //view布局 View view = View.inflate(context, R.layout.layout_popup_bottom, null); valueList = new ArrayList<Map<String, Strin...
复制链接

扫一扫