Android仿微信/支付寶密碼輸入框
在用到支付類app時(shí),都有一個(gè)簡密的輸入框。。開始實(shí)現(xiàn)的時(shí)候思路有點(diǎn)問題,后來到github上搜了下,找到了一個(gè)開源的庫看起來相當(dāng)?shù)呐1?,,來個(gè)地址先:
https://github.com/Jungerr/GridPasswordView
效果圖:
這個(gè)開源庫我研究了之后,又有了自己的一個(gè)思路:來個(gè)假的簡密框---底部放一個(gè)EditTextView,頂部放置6個(gè)ImageView的原點(diǎn),控制他們的顯隱來實(shí)現(xiàn)這個(gè)簡密寬
開發(fā)步驟:
1 布局
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/common_hm_vw" android:layout_height="50dp" > <LinearLayout android:baselineAligned="false" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/sdk2_simple_pwd_bg_" android:orientation="horizontal" > <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_one_img" style="@style/common_hm_vm" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_two_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_three_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_four_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_five_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> <RelativeLayout style="@style/common_ho_vm" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/sdk2_pwd_six_img" style="@style/common_hw_vw" android:layout_centerInParent="true" android:src="@drawable/sdk_circle_icon" android:visibility="invisible" /> <View android:layout_width="1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:background="@color/sdk_color_pwd_line" /> </RelativeLayout> </LinearLayout> <EditText android:id="@+id/sdk2_pwd_edit_simple" style="@style/common_hm_vm" android:background="@null" android:cursorVisible="false" android:inputType="numberPassword" android:maxLength="6" android:textColor="@color/sdk2_color_black" /> </FrameLayout>
2:自定義一個(gè)控件來處理輸入、刪除、顯隱等事件
package com.suning.mobile.paysdk.view; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import com.suning.mobile.paysdk.R; import com.suning.mobile.paysdk.utils.FunctionUtils; import com.suning.mobile.paysdk.utils.log.LogUtils; /** * * 〈一句話功能簡述〉<br> * 〈功能詳細(xì)描述〉 簡密輸入框 */ public class SecurityPasswordEditText extends LinearLayout { private EditText mEditText; private ImageView oneTextView; private ImageView twoTextView; private ImageView threeTextView; private ImageView fourTextView; private ImageView fiveTextView; private ImageView sixTextView; LayoutInflater inflater; ImageView[] imageViews; View contentView; public SecurityPasswordEditText(Context context, AttributeSet attrs) { super(context, attrs); inflater = LayoutInflater.from(context); builder = new StringBuilder(); initWidget(); } private void initWidget() { contentView = inflater.inflate(R.layout.sdk_simple_pwd_widget, null); mEditText = (EditText) contentView .findViewById(R.id.sdk_pwd_edit_simple); oneTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_one_img); twoTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_two_img); fourTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_four_img); fiveTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_five_img); sixTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_six_img); threeTextView = (ImageView) contentView .findViewById(R.id.sdk_pwd_three_img); LinearLayout.LayoutParams lParams = new LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); mEditText.addTextChangedListener(mTextWatcher); mEditText.setOnKeyListener(keyListener); imageViews = new ImageView[] { oneTextView, twoTextView, threeTextView, fourTextView, fiveTextView, sixTextView }; this.addView(contentView, lParams); } TextWatcher mTextWatcher = new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { if (s.toString().length() == ) { return; } if (builder.length() < ) { builder.append(s.toString()); setTextValue(); } s.delete(, s.length()); } }; OnKeyListener keyListener = new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_UP) { delTextValue(); return true; } return false; } }; private void setTextValue() { String str = builder.toString(); int len = str.length(); if (len <= ) { imageViews[len - ].setVisibility(View.VISIBLE); } if (len == ) { LogUtils.i("回調(diào)"); LogUtils.i("支付密碼" + str); if (mListener != null) { mListener.onNumCompleted(str); } LogUtils.i("jone", builder.toString()); FunctionUtils.hideSoftInputByView(getContext(), mEditText); } } private void delTextValue() { String str = builder.toString(); int len = str.length(); if (len == ) { return; } if (len > && len <= ) { builder.delete(len - , len); } imageViews[len - ].setVisibility(View.INVISIBLE); ; } StringBuilder builder; public interface SecurityEditCompleListener { public void onNumCompleted(String num); } public SecurityEditCompleListener mListener; public void setSecurityEditCompleListener( SecurityEditCompleListener mListener) { this.mListener = mListener; } public void clearSecurityEdit() { if (builder != null) { if (builder.length() == ) { builder.delete(, ); } } for (ImageView tv : imageViews) { tv.setVisibility(View.INVISIBLE); } } public EditText getSecurityEdit() { return this.mEditText; } }
這樣子其實(shí)也實(shí)現(xiàn)了簡密功能,但是這個(gè)比前面那個(gè)開源庫簡單了許多,當(dāng)然功能也沒有前面的那個(gè)強(qiáng)大。
以上內(nèi)容給大家介紹了Android仿微信/支付寶密碼輸入框的全部敘述,希望大家喜歡。
相關(guān)文章
android針對json數(shù)據(jù)解析方法實(shí)例分析
這篇文章主要介紹了android針對json數(shù)據(jù)解析方法,以實(shí)例形式較為詳細(xì)的分析了Android操作json格式數(shù)據(jù)的各種常用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10Android提高之自定義Menu(TabMenu)實(shí)現(xiàn)方法
這篇文章主要介紹了Android自定義Menu(TabMenu)實(shí)現(xiàn)方法,是非常實(shí)用的功能,需要的朋友可以參考下2014-08-08flutter自定義InheritedProvider實(shí)現(xiàn)狀態(tài)管理詳解
這篇文章主要為大家介紹了flutter自定義InheritedProvider實(shí)現(xiàn)狀態(tài)管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android 自定義view實(shí)現(xiàn)進(jìn)度條加載效果實(shí)例代碼
這篇文章主要介紹了Android 自定義view實(shí)現(xiàn)進(jìn)度條加載效果實(shí)例代碼,需要的朋友可以參考下2017-08-08Android編程判斷當(dāng)前應(yīng)用是否在后臺運(yùn)行的方法示例
這篇文章主要介紹了Android編程判斷當(dāng)前應(yīng)用是否在后臺運(yùn)行的方法,涉及Android針對當(dāng)前程序運(yùn)行狀態(tài)相關(guān)屬性操作與判定技巧,需要的朋友可以參考下2018-03-03使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動及滑動跳轉(zhuǎn)
今天實(shí)現(xiàn)了左右滑動,至于在最后一頁滑動跳轉(zhuǎn),這個(gè)也做了但是效果不是太好,也希望有實(shí)現(xiàn)的朋友能夠分享下2013-01-01android中用xml文件實(shí)現(xiàn)帶邊框背景效果的方法
這篇文章主要給大家介紹了在android中xml文件實(shí)現(xiàn)帶邊框背景效果的方法,其實(shí)實(shí)現(xiàn)的功能不是很難,僅作記錄,幫助需要的朋友們做個(gè)參考,需要的朋友們下面來一起看看吧。2017-06-06