业务分析:
1.每个数字之间是有竖线隔开的,并不是一个连续的输入控件
2. 5个验证码数字输入的地方没有光标闪烁,也就是5个格子其实不是EditText。
3. 输入数字之后,继续输入(未满5个的时候)、或者删除回退,都应该从当前最右侧的位置开始操作。
4. 点击5个格子的地方,需要弹起软键盘
设计思路:
1.一个EditText放在FrameLayout中,EditText的目的是用来实际获取用户在输入框中输入的内容。
2.EditText被 LinearLayout覆盖,里面是5个TextView,将用来映射显示EditText的值。
3.用户实际上使用输入框输入数字的时候,EditText是监听到输入的,同时也能输入数字在EditText身上,只不过被盖住了,看不到。
4.拿到EditText输入的内容,.处理好切割EditText已输入的文本,分别在5个TextView上显示。
5.LinearLayout上监听点击事件,弹起输入框,把焦点赋予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代码部分:
/**
* 输入内容监听,投射到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" />
适配器写法:(结合开源项目BaseQuickAdapter )
public class DigitNumKeyAdapterextends BaseQuickAdapter {
。。。。。。。。。。。。。。。。。。。
}