跟选择银行卡界面类似，也是用一个PopupWindow,不过输入密码界面是一个自定义view，当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码。效果图如下：
自定义view布局效果图及代码如下：
<?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仿支付宝输入六位密码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！