Android实现自定义验证码输入框效果(实例代码)

2023-08-02 21:28:06 255

这里提一下，这个当时也是在网上看到一个博主写的代码改了下用在我么项目中的验证码输入框。博主的地址不记得了这里只能顺带标注一下。。。

效果图如下：

就是这个酱紫

直入主题，代码如下：

xml布局：


































































classCustomSmsCodeInputLayout:RelativeLayout,View.OnClickListener{

/**
*枚举中有两种状态，FOUR四个输入框,SIX6个输入框
*/
enumclassInputLineNum(varnum:Int){
FOUR(4),SIX(6)
}

overridefunonClick(v:View?){
when(v?.id){
R.id.tv_get_sms_code->{
clearAllInputValues()
if(onClickSmsCodeTvListener!=null){
onClickSmsCodeTvListener?.onClick(tv_get_sms_code)
}
}
}
}

/*启动计时器*/
funstartCountDownTimer(){
cancelCountDownTimer()
/*倒计时60秒，每次执行间隔1秒*/
mCountDownTimerUtil=CountDownTimerUtil(mContext,tv_get_sms_code,60000,1000)
mCountDownTimerUtil?.start()
}

/*上下文*/
privatevarmContext:Context
/*存放验证码集合*/
varcodes:ArrayList?=ArrayList()
/*输入相关管理器*/
privatevarimm:InputMethodManager?=null

privatevarcolor_default=Color.parseColor("#999999")
privatevarcolor_focus=Color.parseColor("#FF9200")
privatevarcolor_centerLine=Color.parseColor("#FF9200")

/*是否显示中间竖线*/
privatevarisVisibleCenterLine=true

privatevardefaultInputNum=InputLineNum.SIX

privatevarmCountDownTimerUtil:CountDownTimerUtil?=null

constructor(context:Context):super(context){
mContext=context
initView()
}

constructor(context:Context,attrs:AttributeSet):super(context,attrs){
mContext=context
initView()
}

privatefuninitView(){
imm=mContext.getSystemService(Context.INPUT_METHOD_SERVICE)asInputMethodManager?
LayoutInflater.from(mContext).inflate(R.layout.view_sms_code_input_layout,this)
initEvent()
}

privatefuninitEvent(){
//验证码输入
et_code.addTextChangedListener(object:TextWatcher{
overridefunbeforeTextChanged(charSequence:CharSequence,i:Int,i1:Int,i2:Int){}
overridefunonTextChanged(charSequence:CharSequence,i:Int,i1:Int,i2:Int){}
overridefunafterTextChanged(editable:Editable?){
if(editable!=null&&editable.trim().isNotEmpty()){
//每输入
et_code.setText("")
when(defaultInputNum){
InputLineNum.FOUR->{
regexMaxInputSize(editable,InputLineNum.FOUR.num)
}
InputLineNum.SIX->{
regexMaxInputSize(editable,InputLineNum.SIX.num)
}
}

}
}
})
//监听验证码删除按键
et_code.setOnKeyListener(object:View.OnKeyListener{
overridefunonKey(view:View,keyCode:Int,keyEvent:KeyEvent):Boolean{
if(keyCode==KeyEvent.KEYCODE_DEL&&keyEvent.action==KeyEvent.ACTION_DOWN&&codes?.size!!>0){
codes!!.removeAt(codes?.size!!-1)
//回退的时候如果顶部的提示语显示则隐藏掉
if(tv_view_top_tip.visibility==View.VISIBLE){
tv_view_top_tip.visibility=View.INVISIBLE
}
showCode()
returntrue
}
returnfalse
}
})
tv_get_sms_code.setOnClickListener(this)
}

/*控制可输入的最大长度*/
privatefunregexMaxInputSize(editable:Editable,maxSize:Int){
if(codes?.size!!=1){
code1=codes?.get(0)
}
if(codes?.size!!>=2){
code2=codes?.get(1)
}
if(codes?.size!!>=3){
code3=codes?.get(2)
}
if(codes?.size!!>=4){
code4=codes?.get(3)
}
if(codes?.size!!>=5){
code5=codes?.get(4)
}
if(codes?.size!!>=6){
code6=codes?.get(5)
}
tv_code1.text=code1
tv_code2.text=code2
tv_code3.text=code3
tv_code4.text=code4
tv_code5.text=code5
tv_code6.text=code6

setColor()//设置高亮颜色
callBack()//回调
}

/**
*设置高亮颜色
*/
privatefunsetColor(){
v1.setBackgroundColor(color_default)
v2.setBackgroundColor(color_default)
v3.setBackgroundColor(color_default)
v4.setBackgroundColor(color_default)
v5.setBackgroundColor(color_default)
v6.setBackgroundColor(color_default)
if(codes?.size==0){
v1.setBackgroundColor(color_focus)
updateCenterLineColor(v1_center_line)
}
if(codes?.size==1){
v2.setBackgroundColor(color_focus)
updateCenterLineColor(v2_center_line)
}
if(codes?.size==2){
v3.setBackgroundColor(color_focus)
updateCenterLineColor(v3_center_line)
}
if(codes?.size!!==3){
v4.setBackgroundColor(color_focus)
updateCenterLineColor(v4_center_line)
}
if(codes?.size==4){
v5.setBackgroundColor(color_focus)
updateCenterLineColor(v5_center_line)
}
if(codes?.size!!==5){
v6.setBackgroundColor(color_focus)
updateCenterLineColor(v6_center_line)
}
if((defaultInputNum==InputLineNum.FOUR&&codes?.size!!>=4)
||(defaultInputNum==InputLineNum.SIX&&codes?.size!!>=6)){
invisibleAllCenterLine()
}
}

/**
*回调
*/
privatefuncallBack(){
if(onInputListener==null){
return
}
if((defaultInputNum==InputLineNum.FOUR&&codes?.size==4)
||(defaultInputNum==InputLineNum.SIX&&codes?.size==6)){
/*zi自动收起软键盘*/
dismissSoftInput()
onInputListener!!.onSuccess(getPhoneCode())
}else{
onInputListener!!.onInput()
}
}

//定义回调
interfaceOnInputListener{
funonSuccess(code:String)
funonInput()
}

/**
*显示键盘
*/
funshowSoftInput(){
//显示软键盘
if(imm!=null&&et_code!=null){
et_code.requestFocus()//需先获得焦点才能主动弹出软键盘
et_code.postDelayed({imm?.showSoftInput(et_code,InputMethodManager.SHOW_FORCED)},200)
}
}

/**
*英藏键盘
*/
fundismissSoftInput(){
et_code.requestFocus()
//某些情况下必须延迟一定时间在执行，不然英藏不了
et_code.postDelayed({imm?.hideSoftInputFromWindow(et_code.windowToken,0)},200)//强制隐藏键盘
}

/**
*获得手机号验证码
*@return验证码
*/
fungetPhoneCode():String{
valsb=StringBuilder()
returnif(!codes!!.isEmpty()){
for(codeincodes!!){
sb.append(code)
}
sb.toString()
}else{
""
}
}

/*更新竖线显示以及颜色*/
privatefunupdateCenterLineColor(view:View){
if(isVisibleCenterLine){
invisibleAllCenterLine()
view.visibility=View.VISIBLE
}
}

/*英藏所有竖线*/
privatefuninvisibleAllCenterLine(){
v1_center_line.visibility=View.INVISIBLE
v2_center_line.visibility=View.INVISIBLE
v3_center_line.visibility=View.INVISIBLE
v4_center_line.visibility=View.INVISIBLE
v5_center_line.visibility=View.INVISIBLE
v6_center_line.visibility=View.INVISIBLE
}

/*设置顶部提示是否显示*/
funsetTopTipVisible(isVisible:Boolean){
tv_view_top_tip.visibility=if(isVisible)View.VISIBLEelseView.INVISIBLE
}

/*设置当前项中间竖线是否显示*/
funsetCurrentCenterLineVisible(isVisible:Boolean){
isVisibleCenterLine=isVisible
//显示竖线的话默认显示出第一条
v1_center_line.visibility=if(isVisibleCenterLine)View.VISIBLEelseView.INVISIBLE
}

/*设置底部获取短信按钮是否显示*/
funsetBottomSmsTvVisible(isVisible:Boolean){
tv_get_sms_code.visibility=if(isVisible)View.VISIBLEelseView.GONE
}

/*设置顶部提示字样*/
funsetTopTipText(text:String){
tv_view_top_tip.text=text
}

/*设置顶部提示字样颜色*/
funsetTopTipTextColor(textColor:Int){
tv_view_top_tip.setTextColor(textColor)
}

/*设置当前指定项下环线颜色*/
funsetCurrentIndexLineColor(underlineColor:Int){
color_focus=underlineColor
v1.setBackgroundColor(color_focus)
}

/*设置当前指定项的中间线颜色*/
funsetCenterLineColor(centerLineColor:Int){
color_centerLine=centerLineColor
v1_center_line.setBackgroundColor(color_centerLine)
}

/*设置不是当前指定项下划线颜色*/
funsetAnotherIndexLineColor(underlineColor:Int){
color_default=underlineColor
}

/*设置顶部提示的字样和颜色*/
funsetTopTextAndColor(text:String,textColor:Int){
tv_view_top_tip.text=text
tv_view_top_tip.setTextColor(textColor)
}

/*允许的输入类型*/
funsetInputType(type:Int){
et_code?.inputType=type
}

/*更新获取短信按钮状态*/
funupdateGetSmsTvEnable(isEnable:Boolean){
tv_get_sms_code.isEnabled=isEnable
tv_get_sms_code.setTextColor(mContext.resources.getColor(R.color.global_text_color_6c))
}

/*需要展示的输入框数量*/
funsetShowInputNum(num:InputLineNum){
defaultInputNum=num
when(defaultInputNum){
InputLineNum.FOUR->{
ll5_parent.visibility=View.GONE
ll6_parent.visibility=View.GONE
}
InputLineNum.SIX->{
ll5_parent.visibility=View.VISIBLE
ll6_parent.visibility=View.VISIBLE
}
}
}

/*关闭清除计时器*/
funcancelCountDownTimer(){
if(mCountDownTimerUtil!=null){
mCountDownTimerUtil?.cancel()
mCountDownTimerUtil=null
}
}

/**清除所有输入的值*/
funclearAllInputValues(){
setTopTipVisible(false)
codes?.clear()
showCode()
}

/**
*获取到验证码进行弹窗显示
*/
funshowSmsCodeDialogTip(msg:String,title:String){
valmsgSplit=msg.toList()
DialogCreator.createTitleDialog(
mContextasActivity,
title,
msg,
DialogViewInfo("知道了"){_,_->
codes?.clear()
msgSplit.forEach{item->codes?.add(item.toString())}
showCode()
}
).subscribe()
}

/**
*验证出错时抖动输入框提示
*/
funstartShakeTip(){
valanimX=ObjectAnimator.ofFloat(this,"translationX",0F,5F,-10F,0F)
valanimY=ObjectAnimator.ofFloat(this,"translationY",0F,5F,-10F,0F)
valanimatorSet=AnimatorSet()
animatorSet.playTogether(animX,animY)//同时执行x、y轴的动画
animatorSet.interpolator=CycleInterpolator(2F)//执行2次
animatorSet.duration=500//1秒后结束
animatorSet.doOnEnd{
clearAllInputValues()
animatorSet.cancel()
}
animatorSet.start()
}

/*输入框监听回调《供外部调用》*/
privatevaronInputListener:OnInputListener?=null
funsetOnInputListener(onInputListener:OnInputListener){
this.onInputListener=onInputListener
}

/*获取验证码点击回调《供外部调用》*/
privatevaronClickSmsCodeTvListener:OnClickListener?=null
funsetOnClickSmsCodeTvListener(onClickSmsCodeTvListener:OnClickListener){
this.onClickSmsCodeTvListener=onClickSmsCodeTvListener
}

}

主要有两种显示样式，在枚举中定义了4个输入框6个输入框

基本调用代码如下：

//ll_sms_input就是CustomSmsCodeInputLayout
ll_sms_input.run{
//里边的配置可以自行选择配置
setTopTipVisible(false)
setCurrentCenterLineVisible(true)
setBottomSmsTvVisible(true)
setShowInputNum(CustomSmsCodeInputLayout.InputLineNum.SIX)//这里加载的是六个输入框
setCurrentIndexLineColor(resources.getColor(R.color.global_text_color_grey))
//设置输入类型只能是数字
setInputType(InputType.TYPE_CLASS_NUMBERorInputType.TYPE_NUMBER_FLAG_SIGNED)
showSoftInput()
}
ll_sms_input.setOnInputListener()//做输入完成后的监听
ll_sms_input.setOnClickSmsCodeTvListener()//点击重新获取按钮的监听

总结

以上所述是小编给大家介绍的Android实现自定义验证码输入框效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android实现自定义验证码输入框效果(实例代码)

热门推荐

随机推荐