關(guān)于自定義控件的基礎(chǔ)知識(shí)
-- 可自行查詢資料据途。
-- 也可關(guān)注我們岸梨，后期介紹自定義統(tǒng)計(jì)圖表時(shí)，會(huì)統(tǒng)一介紹自定義控件的常用知識(shí)殉摔。
需求
4位驗(yàn)證碼輸入框：
效果圖：
4位驗(yàn)證碼輸入框.gif
1. 輸入框一行可輸入4位數(shù)字類型的驗(yàn)證碼唯咬；
2. 4位數(shù)字之間有間隔（包括底線）秃殉；
3. 輸入框不允許有光標(biāo)姥份；
4. 底線根據(jù)輸入位置顯示高亮（藍(lán)色）树埠；
6. 輸入完成祠丝，回調(diào)結(jié)果疾呻，輸入過程中，也進(jìn)行回調(diào)写半；
分析
這種效果罐韩，很難直接在Edittext上處理：
-- 輸入框均分4等份，還要有間隔污朽；
-- 更難處理的是Edittext輸入框禁止光標(biāo)散吵，那么，沒有光標(biāo)，我們?nèi)绾握{(diào)起虛擬鍵盤輸入數(shù)據(jù)矾睦？
-- 等...
與其在一個(gè)控件上折騰晦款，這么難受，不如自定義一個(gè)控件枚冗，實(shí)現(xiàn)這種效果缓溅。
自定義控件最簡單的方案：使用多個(gè)控件，組合出這種效果赁温。
- 布局如何實(shí)現(xiàn)坛怪？
1.禁止光標(biāo)，我們直接使用TextView就解決了股囊，而非Edittext;
2.一行顯示4位數(shù)字袜匿，比較簡單，可以使用線性布局的權(quán)重稚疹，對(duì)TextView進(jìn)行控制為4等分居灯；
3.每個(gè)TextView下面跟著一個(gè)底線，將來我們就能對(duì)底線設(shè)置高亮顏色了内狗；
這樣怪嫌，基本的布局展示就可以了！Ａ场岩灭！
- 使用了TextView，那么我們?nèi)绾谓邮沼脩舻妮斎肽兀?/li>
也很簡單赂鲤，我們?cè)?個(gè)TextView的上方平鋪一個(gè)EditText川背，設(shè)置透明，
當(dāng)用戶點(diǎn)擊到該控件時(shí)蛤袒，會(huì)自動(dòng)調(diào)起軟鍵盤熄云，接收輸入的文本。
- EditText接收到用戶輸入的文本妙真，如何顯示在TextView呢缴允？
我們監(jiān)聽EditText文本輸入事件，最多僅接收4個(gè)輸入字符珍德，
每接收到一個(gè)字符练般，我們就賦值給對(duì)應(yīng)的TextView；
底線也隨要設(shè)置的文本切換顯示高亮锈候；
- 如何刪除已輸入的數(shù)值薄料？
我們監(jiān)聽EditText按鍵事件，攔截DEL鍵泵琳，從后向前挨著刪除字符即可摄职；
底線也隨要?jiǎng)h除的文本切換顯示高亮誊役；
- 是否需要自定義屬性
分析我們自己的項(xiàng)目，雖然是公用的控件谷市，但是該控件比較簡單蛔垢，沒有特別的要求，所以沒必要自定義屬性了迫悠！
如果大家有需要的鹏漆，可根據(jù)需要自己定義；
如何定義屬性创泄？請(qǐng)自行查找資料艺玲；
既然，問題都分析清楚了鞠抑，那我們就開始快速實(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>
et_code 輸入框饭聚，設(shè)置了透明和無光標(biāo)，僅接收數(shù)字碍拆；
tv_code1~4 為顯示數(shù)字的控件若治；
v1~4 為數(shù)字文本的底線慨蓝，用于設(shè)置高亮感混；
- 自定義控件代碼 PhoneCode
package iwangzhe.customview2.phonecode;
import android.content.Context;
import android.graphics.Color;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import iwangzhe.customview2.R;
/**
* 類：PhoneCode
* 作者： qxc
* 日期：2018/3/14.
*/
public class PhoneCode extends RelativeLayout {
private Context context;
private TextView tv_code1;
private TextView tv_code2;
private TextView tv_code3;
private TextView tv_code4;
private View v1;
private View v2;
private View v3;
private View v4;
private EditText et_code;
private List<String> codes = new ArrayList<>();
private InputMethodManager imm;
public PhoneCode(Context context) {
super(context);
this.context = context;
loadView();
}
public PhoneCode(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
loadView();
}
private void loadView(){
imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
View view = LayoutInflater.from(context).inflate(R.layout.phone_code, this);
initView(view);
initEvent();
}
private void initView(View view){
tv_code1 = (TextView) view.findViewById(R.id.tv_code1);
tv_code2 = (TextView) view.findViewById(R.id.tv_code2);
tv_code3 = (TextView) view.findViewById(R.id.tv_code3);
tv_code4 = (TextView) view.findViewById(R.id.tv_code4);
et_code = (EditText) view.findViewById(R.id.et_code);
v1 = view.findViewById(R.id.v1);
v2 = view.findViewById(R.id.v2);
v3 = view.findViewById(R.id.v3);
v4 = view.findViewById(R.id.v4);
}
private void initEvent(){
//驗(yàn)證碼輸入
et_code.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void afterTextChanged(Editable editable) {
if(editable != null && editable.length()>0) {
et_code.setText("");
if(codes.size() < 4){
codes.add(editable.toString());
showCode();
}
}
}
});
// 監(jiān)聽驗(yàn)證碼刪除按鍵
et_code.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN && codes.size()>0) {
codes.remove(codes.size()-1);
showCode();
return true;
}
return false;
}
});
}
/**
* 顯示輸入的驗(yàn)證碼
*/
private void showCode(){
String code1 = "";
String code2 = "";
String code3 = "";
String code4 = "";
if(codes.size()>=1){
code1 = codes.get(0);
}
if(codes.size()>=2){
code2 = codes.get(1);
}
if(codes.size()>=3){
code3 = codes.get(2);
}
if(codes.size()>=4){
code4 = codes.get(3);
}
tv_code1.setText(code1);
tv_code2.setText(code2);
tv_code3.setText(code3);
tv_code4.setText(code4);
setColor();//設(shè)置高亮顏色
callBack();//回調(diào)
}
/**
* 設(shè)置高亮顏色
*/
private void setColor(){
int color_default = Color.parseColor("#999999");
int color_focus = Color.parseColor("#3F8EED");
v1.setBackgroundColor(color_default);
v2.setBackgroundColor(color_default);
v3.setBackgroundColor(color_default);
v4.setBackgroundColor(color_default);
if(codes.size()==0){
v1.setBackgroundColor(color_focus);
}
if(codes.size()==1){
v2.setBackgroundColor(color_focus);
}
if(codes.size()==2){
v3.setBackgroundColor(color_focus);
}
if(codes.size()>=3){
v4.setBackgroundColor(color_focus);
}
}
/**
* 回調(diào)
*/
private void callBack(){
if(onInputListener==null){
return;
}
if(codes.size()==4){
onInputListener.onSucess(getPhoneCode());
}else{
onInputListener.onInput();
}
}
//定義回調(diào)
public interface OnInputListener{
void onSucess(String code);
void onInput();
}
private OnInputListener onInputListener;
public void setOnInputListener(OnInputListener onInputListener){
this.onInputListener = onInputListener;
}
/**
* 顯示鍵盤
*/
public void showSoftInput(){
//顯示軟鍵盤
if(imm!=null && et_code!=null) {
et_code.postDelayed(new Runnable() {
@Override
public void run() {
imm.showSoftInput(et_code, 0);
}
},200);
}
}
/**
* 獲得手機(jī)號(hào)驗(yàn)證碼
* @return 驗(yàn)證碼
*/
public String getPhoneCode(){
StringBuilder sb = new StringBuilder();
for (String code : codes) {
sb.append(code);
}
return sb.toString();
}
}
codes 集合，用于存放用戶輸入的所有數(shù)字礼烈。使用該集合弧满，可簡化輸入框、文本關(guān)聯(lián)邏輯和事件之間處理此熬；
showSoftInput方法：顯示輸入鍵盤庭呜，可被外界調(diào)用；
getPhoneCode方法：獲得用戶輸入的驗(yàn)證碼犀忱，可被外界調(diào)用募谎；
OnInputListener接口：定義的數(shù)值輸入回調(diào)，用于告訴調(diào)用者是輸入中阴汇，還是輸入完成数冬；
（OnInputListener用途舉例：在實(shí)際項(xiàng)目中，當(dāng)輸入完成搀庶，底部【下一步】或【確定】按鈕變成可點(diǎn)擊拐纱，否則，變?yōu)椴豢牲c(diǎn)擊哥倔。）
- 調(diào)用者 MainActivity
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="iwangzhe.customview2.MainActivity">
<iwangzhe.customview2.phonecode.PhoneCode
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/pc_1"
android:layout_below="@+id/fpc_1"
android:layout_marginTop="40dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
</RelativeLayout>
代碼
package iwangzhe.customview2;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import iwangzhe.customview2.phonecode.PhoneCode;
public class MainActivity extends AppCompatActivity {
PhoneCode pc_1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pc_1 = (PhoneCode) findViewById(R.id.pc_1);
//注冊(cè)事件回調(diào)（根據(jù)實(shí)際需要秸架，可寫，可不寫）
pc_1.setOnInputListener(new PhoneCode.OnInputListener() {
@Override
public void onSucess(String code) {
//TODO: 例如底部【下一步】按鈕可點(diǎn)擊
}
@Override
public void onInput() {
//TODO:例如底部【下一步】按鈕不可點(diǎn)擊
}
});
}
private void test(){
//獲得驗(yàn)證碼
String phoneCode = pc_1.getPhoneCode();
//......
//......
//更多操作
}
}
總結(jié)：
此控件實(shí)現(xiàn)起來咆蒿，很簡單东抹，代碼量也非常少蚂子。
本文章，主要是為了讓大家了解自定義控件的過程府阀，如果想在自己的項(xiàng)目中使用缆镣，請(qǐng)根據(jù)需要自行調(diào)整優(yōu)化。
Demo下載地址：
（為了減小Demo大小试浙，我刪除了build下的文件董瞻，大家獲取后rebuild一下代碼，就可以了）
https://pan.baidu.com/s/1OAcUdmwC_wFOrkontveAeA
