Android自定义方框EditText注册验证码

2025-01-30 10:29:52

先来个效果图让大家看一看，现在好多app都用类似的注册页

实现思路

用一个透明的EditText与四个TextView重叠，并给TextView设置默认背景
第4个TextView输入完成后,要设置回调,并且要加入增加删除的回调
还要监听EditText内容的变化,获取内容,并且改变EditText下面的TextView的颜色
重新发送的是采用一个自定义的CountDownTimer类
弹出效果自定义的一个Dialog继承DialogFragment

自定义EditText的布局

<?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:layout_width="wrap_content"
  android:layout_height="47dp"
  android:gravity="center"
  android:orientation="horizontal"
  android:weightSum="3">

  <TextView
   android:id="@+id/item_code_iv1"
   style="@style/text_editStyle" />

  <View
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1" />

  <TextView
   android:id="@+id/item_code_iv2"
   style="@style/text_editStyle" />

  <View
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1" />

  <TextView
   android:id="@+id/item_code_iv3"
   style="@style/text_editStyle" />

  <View
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1" />

  <TextView
   android:id="@+id/item_code_iv4"
   style="@style/text_editStyle" />

 </LinearLayout>

 <EditText
  android:id="@+id/item_edittext"
  android:layout_width="match_parent"
  android:layout_height="47dp"
  android:background="@android:color/transparent"
  android:inputType="number" />
</RelativeLayout>

style

 <style name="text_editStyle" >
  <item name="android:layout_height">47dp</item>
  <item name="android:layout_width">47dp</item>
  <item name="android:background">@mipmap/bg_verify</item>
  <item name="android:gravity">center</item>
  <item name="android:textColor">@color/common_blue_0090FF</item>
  <item name="android:textSize">18sp</item>

</style>

View的代码

private EditText editText;
 private TextView[] TextViews;
 private StringBuffer stringBuffer = new StringBuffer();
 private int count = 4;
 private String inputContent;

 public SecurityCodeView(Context context) {
  this(context, null);
 }

 public SecurityCodeView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public SecurityCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  TextViews = new TextView[4];
  View.inflate(context, R.layout.view_security_code, this);

  editText = (EditText) findViewById(R.id.item_edittext);
  TextViews[0] = (TextView) findViewById(R.id.item_code_iv1);
  TextViews[1] = (TextView) findViewById(R.id.item_code_iv2);
  TextViews[2] = (TextView) findViewById(R.id.item_code_iv3);
  TextViews[3] = (TextView) findViewById(R.id.item_code_iv4);

  editText.setCursorVisible(false);//将光标隐藏
  setListener();
 }

 /**
  * 清空输入内容
  */
 public void clearEditText() {
  stringBuffer.delete(0, stringBuffer.length());
  inputContent = stringBuffer.toString();
  for (int i = 0; i < TextViews.length; i++) {
   TextViews[i].setText("");
   TextViews[i].setBackgroundResource(R.mipmap.bg_verify);
  }
 }

 private InputCompleteListener inputCompleteListener;

 public void setInputCompleteListener(InputCompleteListener inputCompleteListener) {
  this.inputCompleteListener = inputCompleteListener;
 }

 public interface InputCompleteListener {
  void inputComplete();

  void deleteContent(boolean isDelete);
 }

 /**
  * 获取输入文本
  *
  * @return
  */
 public String getEditContent() {
  return inputContent;
}

