Android自定義View仿支付寶輸入六位密碼功能
跟選擇銀行卡界面類(lèi)似,也是用一個(gè)PopupWindow,不過(guò)輸入密碼界面是一個(gè)自定義view,當(dāng)輸入六位密碼完成后用回調(diào)在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="標(biāo)題" android:textColor="#333" android:textSize="18dp"/> </RelativeLayout> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#e5e5e5"/> <!-- 6位密碼框布局,需要一個(gè)圓角邊框的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設(shè)置隱藏密碼明文 textSize設(shè)置大一點(diǎn),否則“點(diǎn)”太小了,不美觀(guān) --> <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"/> <!-- 輸入鍵盤(pán) --> <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; // 用數(shù)組保存6個(gè)TextView private GridView mGridView; //支付鍵盤(pán)布局 private ArrayList<Map<String, String>> valueList; private ImageView mImageViewCancel; private TextView mTextViewForgetPsw; private int currentIndex = -1;// 用于記錄當(dāng)前輸入密碼格位置 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); //必須要,不然不顯示控件 } // 初始化按鈕上應(yīng)該顯示的數(shù)字 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); } /** * 設(shè)置監(jiān)聽(tīng)方法,在第6位輸入完后觸發(fā) */ 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 = ""; //每次觸發(fā)都要將mStringPassword置空再重新獲取,避免由于輸入刪除再輸入造成混亂 for (int i = 0; i < 6; i++) { mStringPassword += mTextViewPsw[i].getText().toString().trim(); } pass.inputFinish();//接口中要實(shí)現(xiàn)的方法,完成密碼輸入完成后的響應(yīng)邏輯 } } }); } /** * 獲取輸入的密碼 */ public String getPassword() { return mStringPassword; } /** * 返回取消支付的ImageView */ public ImageView getCancel() { return mImageViewCancel; } /** * 返回忘記密碼的TextView */ public TextView getForgetPsw() { return mTextViewForgetPsw; } /** * 返回標(biāo)題的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) { //點(diǎn)擊0-9按鈕 if (currentIndex >= -1 && currentIndex < 5) { //判斷輸入位置 mTextViewPsw[++currentIndex].setText(valueList.get(position).get("name")); } } else { if (position == 11) { //點(diǎn)擊退格鍵 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("選擇到賬銀行卡"); // 設(shè)置動(dòng)畫(huà) 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仿支付寶輸入六位密碼功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Spi機(jī)制在Android開(kāi)發(fā)的應(yīng)用示例詳解
這篇文章主要為大家介紹了Spi機(jī)制在Android開(kāi)發(fā)的應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Android實(shí)現(xiàn)圖像灰度化、線(xiàn)性灰度變化和二值化處理方法
這篇文章主要介紹了Android實(shí)現(xiàn)圖像灰度化、線(xiàn)性灰度變化和二值化處理方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Android RippleDrawable 水波紋/漣漪效果的實(shí)現(xiàn)
這篇文章主要介紹了Android RippleDrawable 水波紋/漣漪效果的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08android將Bitmap對(duì)象保存到SD卡中的方法
這篇文章主要介紹了android將Bitmap對(duì)象保存到SD卡中的方法,涉及Android讀寫(xiě)SD卡數(shù)據(jù)的方法,需要的朋友可以參考下2015-04-04Android實(shí)現(xiàn)自動(dòng)截圖腳本
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自動(dòng)截圖腳本,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Android基于AlarmManager實(shí)現(xiàn)用戶(hù)在線(xiàn)心跳功能示例
這篇文章主要介紹了Android基于AlarmManager實(shí)現(xiàn)用戶(hù)在線(xiàn)心跳功能,結(jié)合檢測(cè)用戶(hù)在線(xiàn)功能實(shí)例形式分析了AlarmManager全局定時(shí)器的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10Android實(shí)現(xiàn)水波紋效果實(shí)例代碼
大家好,本篇文章主要講的是Android實(shí)現(xiàn)水波紋效果實(shí)例代碼,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話(huà)記得收藏一下2022-02-02Kotlin構(gòu)造函數(shù)與成員變量和init代碼塊執(zhí)行順序詳細(xì)講解
這篇文章主要介紹了Kotlin構(gòu)造函數(shù)與成員變量和init代碼塊執(zhí)行順序,kotlin里面的構(gòu)造函數(shù)分為主構(gòu)造函數(shù)和次構(gòu)造函數(shù)。主構(gòu)造函數(shù)只能有一個(gè),次構(gòu)造函數(shù)個(gè)數(shù)不限制,可以有一個(gè)或者多個(gè)2022-11-11Android編程實(shí)現(xiàn)檢測(cè)當(dāng)前電源狀態(tài)的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)檢測(cè)當(dāng)前電源狀態(tài)的方法,涉及Android針對(duì)當(dāng)前電源的電量、容量、伏數(shù)、溫度等的檢測(cè)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11