一个简单的自定义输入框

Hello啊各位老铁，今天还是一篇关于自定义View相关的，带来一个大众的，常见的一个输入框，很多的场合下都能遇到，比如验证码，密码框等等，配置了很多常见的属性，可以满足不同场合下的需求，矩形框，圆角框，下划线等等均可满足，长度设置，光标选择，背景选择，均可控制，废话不多数，我们直接进入正题。

今天的内容大致如下：

1、效果及代码具体调用。

2、具体实现过程。

3、开源地址。

4、总结及注意事项。

一、效果及代码具体调用。

效果展示

边框黑圆圈展示

边框文字展示

纯色背景文字展示

纯色背景黑圆圈展示

纯色背景星号展示

下划线文字展示

下划线黑圆圈展示

纯色背景横向光标展示

能实现的效果还有很多，大家可以根据属性来动态配置即可。

关于使用方式，大家可以下载源码，直接复制即可，毕竟只有一个类，如果懒得下载源码，使用我给大家准备的远程Maven也是可以的，也是非常的方便，远程Maven具体使用如下。

Maven具体调用

1、在你的根项目下的build.gradle文件下，引入maven。

allprojects {

    repositories {

        maven { url "https://gitee.com/AbnerAndroid/almighty/raw/master" }

    }

}

2、在你需要使用的Module中build.gradle文件下，引入依赖。

dependencies {

    implementation 'com.vip:edit:1.0.3'

}

代码使用

   <com.vip.edit.InputBoxView

        android:id="@+id/ib_view"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10dp"

        android:layout_marginTop="30dp"

        android:layout_marginRight="10dp"

        app:input_background="#f5f5f5"

        app:input_canvas_type="rect"

        app:input_length="6"

        app:input_text_size="16sp"

        app:input_text_type="round"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

属性介绍

方法介绍

二、具体实现过程。

实现的过程也是非常的简单，大致可以分为五步走，1、绘制方格或下划线，2、绘制内容，3、绘制光标，4、实现光标闪动，5、软键盘控制，来，我们一步一步的来实现。

1、绘制方格或下划线

绘制方格或下划线，如下草图所示，需要根据传递的数量来进行绘制，首先要计算出每一格的宽度，也就是屏幕的宽度-格子之间的边距/格子的数量。

  //每个输入框的宽度=屏幕的宽-左右的边距-输入框直接的间距/输入框的个数

  mRectWidth = (width - mSpacing * (mLength - 1)) / mLength

得到了每一格的宽度之后，就可以根据数量来进行动态的绘制了，无非就是遍历，根据属性input_canvas_type来绘制不同的效果，mSelectBackGroundColor变量为属性input_select_background设置的值，用来标记选择的输入框颜色，如下图所示：

如果，你想要改变选中的格子边框颜色，就可以进行设置颜色值，同样的需要搭配画笔的绘制样式，如下代码所示：

 /**

     * AUTHOR:AbnerMing

     * INTRODUCE:绘制输入框

     */

    private fun canvasInputBox(canvas: Canvas?) {

        mPaint!!.apply {

            color = mBackGroundColor//设置背景颜色

            strokeCap = Paint.Cap.ROUND//圆角线

        }



        for (a in 0 until mLength) {


            val textLength = text.toString().length//当前输入的长度


            if (mSelectBackGroundColor != 0) {

                var paintStyle = Paint.Style.STROKE

                when (mInputCanvasStyle) {

                    0 -> {

                        paintStyle = Paint.Style.STROKE

                    }

                    1 -> {

                        paintStyle = Paint.Style.FILL

                    }

                    2 -> {

                        paintStyle = Paint.Style.FILL_AND_STROKE

                    }

                }

                if (a == textLength) {

                    mPaint!!.apply {

                        style = paintStyle

                        color = mSelectBackGroundColor//设置选中背景颜色

                    }

                } else {

                    mPaint!!.apply {

                        style = paintStyle

                        color = mBackGroundColor//设置背景颜色

                    }


                }

            }


            val left = a * mRectWidth + a * mSpacing

            val top = 0f

            val right = (a + 1) * mRectWidth + a * mSpacing

            val bottom = height.toFloat()


            when (mInputCanvasType) {

                0 -> {

                    //绘制下划线

                    canvas?.drawRoundRect(

                        left,

                        bottom - mLineHeight,

                        right,

                        bottom,

                        mRadius,

                        mRadius,

                        mPaint!!

                    )

                }

                1 -> {

                    //绘制矩形

                    canvas?.drawRect(left, top, right, bottom, mPaint!!)

                }

                2 -> {

                    //绘制圆角矩形

                    canvas?.drawRoundRect(left, top, right, bottom, mRadius, mRadius, mPaint!!)

                }

            }

        }

    }

