這裡提一下，這個當時也是在網上看到一個博主寫的程式碼改了下用在我麼專案中的驗證碼輸入框。博主的地址不記得了這裡只能順帶標註一下。。。

效果圖如下：

就是這個醬紫

直入主題，程式碼如下：

xml佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:gravity="end"
  >
 <TextView
   android:id="@+id/tv_view_top_tip"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginBottom="5dp"
   android:textColor="@color/img_code_text_error_color"
   android:textSize="12sp"
   android:text="error"
   />
 <RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
  <LinearLayout
    android:id="@+id/ll_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:baselineAligned="false">
   <LinearLayout
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginRight="5dp">
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:textSize="24sp"
       android:textStyle="bold"
       android:background="@null"
       android:layout_centerInParent="true"
       android:gravity="center"/>
     <View
       android:id="@+id/v1_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor"
       />
    </RelativeLayout>
 
    <View
      android:id="@+id/v1"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/mainColor" />
   </LinearLayout>
 
   <LinearLayout
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginRight="5dp"
     android:layout_marginLeft="5dp">
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:textSize="24sp"
       android:textStyle="bold"
       android:background="@null"
       android:layout_centerInParent="true"
       android:gravity="center"/>
     <View
       android:id="@+id/v2_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor" />
    </RelativeLayout>
 
    <View
      android:id="@+id/v2"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/global_text_color_grey" />
   </LinearLayout>
   <LinearLayout
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginRight="5dp"
     android:layout_marginLeft="5dp">
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code3"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:textSize="24sp"
       android:textStyle="bold"
       android:background="@null"
       android:layout_centerInParent="true"
       android:gravity="center"/>
     <View
       android:id="@+id/v3_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor"/>
    </RelativeLayout>
 
    <View
      android:id="@+id/v3"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/global_text_color_grey" />
   </LinearLayout>
   <LinearLayout
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginRight="5dp"
     android:layout_marginLeft="5dp">
 
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code4"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:background="@null"
       android:textStyle="bold"
       android:textSize="24sp"
       android:layout_centerInParent="true"
       android:gravity="center"/>
 
     <View
       android:id="@+id/v4_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor" />
    </RelativeLayout>
    <View
      android:id="@+id/v4"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/global_text_color_grey" />
   </LinearLayout>
   <LinearLayout
     android:id="@+id/ll5_parent"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginRight="5dp"
     android:layout_marginLeft="5dp">
 
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code5"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:background="@null"
       android:textStyle="bold"
       android:textSize="24sp"
       android:layout_centerInParent="true"
       android:gravity="center"/>
 
     <View
       android:id="@+id/v5_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor" />
    </RelativeLayout>
    <View
      android:id="@+id/v5"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/global_text_color_grey" />
   </LinearLayout>
   <LinearLayout
     android:id="@+id/ll6_parent"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:orientation="vertical"
     android:layout_marginLeft="5dp">
 
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="6dp"
    >
     <TextView
       android:id="@+id/tv_code6"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:textColor="@color/global_text_color_10"
       android:background="@null"
       android:textStyle="bold"
       android:textSize="24sp"
       android:layout_centerInParent="true"
       android:gravity="center"/>
 
     <View
       android:id="@+id/v6_center_line"
       android:layout_width="1.5dp"
       android:layout_height="16dp"
       android:visibility="invisible"
       android:layout_centerInParent="true"
       android:background="@color/mainColor" />
    </RelativeLayout>
    <View
      android:id="@+id/v6"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="@color/global_text_color_grey" />
   </LinearLayout>
  </LinearLayout>
 
  <EditText
    android:id="@+id/et_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/ll_code"
    android:layout_alignBottom="@+id/ll_code"
    android:background="@android:color/transparent"
    android:textColor="@android:color/transparent"
    android:cursorVisible="false"
    android:inputType="number"/>
 </RelativeLayout>
 
 <TextView
   android:id="@+id/tv_get_sms_code"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="9.5dp"
   android:paddingBottom="10dp"
   android:textColor="@color/text_color_pressed_selector"
   android:textSize="12sp"
   android:text="@string/resend_verify_code"
 />
 
</LinearLayout>
class CustomSmsCodeInputLayout : RelativeLayout,View.OnClickListener {
 
 /**
  * 列舉中有兩種狀態，FOUR四個輸入框,SIX6個輸入框
  */
 enum class InputLineNum(var num: Int){
  FOUR(4),SIX(6)
 }
 
