Android自定义短信验证码组件

Android自定义短信验证码组件,供大家参考,具体内容如下

效果图

Android自定义短信验证码组件_第1张图片

1.布局实现

因为要禁用光标,所以我用TextView代替了EditText,每一行显示的验证码个数由用户决定,所以我这里用线性布局的权重,对TextView进行控制宽度等分,然后设置选中和未选中当前TextView的底部边框,设置高亮颜色背景

2.接受用户输入

我这里使用了TextView,但是怎么接受用户输入的值呢。这里我直接继承了RelativeLayout,然后添加了一个透明的EditText,覆盖在这几个TextView上面,用户就可以点击唤起键盘输入

3.TextView如何显示值和删除值

我这里设置EditText的TextColor和BackgroundColor为Color.TRANSPARENT 透明,然后监听EditText的addTextChangedListener事件和setOnKeyListener按键删除事件,然后把值添加到TextView上,就能实现了,然后在写一个对外的接口。获取到输入的验证码。

4.添加闪烁的动画

我这里使用了ObjectAnimator,初始化给每个TextView添加动画,然后在输入的时候给当前的TextView启动动画,取消其他TextView动画

具体源码如下:

/**
 * @author wu_ming_zhi_bei
 * @date 2021/1/27 15:00
 * @Notes
 */
public class VerificationCodeView extends RelativeLayout {
  private Context mContext;
  private RelativeLayout.LayoutParams layoutParams;
  private int num = 4;//验证码数量
  private int codeSize;//字体大小
  private int codeColor;//字体颜色
  private List tvs = new ArrayList<>();
  private List codes = new ArrayList<>();
  private EditText etCode;
  private InputMethodManager imm;
  List animators = new ArrayList<>();

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

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

  public VerificationCodeView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs);
  }

  private void init(Context context, AttributeSet attrs) {
    this.mContext = context;
    imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);

    TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.VerificationCodeView);
    num = a.getInteger(R.styleable.VerificationCodeView_num,4);
    codeSize = a.getDimensionPixelSize(R.styleable.VerificationCodeView_codeSize,18);
    codeColor = a.getColor(R.styleable.VerificationCodeView_codeColor,getResources().getColor(R.color.theme_color));
    //初始化一个大的LinearLayout来存放验证码
    LinearLayout codeBox = new LinearLayout(mContext);
    codeBox.setOrientation(LinearLayout.HORIZONTAL);
    codeBox.setGravity(Gravity.CENTER);
    //添加方块
    for(int i=0;i0) {
          etCode.setText("");//清空数据
          if(codes.size() < num){
            codes.add(editable.toString());
            showCode();
          }
        }
      }
    });

    // 监听验证码删除按键
    etCode.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;
      }
    });
    addView(codeBox);
    addView(etCode);
    addAnimation();//添加东安湖
    setTwinkle();//开启动画
  }

  //显示验证码
  private void showCode(){
    int size = codes.size();//1 6
    for(int i=0;ii){
        tvs.get(i).setText(codes.get(i));//添加到textview
      }else if(size==i){
        tvs.get(i).setText("|");
      }else{
        tvs.get(i).setText("");
      }
    }
    etCode.setFocusable(true);
    etCode.requestFocus();
    etCode.setFocusableInTouchMode(true);
    etCode.requestFocusFromTouch();
    setTwinkle();//动画
    callBack();//回调

  }

  private void showColor(){
    int size = codes.size();
    if(size==0){
      tvs.get(0).setBackground(mContext.getResources().getDrawable(R.drawable.code_border_current_bottom));
    }else{
      for(int i=0;i 
 

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

你可能感兴趣的:(Android自定义短信验证码组件)