Android自定義驗證碼輸入框

 

　　

　　先上圖，在網上看了一些，大家都是手動畫每一個驗證碼的輸入框然后一個個添加，並且實現每一個輸入框的監聽，不僅維護起來麻煩，而且代碼不美觀，在這里推薦一個比較好用既可以設置不同樣式的輸入框，這里我監聽了驗證碼輸入的長度，當長度等於6的時候，按鈕可以點擊，這里驗證碼的長度可以自定義！

 

　　　　build.gradle文件中　　　　　

 　　　　dependencies { 　　　　compile 'com.alimuzaffar.lib:pinentryedittext:1.3.3' 　　　 }

　　PinEntryEditText特征

• 引腳字符數是可配置的。您可以使用該maxLength屬性定義您想要的引腳長度。
• PinEntryEditText，支持文本動畫。
• 允許您指定要用作輸入掩碼的任何unicode字符。
• 指定drawable作為前景/背景。

 

 

　　PinEntryEditText屬性

• app:pinBackgroundDrawable=" "
• app:pinAnimationType=" "  
• app:pinCharacterMask=" "
• app:pinSingleCharHint=" "
• app:pinTextBottomPadding=" "
• app:pinLineStroke=" "
• app:pinLineStrokeSelected=" "
• app:pinBackgroundIsSquare=""
• app:pinLineColors=" "
          

　　簡單的介紹了一下PinEntryEdutText特征，一些簡單的屬性會在我們的布局文件中，現在貼一下代碼

　　布局文件：activity_inputcode.xml　　

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">

    <!--返回按鈕-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="19dp"
        android:layout_marginLeft="20dp"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/inputcode_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/zhaohui_cha"/>
    </LinearLayout>
    <!--請輸入驗證碼-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="69dp"
        android:layout_marginLeft="20dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center|left"
            android:text="請輸入驗證碼"
            android:textSize="25dp"
            android:textColor="#464646"/>
    </LinearLayout>
    <!--驗證碼已發送到您的手機-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="20dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center|left"
            android:text="驗證碼已發送到您的手機"
            android:textSize="14sp"
            android:textColor="#989898"/>
    </LinearLayout>
    <!--電話號碼-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center|left"
            android:text="+86"
            android:textSize="14sp"
            android:textColor="#989898"/>
        <TextView
            android:id="@+id/inputcode_phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center|left"
            android:text=""
            android:textSize="14sp"
            android:textColor="#989898"/>
    </LinearLayout>
    <!--6位數字驗證碼,倒計時-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="45dp"
        android:layout_marginLeft="20dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center|left"
            android:text="6位數字驗證碼"
            android:textSize="14sp"
            android:textColor="#989898"/>
        <TextView
            android:id="@+id/inputcode_time"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="20dp"
            android:textColor="#ff0000"
            android:text="60s"
            android:textSize="14sp" />
    </LinearLayout>
    <!--驗證碼-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:orientation="horizontal">
        <com.alimuzaffar.lib.pin.PinEntryEditText
            android:id="@+id/inputcode_editlinear"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cursorVisible="false"
            android:digits="1234567890"
            android:inputType="number"
            android:maxLength="6"
            android:textIsSelectable="false"
            android:textSize="19sp"
            android:textColor="#292929"
            android:gravity="center"
            android:layout_gravity="center"
            app:pinBackgroundIsSquare="true"
            app:pinBackgroundDrawable="@drawable/zhaohui_mask"/>
    </LinearLayout>
    <!--下一步-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:orientation="horizontal">
        <Button
            android:id="@+id/inputcode_next"
            android:enabled="false"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:background="@drawable/shape_noclick"
            android:text="下一步"
            android:textSize="16sp"
            android:textColor="#ffffff" />
    </LinearLayout>



</LinearLayout>zh

　　　上面驗證碼輸入框我添加的背景是一張圖片,當然可以自己畫布局引用，圖片可以直接拿去用

　　　下一步按鈕中引用了兩個樣式文件，分別顯示按鈕可點擊時的顏色和不可點擊時的顏色(默認按鈕不可點擊),兩個布局文件唯一的區別在於按鈕的顏色，之所有寫兩個對我別的地方有用    　　處，所以別太介意，😂drawable文件夾下面分別創建不同的xml

