美文网首页
Android 验证码/密码 输入框+自定义数字键盘

Android 验证码/密码 输入框+自定义数字键盘

作者: 杰子他爸 | 来源:发表于2019-05-15 14:22 被阅读0次

    业务分析:

    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 {

    。。。。。。。。。。。。。。。。。。。

    }

    相关文章

      网友评论

          本文标题:Android 验证码/密码 输入框+自定义数字键盘

          本文链接:https://www.haomeiwen.com/subject/zyepaqtx.html