绘制格子，最重要的就是计算每个格子的位置，其实只需要考虑X的坐标即可，Y可以直接充满View的高度。

2、绘制内容

绘制输入的内容，和绘制格子一样，重要的就是计算位置，有了格子的位置之后，计算内容就比较的简单了，只需要获取格子的中间坐标即可，计算如下：首先，拿到每个格子的右边X坐标点，再减去格子宽度的一半，就得到的中间的X坐标，但是，文字的绘制，还需要减去文字宽度的一半，这个一定要注意，否则，文字就是从中间点往右进行绘制的，就偏移了中间点。

文字的X轴计算如下：

  val textX = ((a + 1) * mRectWidth) + a * mSpacing - mRectWidth / 2 - w / 2

同理，Y的计算方式类似，全部代码如下，有一点需要注意下，就是星号，星号和文字以及圆圈还是有不一样的地方，那就比较小，那么就需要特殊的处理一下，都是基础的代码，没什么好说的。

/**

     * AUTHOR:AbnerMing

     * INTRODUCE:绘制内容

    */

    private fun drawText(canvas: Canvas?) {

        mPaint!!.apply {

            style = Paint.Style.FILL

            color = mTextColor//设置内容颜色

            textSize = mTextSize

        }


        if (!TextUtils.isEmpty(text)) {

            for (a in text!!.indices) {

                val content = text!![a].toString()

                var endContent = content


                if (mTextType == 1) {

                    endContent = "*"

                } else if (mTextType == 2) {

                    endContent = "●"

                }


                val rect = Rect()

                mPaint!!.getTextBounds(endContent, 0, content.length, rect)

                val w = mPaint!!.measureText(endContent)//获取文字的宽

                //获取文字的X坐标

                val textX = ((a + 1) * mRectWidth) + a * mSpacing - mRectWidth / 2 - w / 2

                val h = rect.height()

                //获取文字的Y坐标

                var textY = (height + h) / 2.0f

                //针对星号做特殊处理

                if (mTextType == 1) {

                    textY += mTextSize / 3

                }


                canvas?.drawText(endContent, textX, textY, mPaint!!)

            }

        }

    }

3、绘制光标

绘制光标就比较简单了，无非就是纵向还是横向，也是根据设置的属性来控制的，纵向计算出X坐标即可，横向就计算出Y的坐标即可。需要注意的是，距离左右或者上下的间距控制，代码如下：

 /**

     * AUTHOR:AbnerMing

     * INTRODUCE:绘制光标

     */

    private fun drawCursor(canvas: Canvas?) {

        mCursorPaint!!.apply {

            strokeWidth = mCursorWidth

            isAntiAlias = true

        }

        //需要根据当前输入的位置，计算光标的绘制位置

        val len = text?.length

        if (len!! < mLength) {

            if (mCursorDirection) {

                //纵向光标

                val rectWidth = ((len + 1) * mRectWidth) + len * mSpacing - mRectWidth / 2

                canvas?.drawLine(

                    rectWidth,

                    mCursorSpacing,

                    rectWidth,

                    height - mCursorSpacing,

                    mCursorPaint!!

                )

            } else {

                val endX = ((len + 1) * mRectWidth) + len * mSpacing

                val startX = endX - mRectWidth

                //横向光标

                canvas?.drawLine(

                    startX + mCursorSpacing,

                    height.toFloat() - mCursorMarginBottom,//减去距离底部的边距

                    endX - mCursorSpacing,

                    height.toFloat() - mCursorMarginBottom,

                    mCursorPaint!!

                )

            }

        }


    }

4、实现光标闪动

光标闪动，使用了一个属性动画，设置无限循环，然后控制画笔的颜色即可。

    private val cursorAnim: ValueAnimator = ValueAnimator.ofInt(0, 2).apply {

        duration = 1000

        repeatCount = ValueAnimator.INFINITE//无线循环

        repeatMode = ValueAnimator.RESTART//正序

    }

