Android自定义View仿支付宝输入六位密码功能_安卓软件开发教程-查字典教程网
Android自定义View仿支付宝输入六位密码功能
Android自定义View仿支付宝输入六位密码功能
发布时间:2016-12-28 来源:查字典编辑
摘要:跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中...

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

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

<"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"/> <> <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中直接使用该控件

<"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仿支付宝输入六位密码功能,希望对大家有所帮助,如果大家有任何疑问请给我们留言,小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新安卓软件开发学习
    热门安卓软件开发学习
    编程开发子分类