Android 驗證碼/密碼 輸入框+自定義數(shù)字鍵盤

業(yè)務(wù)分析:

1.每個數(shù)字之間是有豎線隔開的,并不是一個連續(xù)的輸入控件

2. 5個驗證碼數(shù)字輸入的地方?jīng)]有光標(biāo)閃爍陷遮,也就是5個格子其實不是EditText袱箱。

3. 輸入數(shù)字之后穴店,繼續(xù)輸入(未滿5個的時候)霞溪、或者刪除回退侧漓,都應(yīng)該從當(dāng)前最右側(cè)的位置開始操作咒劲。

4. 點擊5個格子的地方继薛,需要彈起軟鍵盤

設(shè)計思路:

1.一個EditText放在FrameLayout中盖腿,EditText的目的是用來實際獲取用戶在輸入框中輸入的內(nèi)容爽待。

2.EditText被 LinearLayout覆蓋,里面是5個TextView翩腐,將用來映射顯示EditText的值鸟款。

3.用戶實際上使用輸入框輸入數(shù)字的時候,EditText是監(jiān)聽到輸入的茂卦,同時也能輸入數(shù)字在EditText身上何什,只不過被蓋住了,看不到等龙。

4.拿到EditText輸入的內(nèi)容处渣,.處理好切割EditText已輸入的文本,分別在5個TextView上顯示蛛砰。

5.LinearLayout上監(jiān)聽點擊事件罐栈,彈起輸入框,把焦點賦予EditText泥畅。(這一步千萬不能忘記\堋)

布局代碼如下:

<FrameLayout

? ? ? ? android:layout_width="match_parent"

? ? ? ? android:layout_height="wrap_content"

? ? ? ? android:layout_marginTop="@dimen/common_margin_60px"

? ? ? ? android:gravity="center">

? ? ? ? <EditText

? ? ? ? ? ? android:layout_width="@dimen/dp20"

? ? ? ? ? ? android:layout_height="wrap_content"

? ? ? ? ? ? android:layout_centerInParent="true"

? ? ? ? ? ? android:layout_gravity="center"

? ? ? ? ? ? android:background="@null"

? ? ? ? ? ? android:inputType="number"

? ? ? ? ? ? android:maxLength="5"

? ? ? ? ? ? android:visibility="visible"/>

? ? ? ? <!--驗證碼輸入欄-->

? ? ? ? <LinearLayout

? ? ? ? ? ? android:layout_width="wrap_content"

? ? ? ? ? ? android:layout_height="wrap_content"

? ? ? ? ? ? android:layout_gravity="center"

? ? ? ? ? ? android:clickable="true"

? ? ? ? ? ? android:orientation="horizontal"

? ? ? ? ? ? android:visibility="visible">

? ? ? ? ? ? <TextView

? ? ? ? ? ? ? ? style="@style/code_text_style"/>

? ? ? ? ? ? <ImageView

? ? ? ? ? ? ? ? style="@style/vertical_line_style"/>

? ? ? ? ? ? <TextView

? ? ? ? ? ? ? ? style="@style/code_text_style"/>

? ? ? ? ? ? <ImageView

? ? ? ? ? ? ? ? style="@style/vertical_line_style"/>

? ? ? ? ? ? <TextView

? ? ? ? ? ? ? ? style="@style/code_text_style"/>

? ? ? ? ? ? <ImageView

? ? ? ? ? ? ? ? style="@style/vertical_line_style"/>

? ? ? ? ? ? <TextView

? ? ? ? ? ? ? ? style="@style/code_text_style"/>

? ? ? ? ? ? <ImageView

? ? ? ? ? ? ? ? style="@style/vertical_line_style"/>

? ? ? ? ? ? <TextView

? ? ? ? ? ? ? ? style="@style/code_text_style"/>

? ? ? ? </LinearLayout>

? ? </FrameLayout>

JAVA代碼部分:

/**

? ? * 輸入內(nèi)容監(jiān)聽,投射到5個空格上

? ? */

