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" />

特点介绍

特点 类型 概述
input_canvas_type enum 制作类型,现在有三种，线(line)，矩形(rect)，圆角(round),圆角需求结合特点input_radius运用
input_canvas_style enum 制作画笔类型，空心仍是实心，空心(stroke)，实心(fill)，实心和空心(fill_and_stroke)
input_background color 输入框的布景
input_select_background color 输入框的挑选布景
input_radius dimension 输入框圆视点数
input_line_height dimension 输入框下划线的高度
input_length integer 输入框的长度
input_spacing dimension 输入框的间隔
input_text_color color 输入框的内容色彩
input_text_size dimension 输入框的文字巨细
input_text_type enum 输入框的文字类型，普通文字(text)，星号(asterisk)，黑圆圈(round)
input_is_cursor boolean 输入框是否有光标,默许展现光标
input_cursor_direction boolean 输入框光标方向
input_cursor_width dimension 输入框光标宽度
input_cursor_color color 输入框光标色彩
input_cursor_spacing color 输入框光标间隔
input_cursor_is_twinkle boolean 输入框的光标是否闪耀
input_is_android_keyboard boolean 输入框是否弹起原生的软件盘，默许谈起，能够调用自界说的键盘
input_cursor_margin_bottom dimension 横向的光标间隔底部的间隔

办法介绍

办法 参数 概述
clearContent 无参 清空内容
setContent String 设置内容
hideInputMethod 无参 躲藏软键盘，运用体系软键盘时
showKeyBoard 回调函数 需求弹起自己的软键盘时能够调用
inputChangeContent 回调函数 获取连续的输入结果
inputEndResult 回调函数 获取终究的输入内容，当等于你设置的length时进行回调

二、详细完成进程。

完成的进程也是十分的简略，大致能够分为五步走，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才会生效。

本文正在参与「金石方案」