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