Android自定义控件通用验证码输入框的实现-创新互联

需求

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都柔性防护网等，在成都网站建设、营销型网站建设、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

4位验证码输入框：

效果图：

1. 输入框一行可输入4位数字类型的验证码；
2. 4位数字之间有间隔（包括底线）；
3. 输入框不允许有光标；
4. 底线根据输入位置显示高亮（蓝色）；
6. 输入完成，回调结果，输入过程中，也进行回调；

分析

这种效果，很难直接在Edittext上处理：
-- 输入框均分4等份，还要有间隔；
-- 更难处理的是Edittext输入框禁止光标，那么，没有光标，我们如何调起虚拟键盘输入数据？
-- 等...

与其在一个控件上折腾，这么难受，不如自定义一个控件，实现这种效果。
自定义控件最简单的方案：使用多个控件，组合出这种效果。

1、布局如何实现？

1.禁止光标，我们直接使用TextView就解决了，而非Edittext;
2.一行显示4位数字，比较简单，可以使用线性布局的权重，对TextView进行控制为4等分；
3.每个TextView下面跟着一个底线，将来我们就能对底线设置高亮颜色了；
这样，基本的布局展示就可以了！！！

2、使用了TextView，那么我们如何接收用户的输入呢？
也很简单，我们在4个TextView的上方平铺一个EditText，设置透明，
当用户点击到该控件时，会自动调起软键盘，接收输入的文本。
EditText接收到用户输入的文本，如何显示在TextView呢？

3、我们监听EditText文本输入事件，最多仅接收4个输入字符，
每接收到一个字符，我们就赋值给对应的TextView；
底线也随要设置的文本切换显示高亮；

4、如何删除已输入的数值？
我们监听EditText按键事件，拦截DEL键，从后向前挨着删除字符即可；
底线也随要删除的文本切换显示高亮；

5、是否需要自定义属性
分析我们自己的项目，虽然是公用的控件，但是该控件比较简单，没有特别的要求，所以没必要自定义属性了！
如果大家有需要的，可根据需要自己定义；
如何定义属性？请自行查找资料；

既然，问题都分析清楚了，那我们就开始快速实现吧

具体实现

布局文件 phone_code.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <LinearLayout
    android:id="@+id/ll_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:orientation="vertical"
      android:layout_marginRight="7dp">
      <TextView
        android:id="@+id/tv_code1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#2D2D2D"
        android:textSize="40sp"
        android:background="@null"
        android:gravity="center"/>
      <View
        android:id="@+id/v1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#3F8EED" />
    </LinearLayout>

    <LinearLayout
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:orientation="vertical"
      android:layout_marginRight="7dp"
      android:layout_marginLeft="7dp">
      <TextView
        android:id="@+id/tv_code2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#2D2D2D"
        android:textSize="40sp"
        android:background="@null"
        android:gravity="center"/>
      <View
        android:id="@+id/v2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#999999" />
    </LinearLayout>
    <LinearLayout
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:orientation="vertical"
      android:layout_marginRight="7dp"
      android:layout_marginLeft="7dp">
      <TextView
        android:id="@+id/tv_code3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#2D2D2D"
        android:textSize="40sp"
        android:background="@null"
        android:gravity="center"/>
      <View
        android:id="@+id/v3"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#999999" />
    </LinearLayout>
    <LinearLayout
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:orientation="vertical"
      android:layout_marginLeft="7dp">
      <TextView
        android:id="@+id/tv_code4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#2D2D2D"
        android:background="@null"
        android:textSize="40sp"
        android:gravity="center"/>
      <View
        android:id="@+id/v4"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#999999" />
    </LinearLayout>
  </LinearLayout>

  <EditText
    android:id="@+id/et_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/ll_code"
    android:layout_alignBottom="@+id/ll_code"
    android:background="@android:color/transparent"
    android:textColor="@android:color/transparent"
    android:cursorVisible="false"
    android:inputType="number"/>
</RelativeLayout>

新闻标题：Android自定义控件通用验证码输入框的实现-创新互联
转载来于：https://www.cdcxhl.com/article18/eiodp.html

成都网站建设公司_创新互联，为您提供微信小程序、营销型网站建设、云服务器、响应式网站、手机网站建设、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容