监听代码

 private void setListener() {
  editText.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.toString().equals("")) {
     if (stringBuffer.length() > 3) {
      //当文本长度大于3位时edittext置空
      editText.setText("");
      return;
     } else {
      //将文字添加到StringBuffer中
      stringBuffer.append(editable);
      editText.setText("");//添加后将EditText置空 造成没有文字输入的错局
      // Log.e("TAG", "afterTextChanged: stringBuffer is " + stringBuffer);
      count = stringBuffer.length();//记录stringbuffer的长度
      inputContent = stringBuffer.toString();
      if (stringBuffer.length() == 4) {
       //文字长度位4 则调用完成输入的监听
       if (inputCompleteListener != null) {
        inputCompleteListener.inputComplete();
       }
      }
     }

     for (int i = 0; i < stringBuffer.length(); i++) {
      TextViews[i].setText(String.valueOf(inputContent.charAt(i)));
      TextViews[i].setBackgroundResource(R.mipmap.bg_verify_press);
     }

    }
   }
  });

  editText.setOnKeyListener(new OnKeyListener() {
   @Override
   public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_DEL
      && event.getAction() == KeyEvent.ACTION_DOWN) {
     if (onKeyDelete()) return true;
     return true;
    }
    return false;
   }
  });
 }

 public boolean onKeyDelete() {
  if (count == 0) {
   count = 4;
   return true;
  }
  if (stringBuffer.length() > 0) {
   //删除相应位置的字符
   stringBuffer.delete((count - 1), count);
   count--;
   // Log.e(TAG, "afterTextChanged: stringBuffer is " + stringBuffer);
   inputContent = stringBuffer.toString();
   TextViews[stringBuffer.length()].setText("");
   TextViews[stringBuffer.length()].setBackgroundResource(R.mipmap.bg_verify);
   if (inputCompleteListener != null)
    inputCompleteListener.deleteContent(true);//有删除就通知manger

  }
  return false;
 }

自定义的EditText到这了算是结束了

弹出框的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="283dp"
 android:layout_height="273dp"
 android:layout_gravity="center"
 android:layout_marginBottom="50dp"
 android:background="@mipmap/bg_view1"
 android:orientation="vertical">

 <include layout="@layout/layout_titile" />

 <com.example.admin.myapplication.SecurityCodeView
  android:id="@+id/scv_edittext"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"
  android:layout_marginTop="35dp" />

 <TextView
  android:id="@+id/tv_text"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"
  android:layout_marginTop="13dp"
  android:text="输入验证码表示同意《用户协议》" />

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginBottom="25dp"
  android:layout_marginTop="3dp"
  android:orientation="horizontal">

  <TextView

   android:id="@+id/tv_phone"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_marginLeft="20dp"
   android:layout_marginRight="20dp"
   android:layout_marginTop="13dp"
   android:layout_weight="1"
   android:text="电话" />

  <TextView
   android:id="@+id/tv_click"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="20dp"
   android:layout_marginRight="20dp"
   android:layout_marginTop="13dp"
   android:text="重新发送"
   android:textColor="@color/colorPrimary" />
 </LinearLayout>

</LinearLayout>

[大体的思路,点击事件之后弹出一个Dialog,然后再这个页面进行注册,有可能这个Dialog会复用,或者改一些样式(采用Builder设计模式)]

接下来自定义Dialog

要实现EditText的两个接口

public class XyAlertDialog extends DialogFragment implements SecurityCodeView.InputCompleteListener {
 private SecurityCodeView editText;
 private TextView text;
 private TextView tv_title;
 private ImageView img_close;
 public static final String TAG = XyAlertDialog.class.getSimpleName();
 private Builder builder;
 private static XyAlertDialog instance = new XyAlertDialog();
 private TextView tv_phone;
 private TextView tv_click;

 public static XyAlertDialog getInstance() {
  return instance;
 }

 @Override
 public void onCreate(@Nullable Bundle savedInstanceState) {
  this.setCancelable(true);
  setRetainInstance(true);
  super.onCreate(savedInstanceState);

  if (savedInstanceState != null) {
   try {
    if (isAdded() && getActivity() != null)
     if (builder != null)
      builder = (Builder) savedInstanceState.getSerializable(Builder.class.getSimpleName());
   } catch (Exception e) {
   }

  }
 }

 @Override
 public void onSaveInstanceState(Bundle outState) {
  super.onSaveInstanceState(outState);
  try {
   if (isAdded() && getActivity() != null)
    if (builder != null)
     outState.putSerializable(Builder.class.getSimpleName(), builder);
  } catch (Exception e) {
   Log.d(TAG, e.toString());
  }
 }

