業(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 {
涯捻。浅妆。。障癌。。辩尊。涛浙。。摄欲。轿亮。。胸墙。我注。。迟隅。但骨。励七。。奔缠。
}