需求
4位驗證碼輸入框:
效果圖:
1. 輸入框一行可輸入4位數(shù)字類型的驗證碼;
2. 4位數(shù)字之間有間隔(包括底線);
3. 輸入框不允許有光標;
4. 底線根據(jù)輸入位置顯示高亮(藍色);
6. 輸入完成,回調(diào)結(jié)果,輸入過程中,也進行回調(diào);
分析
這種效果,很難直接在Edittext上處理:
-- 輸入框均分4等份,還要有間隔;
-- 更難處理的是Edittext輸入框禁止光標,那么,沒有光標,我們?nèi)绾握{(diào)起虛擬鍵盤輸入數(shù)據(jù)?
-- 等...
與其在一個控件上折騰,這么難受,不如自定義一個控件,實現(xiàn)這種效果。
自定義控件最簡單的方案:使用多個控件,組合出這種效果。
1、布局如何實現(xiàn)?
1.禁止光標,我們直接使用TextView就解決了,而非Edittext;
2.一行顯示4位數(shù)字,比較簡單,可以使用線性布局的權(quán)重,對TextView進行控制為4等分;
3.每個TextView下面跟著一個底線,將來我們就能對底線設(shè)置高亮顏色了;
這樣,基本的布局展示就可以了?。。?/p>
2、使用了TextView,那么我們?nèi)绾谓邮沼脩舻妮斎肽兀?/strong>
也很簡單,我們在4個TextView的上方平鋪一個EditText,設(shè)置透明,
當用戶點擊到該控件時,會自動調(diào)起軟鍵盤,接收輸入的文本。
EditText接收到用戶輸入的文本,如何顯示在TextView呢?
3、我們監(jiān)聽EditText文本輸入事件,最多僅接收4個輸入字符,
每接收到一個字符,我們就賦值給對應(yīng)的TextView;
底線也隨要設(shè)置的文本切換顯示高亮;
4、如何刪除已輸入的數(shù)值?
我們監(jiān)聽EditText按鍵事件,攔截DEL鍵,從后向前挨著刪除字符即可;
底線也隨要刪除的文本切換顯示高亮;
5、是否需要自定義屬性
分析我們自己的項目,雖然是公用的控件,但是該控件比較簡單,沒有特別的要求,所以沒必要自定義屬性了!
如果大家有需要的,可根據(jù)需要自己定義;
如何定義屬性?請自行查找資料;
既然,問題都分析清楚了,那我們就開始快速實現(xiàn)吧
具體實現(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>
新聞標題:Android自定義控件通用驗證碼輸入框的實現(xiàn)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于:http://jinyejixie.com/article18/eiodp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、營銷型網(wǎng)站建設(shè)、云服務(wù)器、響應(yīng)式網(wǎng)站、手機網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容