Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn)-創(chuàng)新互聯(lián)

需求

發(fā)展壯大離不開(kāi)廣大客戶長(zhǎng)期以來(lái)的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都柔性防護(hù)網(wǎng)等，在成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開(kāi)發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

4位驗(yàn)證碼輸入框：


效果圖：


1. 輸入框一行可輸入4位數(shù)字類型的驗(yàn)證碼；
2. 4位數(shù)字之間有間隔（包括底線）；
3. 輸入框不允許有光標(biāo)；
4. 底線根據(jù)輸入位置顯示高亮（藍(lán)色）；
6. 輸入完成，回調(diào)結(jié)果，輸入過(guò)程中，也進(jìn)行回調(diào)；


分析

這種效果，很難直接在Edittext上處理：
-- 輸入框均分4等份，還要有間隔；
-- 更難處理的是Edittext輸入框禁止光標(biāo)，那么，沒(méi)有光標(biāo)，我們?nèi)绾握{(diào)起虛擬鍵盤輸入數(shù)據(jù)？
-- 等...

與其在一個(gè)控件上折騰，這么難受，不如自定義一個(gè)控件，實(shí)現(xiàn)這種效果。
自定義控件最簡(jiǎn)單的方案：使用多個(gè)控件，組合出這種效果。

1、布局如何實(shí)現(xiàn)？


1.禁止光標(biāo)，我們直接使用TextView就解決了，而非Edittext;
2.一行顯示4位數(shù)字，比較簡(jiǎn)單，可以使用線性布局的權(quán)重，對(duì)TextView進(jìn)行控制為4等分；
3.每個(gè)TextView下面跟著一個(gè)底線，將來(lái)我們就能對(duì)底線設(shè)置高亮顏色了；
這樣，基本的布局展示就可以了?。。?/p>

2、使用了TextView，那么我們?nèi)绾谓邮沼脩舻妮斎肽兀?/strong>
也很簡(jiǎn)單，我們?cè)?個(gè)TextView的上方平鋪一個(gè)EditText，設(shè)置透明，
當(dāng)用戶點(diǎn)擊到該控件時(shí)，會(huì)自動(dòng)調(diào)起軟鍵盤，接收輸入的文本。
EditText接收到用戶輸入的文本，如何顯示在TextView呢？


3、我們監(jiān)聽(tīng)EditText文本輸入事件，最多僅接收4個(gè)輸入字符，
每接收到一個(gè)字符，我們就賦值給對(duì)應(yīng)的TextView；
底線也隨要設(shè)置的文本切換顯示高亮；

4、如何刪除已輸入的數(shù)值？
我們監(jiān)聽(tīng)EditText按鍵事件，攔截DEL鍵，從后向前挨著刪除字符即可；
底線也隨要?jiǎng)h除的文本切換顯示高亮；

5、是否需要自定義屬性
分析我們自己的項(xiàng)目，雖然是公用的控件，但是該控件比較簡(jiǎn)單，沒(méi)有特別的要求，所以沒(méi)必要自定義屬性了！
如果大家有需要的，可根據(jù)需要自己定義；
如何定義屬性？請(qǐng)自行查找資料；


既然，問(wèn)題都分析清楚了，那我們就開(kāi)始快速實(shí)現(xiàn)吧

具體實(shí)現(xiàn)

布局文件 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>

新聞標(biāo)題：Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article18/eiodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、營(yíng)銷型網(wǎng)站建設(shè)、云服務(wù)器、響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)