　　shape_noclick.xml　　用於控制按鈕不可以點擊時樣式

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

   
    <solid android:color="#778ad2" />
   
    <corners android:radius="5dip" />
    
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"
        />
</shape>

　　shape_button.xml　　用於控制按鈕可點擊時樣式　

<?xml version="1.0" encoding="UTF-8"?> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    
    <solid android:color="#334484" />   
    
    <corners android:radius="5dip" /> 

    <padding 
       android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp"/> 

</shape> 

　　SecurityCodeActivity.class

/**
 * Created by YyyyQ on 2018/8/31.
 * 自定義驗證碼樣式
 */

public class SecurityCodeActivity extends AppCompatActivity {

    //黃油刀(自行百度)
    @Bind(R.id.inputcode_back)
    ImageView inputcodeBack;
    @Bind(R.id.inputcode_phone)
    TextView inputcodePhone;
    @Bind(R.id.inputcode_time)
    TextView inputcodeTime;
    @Bind(R.id.inputcode_editlinear)
    PinEntryEditText inputcodeEditlinear;
    @Bind(R.id.inputcode_next)
    Button inputcodeNext;
    //驗證碼重新發送剩余時間
    private long laveTime;
    //驗證碼
    private String code;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_inputcode);
        ButterKnife.bind(this);
        //用戶電話賦值
        inputcodePhone.setText("131********");
        //設置輸入框監聽
        inputcodeEditlinear.addTextChangedListener(new EditChangedListener());
        //倒計時
        laveTime=60000;
        CountDownTimerUtils mCountDownTimerUtils = new CountDownTimerUtils(inputcodeTime, laveTime, 1000);
        mCountDownTimerUtils.start();
    }


    @OnClick({R.id.inputcode_back, R.id.inputcode_time, R.id.inputcode_next})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            //返回
            case R.id.inputcode_back:
                finish();
                break;
            //下一步
            case R.id.inputcode_next:
                Toast.makeText(this,code,Toast.LENGTH_SHORT).show();
                break;
            //重新獲取驗證碼
            case R.id.inputcode_time:
                Toast.makeText(this,"重新獲取驗證碼",Toast.LENGTH_SHORT).show();
                //重新開始倒計時
                laveTime=60000;
                CountDownTimerUtils mCountDownTimerUtils = new CountDownTimerUtils(inputcodeTime, laveTime, 1000);
                mCountDownTimerUtils.start();
                break;
        }
    }

    /**
     * 設置EditText監聽
     */
    class EditChangedListener implements TextWatcher {
        private final int charMaxNum = 6;

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            code = s.toString();
        }
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if(s.toString().length()==charMaxNum){
                inputcodeNext.setEnabled(true);
                inputcodeNext.setBackgroundResource(R.drawable.shape_button);
            }else{
                inputcodeNext.setBackgroundResource(R.drawable.shape_noclick);
                inputcodeNext.setEnabled(false);
            }
        }
        @Override
        public void afterTextChanged(Editable s) {
            if(s.toString().length()==charMaxNum){
                inputcodeNext.setEnabled(true);
                inputcodeNext.setBackgroundResource(R.drawable.shape_button);
                code=s.toString();
            }else{
                inputcodeNext.setBackgroundResource(R.drawable.shape_noclick);
                inputcodeNext.setEnabled(false);
            }
        }
    }

    /**
     * 時間倒計時
     */
    class CountDownTimerUtils extends CountDownTimer {

        private TextView mTextView;

        public CountDownTimerUtils(TextView textView, long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
            this.mTextView = textView;
        }

        @Override
        public void onTick(long l) {
            mTextView.setClickable(false); //設置不可點擊
            mTextView.setText(l / 1000 + "s");  //設置倒計時時間
            SpannableString spannableString = new SpannableString(mTextView.getText().toString());
            ForegroundColorSpan span = new ForegroundColorSpan(Color.RED);
            spannableString.setSpan(span, 0, 2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
            mTextView.setText(spannableString);

        }

        @Override
        public void onFinish() {
            mTextView.setClickable(true);//重新獲得點擊
            mTextView.setText("重新發送");
        }

    }

}

 

　　ok！一個驗證碼自定義樣式就這么簡單🎉