 @NonNull
 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState) {
  Dialog dialog = super.onCreateDialog(savedInstanceState);
  dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
  dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
  dialog.setCanceledOnTouchOutside(false);//点击旁白不消失
  return dialog;
 }

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup
   container, @Nullable Bundle savedInstanceState) {
  return inflater.inflate(R.layout.activity_xia, container, false);
 }

 @Override
 public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);
  initViews(view);

 }

 private Dialog show(Activity activity, Builder builder) {
  this.builder = builder;
  if (!isAdded())
   show(((AppCompatActivity) activity).getSupportFragmentManager(), TAG);
  return getDialog();
 }

 private void initViews(View view) {
  tv_title = (TextView) view.findViewById(R.id.tv_title);
  img_close = (ImageView) view.findViewById(R.id.img_close);
  editText = (SecurityCodeView) view.findViewById(R.id.scv_edittext);
  text = (TextView) view.findViewById(R.id.tv_text);
  tv_phone = (TextView) view.findViewById(R.id.tv_phone);
  tv_click = (TextView) view.findViewById(R.id.tv_click);
  editText.setInputCompleteListener(this);
  tv_phone.setText(builder.getTextTitle());
  img_close.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    dismiss();
   }
  });
  tv_click.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    CountDownTimerUtils mCountDownTimerUtils = new CountDownTimerUtils(tv_click, 60000, 1000);
    mCountDownTimerUtils.start();
   }
  });
 }

 public static class Builder implements Serializable {

  private String positiveButtonText;
  private String negativeButtonText;
  private String textTitle;
  private String body;

  private OnPositiveClicked onPositiveClicked;
  private OnNegativeClicked onNegativeClicked;
  private boolean autoHide;
  private int timeToHide;
  private int positiveTextColor;
  private int backgroundColor;
  private int negativeColor;
  private int titleColor;
  private int bodyColor;
  private Typeface titleFont;
  private Typeface bodyFont;
  private Typeface positiveButtonFont;
  private Typeface negativeButtonFont;

  private Typeface alertFont;
  private Context context;
  private PanelGravity buttonsGravity;

  public PanelGravity getButtonsGravity() {
   return buttonsGravity;
  }

  public Builder setButtonsGravity(PanelGravity buttonsGravity) {
   this.buttonsGravity = buttonsGravity;
   return this;
  }

  public Typeface getAlertFont() {
   return alertFont;
  }

  public Builder setAlertFont(String alertFont) {
   this.alertFont = Typeface.createFromAsset(context.getAssets(), alertFont);
   return this;
  }

  public Typeface getPositiveButtonFont() {
   return positiveButtonFont;
  }

  public Builder setPositiveButtonFont(String positiveButtonFont) {
   this.positiveButtonFont = Typeface.createFromAsset(context.getAssets(), positiveButtonFont);
   return this;
  }

  public Typeface getNegativeButtonFont() {
   return negativeButtonFont;
  }

  public Builder setNegativeButtonFont(String negativeButtonFont) {
   this.negativeButtonFont = Typeface.createFromAsset(context.getAssets(), negativeButtonFont);
   return this;
  }

  public Typeface getTitleFont() {
   return titleFont;
  }

  public Builder setTitleFont(String titleFontPath) {
   this.titleFont = Typeface.createFromAsset(context.getAssets(), titleFontPath);
   return this;
  }

  public Typeface getBodyFont() {
   return bodyFont;
  }

  public Builder setBodyFont(String bodyFontPath) {
   this.bodyFont = Typeface.createFromAsset(context.getAssets(), bodyFontPath);
   return this;
  }

  public int getTimeToHide() {
   return timeToHide;
  }

  public Builder setTimeToHide(int timeToHide) {
   this.timeToHide = timeToHide;
   return this;
  }

  public boolean isAutoHide() {
   return autoHide;
  }

  public Builder setAutoHide(boolean autoHide) {
   this.autoHide = autoHide;
   return this;
  }

  public Context getContext() {
   return context;
  }

  public Builder setActivity(Context context) {
   this.context = context;
   return this;
  }

  public Builder(Context context) {
   this.context = context;
  }
  public void setCancelable(boolean flag) {
   throw new RuntimeException("Stub!");
  }

  public int getPositiveTextColor() {
   return positiveTextColor;
  }

  public Builder setPositiveColor(int positiveTextColor) {
   this.positiveTextColor = positiveTextColor;
   return this;
  }

  public int getBackgroundColor() {
   return backgroundColor;
  }

  public Builder setBackgroundColor(int backgroundColor) {
   this.backgroundColor = backgroundColor;
   return this;
  }

  public int getNegativeColor() {
   return negativeColor;
  }

  public Builder setNegativeColor(int negativeColor) {
   this.negativeColor = negativeColor;
   return this;
  }

  public int getTitleColor() {
   return titleColor;
  }

  public Builder setTitleColor(int titleColor) {
   this.titleColor = titleColor;
   return this;
  }

  public int getBodyColor() {
   return bodyColor;
  }

  public Builder setBodyColor(int bodyColor) {
   this.bodyColor = bodyColor;
   return this;
  }

  public String getPositiveButtonText() {
   return positiveButtonText;
  }

  public Builder setPositiveButtonText(int positiveButtonText) {
   this.positiveButtonText = context.getString(positiveButtonText);
   return this;
  }

  public Builder setPositiveButtonText(String positiveButtonText) {
   this.positiveButtonText = positiveButtonText;
   return this;
  }

  public String getNegativeButtonText() {
   return negativeButtonText;
  }

  public Builder setNegativeButtonText(String negativeButtonText) {
   this.negativeButtonText = negativeButtonText;
   return this;
  }

  public Builder setNegativeButtonText(int negativeButtonText) {
   this.negativeButtonText = context.getString(negativeButtonText);
   return this;
  }

  public String getTextTitle() {
   return textTitle;
  }

  public Builder setTextTitle(String textTitle) {
   this.textTitle = textTitle;
   return this;
  }

  public Builder setTextTitle(int textTitle) {
   this.textTitle = context.getString(textTitle);
   return this;
  }

  public String getBody() {
   return body;
  }

  public Builder setBody(String body) {
   this.body = body;
   return this;
  }

  public Builder setBody(int body) {
   this.body = context.getString(body);
   return this;
  }

  public OnPositiveClicked getOnPositiveClicked() {
   return onPositiveClicked;
  }

  public Builder setOnPositiveClicked(OnPositiveClicked onPositiveClicked) {
   this.onPositiveClicked = onPositiveClicked;
   return this;
  }

  public OnNegativeClicked getOnNegativeClicked() {
   return onNegativeClicked;
  }

  public Builder setOnNegativeClicked(OnNegativeClicked onNegativeClicked) {
   this.onNegativeClicked = onNegativeClicked;
   return this;
  }

  public Builder build() {
   return this;
  }

  public Dialog show() {
   return XyAlertDialog.getInstance().show(((Activity) context), this);
  }

 }

 @Override
 public void onPause() {
  if (isAdded() && getActivity() != null) {
   builder = null;
  }
  super.onPause();
 }

 public interface OnPositiveClicked {
  void OnClick(View view, Dialog dialog);
 }

 public interface OnNegativeClicked {
  void OnClick(View view, Dialog dialog);
 }

 public enum PanelGravity {
  LEFT,
  RIGHT,
  CENTER
 }