 override fun onClick(v: View?) {
  when(v?.id){
   R.id.tv_get_sms_code->{
    clearAllInputValues()
    if (onClickSmsCodeTvListener != null) {
     onClickSmsCodeTvListener?.onClick(tv_get_sms_code)
    }
   }
  }
 }
 
 /*啟動計時器*/
 fun startCountDownTimer() {
  cancelCountDownTimer()
  /*倒計時60秒，每次執行間隔1秒*/
  mCountDownTimerUtil = CountDownTimerUtil(mContext,tv_get_sms_code,60000,1000)
  mCountDownTimerUtil?.start()
 }
 
 /*上下文*/
 private var mContext: Context
 /*存放驗證碼集合*/
 var codes: ArrayList<String>? = ArrayList()
 /*輸入相關管理器*/
 private var imm: InputMethodManager? = null
 
 private var color_default = Color.parseColor("#999999")
 private var color_focus = Color.parseColor("#FF9200")
 private var color_centerLine = Color.parseColor("#FF9200")
 
 /*是否顯示中間豎線*/
 private var isVisibleCenterLine = true
 
 private var defaultInputNum = InputLineNum.SIX
 
 private var mCountDownTimerUtil: CountDownTimerUtil? = null
 
 constructor(context: Context) : super(context){
  mContext = context
  initView()
 }
 
 constructor(context: Context,attrs: AttributeSet) : super(context,attrs){
  mContext = context
  initView()
 }
 
 private fun initView() {
  imm = mContext.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager?
  LayoutInflater.from(mContext).inflate(R.layout.view_sms_code_input_layout,this)
  initEvent()
 }
 
 private fun initEvent() {
  //驗證碼輸入
  et_code.addTextChangedListener(object : TextWatcher {
   override fun beforeTextChanged(charSequence: CharSequence,i: Int,i1: Int,i2: Int) {}
   override fun onTextChanged(charSequence: CharSequence,i2: Int) {}
   override fun afterTextChanged(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 {
   override fun onKey(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()
     return true
    }
    return false
   }
  })
  tv_get_sms_code.setOnClickListener(this)
 }
 
 /*控制可輸入的最大長度*/
 private fun regexMaxInputSize(editable: Editable,maxSize: Int) {
  if (codes?.size!! < maxSize) {
   // 過濾掉由空格鍵引起的字串出現空長串的問題，使用正則替換規則（\\s*）可以替換掉絕大多數空白字元或空格
   codes?.add(editable.toString().replace(Regex("\\s*"),""))
   showCode()
  }
 }
 
 /**
  * 顯示輸入的驗證碼
  */
 private fun showCode() {
  var code1: String? = ""
  var code2: String? = ""
  var code3: String? = ""
  var code4: String? = ""
  var code5: String? = ""
  var code6: String? = ""
  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()//回撥
 }
 
 /**
  * 設定高亮顏色
  */
 private fun setColor() {
  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()
  }
 }
 
