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才会生效。
本文正在参与「金石方案」