? ? TextWatcher edtCodeChange = 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) {

? ? ? ? ? ? tvCode1.setText("");

? ? ? ? ? ? tvCode2.setText("");

? ? ? ? ? ? tvCode3.setText("");

? ? ? ? ? ? tvCode4.setText("");

? ? ? ? ? ? tvCode5.setText("");

? ? ? ? ? ? switch (s.length()) {

? ? ? ? ? ? ? ? case 5:

? ? ? ? ? ? ? ? ? ? tvCode5.setText(s.subSequence(4, 5));

? ? ? ? ? ? ? ? case 4:

? ? ? ? ? ? ? ? ? ? tvCode4.setText(s.subSequence(3, 4));

? ? ? ? ? ? ? ? case 3:

? ? ? ? ? ? ? ? ? ? tvCode3.setText(s.subSequence(2, 3));

? ? ? ? ? ? ? ? case 2:

? ? ? ? ? ? ? ? ? ? tvCode2.setText(s.subSequence(1, 2));

? ? ? ? ? ? ? ? case 1:

? ? ? ? ? ? ? ? ? ? tvCode1.setText(s.subSequence(0, 1));

? ? ? ? ? ? ? ? default:

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? ? ? //輸入完5個驗證碼 自動請求驗證

? ? ? ? ? ? if (s.length() == 5) {

? ? ? ? ? ? ? ? clickNext();

? ? ? ? ? ? }

? ? ? ? }

? ? };

自定義鍵盤部分:

<android.support.v7.widget.RecyclerView

? ? android:id="@+id/rv_digit_num_key"

? ? android:layout_width="wrap_content"

? ? android:layout_height="wrap_content"

? ? android:layout_gravity="center_horizontal"

? ? android:paddingLeft="5dp"

? ? android:paddingTop="5dp"

? ? android:background="@mipmap/ic_recyclerview_bg"

? ? android:layout_marginTop="25dp" />

適配器寫法:(結(jié)合開源項目BaseQuickAdapter?)

public class DigitNumKeyAdapterextends BaseQuickAdapter {

涯捻。浅妆。。障癌。。辩尊。涛浙。。摄欲。轿亮。。胸墙。我注。。迟隅。但骨。励七。。奔缠。

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掠抬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子校哎,更是在濱河造成了極大的恐慌两波,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闷哆,死亡現(xiàn)場離奇詭異腰奋,居然都是意外死亡,警方通過查閱死者的電腦和手機抱怔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門劣坊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人野蝇,你說我怎么就攤上這事讼稚。” “怎么了绕沈?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵锐想,是天一觀的道長。 經(jīng)常有香客問我乍狐,道長赠摇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任浅蚪,我火速辦了婚禮藕帜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘惜傲。我一直安慰自己洽故,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布盗誊。 她就那樣靜靜地躺著时甚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哈踱。 梳的紋絲不亂的頭發(fā)上荒适,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音开镣,去河邊找鬼刀诬。 笑死,一個胖子當(dāng)著我的面吹牛邪财,可吹牛的內(nèi)容都是我干的陕壹。 我是一名探鬼主播质欲,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼帐要!你這毒婦竟也來了把敞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤榨惠,失蹤者是張志新(化名)和其女友劉穎奋早,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赠橙,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡耽装,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了期揪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掉奄。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖凤薛,靈堂內(nèi)的尸體忽然破棺而出姓建,到底是詐尸還是另有隱情,我是刑警寧澤缤苫,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布速兔,位于F島的核電站,受9級特大地震影響活玲,放射性物質(zhì)發(fā)生泄漏涣狗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一舒憾、第九天 我趴在偏房一處隱蔽的房頂上張望镀钓。 院中可真熱鬧,春花似錦镀迂、人聲如沸丁溅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唧瘾。三九已至,卻和暖如春别凤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背领虹。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工规哪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人塌衰。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓诉稍,卻偏偏與公主長得像蝠嘉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子杯巨,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容