 /**
  * 回撥
  */
 private fun callBack() {
  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()
  }
 }
 
 //定義回撥
 interface OnInputListener {
  fun onSuccess(code: String)
  fun onInput()
 }
 
 /**
  * 顯示鍵盤
  */
 fun showSoftInput() {
  //顯示軟鍵盤
  if (imm != null && et_code != null) {
   et_code.requestFocus() //需先獲得焦點才能主動彈出軟鍵盤
   et_code.postDelayed({ imm?.showSoftInput(et_code,InputMethodManager.SHOW_FORCED) },200)
  }
 }
 
 /**
  * 英藏鍵盤
  */
 fun dismissSoftInput() {
  et_code.requestFocus()
  //某些情況下必須延遲一定時間在執行，不然英藏不了
  et_code.postDelayed({ imm?.hideSoftInputFromWindow(et_code.windowToken,0) },200) //強制隱藏鍵盤
 }
 
 /**
  * 獲得手機號驗證碼
  * @return 驗證碼
  */
 fun getPhoneCode(): String {
  val sb = StringBuilder()
  return if (!codes!!.isEmpty()) {
   for (code in codes!!) {
    sb.append(code)
   }
   sb.toString()
  }else{
   ""
  }
 }
 
 /*更新豎線顯示以及顏色*/
 private fun updateCenterLineColor(view: View){
  if (isVisibleCenterLine) {
   invisibleAllCenterLine()
   view.visibility = View.VISIBLE
  }
 }
 
 /*英藏所有豎線*/
 private fun invisibleAllCenterLine() {
  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
 }
 
 /*設定頂部提示是否顯示*/
 fun setTopTipVisible(isVisible: Boolean){
  tv_view_top_tip.visibility = if(isVisible) View.VISIBLE else View.INVISIBLE
 }
 
 /*設定當前項中間豎線是否顯示*/
 fun setCurrentCenterLineVisible(isVisible: Boolean){
  isVisibleCenterLine = isVisible
  //顯示豎線的話預設顯示出第一條
  v1_center_line.visibility = if(isVisibleCenterLine) View.VISIBLE else View.INVISIBLE
 }
 
 /*設定底部獲取簡訊按鈕是否顯示*/
 fun setBottomSmsTvVisible(isVisible: Boolean){
  tv_get_sms_code.visibility = if(isVisible) View.VISIBLE else View.GONE
 }
 
 /*設定頂部提示字樣*/
 fun setTopTipText(text: String){
  tv_view_top_tip.text = text
 }
 
 /*設定頂部提示字樣顏色*/
 fun setTopTipTextColor(textColor: Int){
  tv_view_top_tip.setTextColor(textColor)
 }
 
 /*設定當前指定項下環線顏色*/
 fun setCurrentIndexLineColor(underlineColor: Int){
  color_focus = underlineColor
  v1.setBackgroundColor(color_focus)
 }
 
 /*設定當前指定項的中間線顏色*/
 fun setCenterLineColor(centerLineColor: Int){
  color_centerLine = centerLineColor
  v1_center_line.setBackgroundColor(color_centerLine)
 }
 
 /*設定不是當前指定項下劃線顏色*/
 fun setAnotherIndexLineColor(underlineColor: Int){
  color_default = underlineColor
 }
 
 /*設定頂部提示的字樣和顏色*/
 fun setTopTextAndColor(text: String,textColor: Int){
  tv_view_top_tip.text = text
  tv_view_top_tip.setTextColor(textColor)
 }
 
 /*允許的輸入型別*/
 fun setInputType(type: Int) {
  et_code?.inputType = type
 }
 
 /*更新獲取簡訊按鈕狀態*/
 fun updateGetSmsTvEnable(isEnable: Boolean){
  tv_get_sms_code.isEnabled = isEnable
  tv_get_sms_code.setTextColor(mContext.resources.getColor(R.color.global_text_color_6c))
 }
 
 /*需要展示的輸入框數量*/
 fun setShowInputNum(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
   }
  }
 }
 
 /*關閉清除計時器*/
 fun cancelCountDownTimer(){
  if (mCountDownTimerUtil != null){
   mCountDownTimerUtil?.cancel()
   mCountDownTimerUtil = null
  }
 }
 
 /**清除所有輸入的值*/
 fun clearAllInputValues(){
  setTopTipVisible(false)
  codes?.clear()
  showCode()
 }
 
 /**
  * 獲取到驗證碼進行彈窗顯示
  */
 fun showSmsCodeDialogTip(msg: String,title: String){
  val msgSplit = msg.toList()
  DialogCreator.createTitleDialog(
   mContext as Activity,title,msg,DialogViewInfo("知道了"){ _,_ ->
    codes?.clear()
    msgSplit.forEach { item -> codes?.add(item.toString()) }
    showCode()
   }
  ).subscribe()
 }
 
 /**
  * 驗證出錯時抖動輸入框提示
  */
 fun startShakeTip(){
  val animX = ObjectAnimator.ofFloat(this,"translationX",0F,5F,-10F,0F)
  val animY = ObjectAnimator.ofFloat(this,"translationY",0F)
  val animatorSet = AnimatorSet()
  animatorSet.playTogether(animX,animY) // 同時執行x、y軸的動畫
  animatorSet.interpolator = CycleInterpolator(2F)// 執行2次
  animatorSet.duration = 500 // 1秒後結束
  animatorSet.doOnEnd {
   clearAllInputValues()
   animatorSet.cancel()
  }
  animatorSet.start()
 }
 
 /*輸入框監聽回撥《供外部呼叫》*/
 private var onInputListener: OnInputListener? = null
 fun setOnInputListener(onInputListener: OnInputListener) {
  this.onInputListener = onInputListener
 }
 
 /*獲取驗證碼點選回撥《供外部呼叫》*/
 private var onClickSmsCodeTvListener: OnClickListener? = null
 fun setOnClickSmsCodeTvListener(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_NUMBER or InputType.TYPE_NUMBER_FLAG_SIGNED)
   showSoftInput()
  }
ll_sms_input.setOnInputListener()//做輸入完成後的監聽
 
ll_sms_input.setOnClickSmsCodeTvListener()//點選重新獲取按鈕的監聽

總結

以上所述是小編給大家介紹的Android實現自定義驗證碼輸入框效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！