//EditText的接口
 @Override
 public void inputComplete() {
  if (!editText.getEditContent().equals("1234")) {
   text.setText("验证码输入错误");
   text.setTextColor(Color.RED);
  }
 }

 @Override
 public void deleteContent(boolean isDelete) {
  if (isDelete) {
   text.setText("输入验证码表示同意《用户协议》");
   text.setTextColor(Color.BLACK);
  }
 }
}

至于那个自定义的CountDownTimer在这里有介绍

Android实现点击获取验证码60秒后重新获取功能

源码地址：Android自定义方框EditText注册验证码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android自定义View绘制随机生成图片验证码

本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方. 按照惯例先看看效果图: 一.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 其中onMesure方法不一定要重写,但大部分情况下还是需要重写的二.View 的几个构造函数 1.public CustomV
Android自定义View实现验证码

本文章是基于鸿洋的Android 自定义View (一)的一些扩展,以及对Android自定义View构造函数详解里面内容的一些转载. 首先我们定义一个declare-styleable标签declare-styleable标签的作用是给自定义控件添加自定义属性用的例如这样 (我们定义了文字的颜色,大小,长度,跟背景的颜色) <declare-styleable name="CustomTitleView"> <attr name="titleColor&q
Android自定义控件深入学习 Android生成随机验证码

