高仿支付界面实现

2022-02-22 14:03:25 浏览数 (1)

效果

实现步骤

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

核心代码

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

代码语言：javascript复制
	//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);

编写按钮逻辑

代码语言：javascript复制
// 初始化按钮上应该显示的数字
		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("");
						}
					}
				}
			}
		});

设置触发事件

代码语言：javascript复制
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();
			}
		});

完整代码

代码语言：javascript复制
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;
	}
}

使用到的接口

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

自定义支付界面完成。

布局 继承 接口 事件

0 人点赞