在onAttachedToWindow方法里做启动动画操作：mCursorTwinkle为是否需要光标，需要再启动，是通过属性input_cursor_is_twinkle来控制的。

if (mCursorTwinkle) {

            //不在运行，开启动画

            if (!cursorAnim.isRunning) {

                cursorAnim.start()

            }

            cursorAnim.addUpdateListener {

                val v = it.animatedValue as Int

                if (v == 0) {

                    mCursorPaint?.color = Color.TRANSPARENT

                } else {

                    mCursorPaint?.color = mCursorColor

                }

                postInvalidate()

            }

        }

同样的，当onDetachedFromWindow方法时，就需要结束。

if (mCursorTwinkle) {

            if (cursorAnim.isRunning || cursorAnim.isStarted) {

                cursorAnim.end()

            }

            cursorAnim.removeAllUpdateListeners()

        }

判断在文字的输入时进行闪烁，这个是很重要的，也就是闪烁的位置，一定是当前的输入位置，未输入就是第一格闪烁，依次类推，输入完成，就结束闪烁。

override fun onTextChanged(

        text: CharSequence?,

        start: Int,

        lengthBefore: Int,

        lengthAfter: Int

    ) {

        super.onTextChanged(text, start, lengthBefore, lengthAfter)

        if (!mIsAttachedToWindows) return


  		//输入框的光标是否闪烁

        if (mCursorTwinkle) {

            if ((text?.length ?: 0) >= mLength) {

                cursorAnim.takeIf { it.isStarted || it.isRunning }?.end()

            } else if (!cursorAnim.isRunning) {

                cursorAnim.start()

            }

        }


        val endContent = text.toString()

        if (endContent.length == mLength) {

            //一样的话，进行回调

            mEndContentResult?.invoke(endContent)

        }


        mChangeContent?.invoke(endContent)


    }

5、软键盘控制

软件盘控制，有两种方式，一种是弹出系统的软键盘，一种是弹出自定义的软键盘，这个控制也是由传递的属性input_is_android_keyboard来操作的，默认为true，弹出系统的，否则就弹出自定义的，针对自定义的弹出，需要暴露出实现的方法，由使用者进行实现。

 /**

     * AUTHOR:AbnerMing

     * INTRODUCE:弹起软件盘

     */

    private fun showKeyboard() {

        if (mIsAndroidKeyBoard) {

            isFocusable = true

            isFocusableInTouchMode = true

            requestFocus()

            val im =

                context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager

                    ?: return

            im.showSoftInput(this, InputMethodManager.SHOW_FORCED)

        } else {

            //启用自定义的软键盘

            if (mKeyBoard != null) {

                mKeyBoard?.invoke()

            }

        }

    }

mKeyBoard为弹出自定义软键盘回调函数，代码如下：

    /**

     * AUTHOR:AbnerMing

     * INTRODUCE:显示自己定义的软件盘

     */

    private var mKeyBoard: (() -> Unit?)? = null

    fun showKeyBoard(block: () -> Unit) {

        mKeyBoard = block

    }

隐藏软键盘操作，可以在页面隐藏时进行触发，目前在自定义View中onDetachedFromWindow方法里进行了调用，当然，你可以自己选择性调用。

    /**

     * AUTHOR:AbnerMing

     * INTRODUCE:隐藏软件盘

     */

    fun hideInputMethod() {

        if (mIsAndroidKeyBoard) {

            val imm: InputMethodManager =

                context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager

            imm.hideSoftInputFromWindow(windowToken, 0) //强制隐藏

        }

    }

三、开源地址。

目前项目已经开源，需要的朋友可以查看：github.com/AbnerMing88…

四、总结及注意事项。

1、触摸输入框，默认是弹出系统自带的软键盘的，如果想使用自定义的，设置属性input_is_android_keyboard为false即可，并调用showKeyBoard回调函数，在showKeyBoard方法里进行书写弹起自定义软键盘即可。

2、如果绘制类型属性input_canvas_type为round，也就是圆角时，需要结合input_radius这个属性，来实现圆角的角度大小。

3、光标的方向属性input_cursor_direction是一个boolean类型的值，默认是纵向的，false是为横向的。

4、当输入框的选择背景input_select_background不为空时，画笔属性input_canvas_style才会生效。