在上一篇的文章中介绍了自定义控件的属性,详情见<详解Android自定义控件属性TypedArray以及attrs>.那么在这基础上实现随机验证码生成,里面的代码是自定义控件以及涉及到自定义view绘画. 1.先看实现的效果图看到这个效果图是不是感觉还可以.那么就看看源码吧. 2.attr文件 <?xml version="1.0" encoding="utf-8"?> <resources> <attr name=&qu
Android自定义View实现随机验证码

对于android开发来说自定义View还是一个比较重要的技能,所以在这里写一篇自定义View入门的文章,也是实现一个相对简单的随机产生验证码的功能: 自定义View主要也就分为几步 1.自定义View的属性 2.在我们的自定义的布局中获取自定义属性 3.重写onMesure方法 4.重写onDraw方法好现在我们就一步一步的来,首先创建我们的View属性在valuse目录下创建一个attrs.xml的文件,然后: <?xml version="1.0" encodi
Android View教程之自定义验证码输入框效果

前言首先,我们来看看实现的是怎么样的效果: 如果我们拿到这样的UI,想到的布局应该是用4个EditText包在横向的LinearLayout里面,但今天要讲的View,所以我们决定用一个自定义的EditText 画出来. 学到什么? 基本理解画布概念画布的状态.平移布局测量画图片功能需求高亮当前输入框输入满4个数字自动调用方法思路完全重画一个EditText,就包含了测量布局和重新绘制这两个关键步骤.好了,到这里理一下整体的思路: 根据验证码个数以及边框大小来计算输入框显示的宽
Android自定义Chronometer实现短信验证码秒表倒计时功能

本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下一.自定义ChronometerView 继续自TextView 主要原理:先设置一个基准倒计时时间mBaseSeconds,内置handler 每隔1s发送一个空消息,mRemainSeconds--,同时刷新界面视图,回调给外部调用者,只到为零.外部调用者可通过start()/pause()/stop()来控制计时器的工作状态. 可以app中发送短信验证码的场景为例
Android自定义View获取注册验证码倒计时按钮

在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮: 1.先看效果图 2.我们涉及到的变量 //倒计时时长,可设置 /** * 倒计时时长,默认倒计时时间60秒: */ private long length = 60 * 1000; //在点击按钮之前按钮所显示的文字 /** * 在点击按钮之前按钮所显示的文字,默认是获取验证码 */ private Str
Android自定义控件通用验证码输入框的实现

需求 4位验证码输入框: 效果图: 1. 输入框一行可输入4位数字类型的验证码: 2. 4位数字之间有间隔(包括底线): 3. 输入框不允许有光标: 4. 底线根据输入位置显示高亮(蓝色): 6. 输入完成,回调结果,输入过程中,也进行回调: 分析这种效果,很难直接在Edittext上处理: -- 输入框均分4等份,还要有间隔: -- 更难处理的是Edittext输入框禁止光标,那么,没有光标,我们如何调起虚拟键盘输入数据? -- 等... 与其在一个控件上折腾,这么难受,不如自定义一个控件,
Android自定义view制作绚丽的验证码

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承
Android自定义控件实现验证码倒计时

今天给大家带来一个新的控件--验证码倒计时,先看下效果图 1 效果演示 2 使用方式 <com.landptf.view.CountDownM android:id="@+id/cdm_identifying_code" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentRight="true&quo

Android自定义方框EditText注册验证码

相关推荐

随机推荐