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！一个验证码自定义样式就这么简单🎉