一个简单的自定义输入框-阿里云开发者社区

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.InputBoxViewandroid: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:绘制输入框*/privatefuncanvasInputBox(canvas: Canvas?) {
mPaint!!.apply {
color=mBackGroundColor//设置背景颜色strokeCap=Paint.Cap.ROUND//圆角线        }
for (ain0untilmLength) {
valtextLength=text.toString().length//当前输入的长度if (mSelectBackGroundColor!=0) {
varpaintStyle=Paint.Style.STROKEwhen (mInputCanvasStyle) {
0-> {
paintStyle=Paint.Style.STROKE                    }
1-> {
paintStyle=Paint.Style.FILL                    }
2-> {
paintStyle=Paint.Style.FILL_AND_STROKE                    }
                }
if (a==textLength) {
mPaint!!.apply {
style=paintStylecolor=mSelectBackGroundColor//设置选中背景颜色                    }
                } else {
mPaint!!.apply {
style=paintStylecolor=mBackGroundColor//设置背景颜色                    }
                }
            }
valleft=a*mRectWidth+a*mSpacingvaltop=0fvalright= (a+1) *mRectWidth+a*mSpacingvalbottom=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轴计算如下：

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

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

/*** AUTHOR:AbnerMing* INTRODUCE:绘制内容*/privatefundrawText(canvas: Canvas?) {
mPaint!!.apply {
style=Paint.Style.FILLcolor=mTextColor//设置内容颜色textSize=mTextSize        }
if (!TextUtils.isEmpty(text)) {
for (aintext!!.indices) {
valcontent=text!![a].toString()
varendContent=contentif (mTextType==1) {
endContent="*"                } elseif (mTextType==2) {
endContent="●"                }
valrect=Rect()
mPaint!!.getTextBounds(endContent, 0, content.length, rect)
valw=mPaint!!.measureText(endContent)//获取文字的宽//获取文字的X坐标valtextX= ((a+1) *mRectWidth) +a*mSpacing-mRectWidth/2-w/2valh=rect.height()
//获取文字的Y坐标vartextY= (height+h) /2.0f//针对星号做特殊处理if (mTextType==1) {
textY+=mTextSize/3                }
canvas?.drawText(endContent, textX, textY, mPaint!!)
            }
        }
    }

3、绘制光标

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

/*** AUTHOR:AbnerMing* INTRODUCE:绘制光标*/privatefundrawCursor(canvas: Canvas?) {
mCursorPaint!!.apply {
strokeWidth=mCursorWidthisAntiAlias=true        }
//需要根据当前输入的位置，计算光标的绘制位置vallen=text?.lengthif (len!!<mLength) {
if (mCursorDirection) {
//纵向光标valrectWidth= ((len+1) *mRectWidth) +len*mSpacing-mRectWidth/2canvas?.drawLine(
rectWidth,
mCursorSpacing,
rectWidth,
height-mCursorSpacing,
mCursorPaint!!                )
            } else {
valendX= ((len+1) *mRectWidth) +len*mSpacingvalstartX=endX-mRectWidth//横向光标canvas?.drawLine(
startX+mCursorSpacing,
height.toFloat() -mCursorMarginBottom,//减去距离底部的边距endX-mCursorSpacing,
height.toFloat() -mCursorMarginBottom,
mCursorPaint!!                )
            }
        }
    }

4、实现光标闪动

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

privatevalcursorAnim: ValueAnimator=ValueAnimator.ofInt(0, 2).apply {
duration=1000repeatCount=ValueAnimator.INFINITE//无线循环repeatMode=ValueAnimator.RESTART//正序    }

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

if (mCursorTwinkle) {
//不在运行，开启动画if (!cursorAnim.isRunning) {
cursorAnim.start()
            }
cursorAnim.addUpdateListener {
valv=it.animatedValueasIntif (v==0) {
mCursorPaint?.color=Color.TRANSPARENT                } else {
mCursorPaint?.color=mCursorColor                }
postInvalidate()
            }
        }

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

if (mCursorTwinkle) {
if (cursorAnim.isRunning||cursorAnim.isStarted) {
cursorAnim.end()
            }
cursorAnim.removeAllUpdateListeners()
        }

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

overridefunonTextChanged(
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()
            } elseif (!cursorAnim.isRunning) {
cursorAnim.start()
            }
        }
valendContent=text.toString()
if (endContent.length==mLength) {
//一样的话，进行回调mEndContentResult?.invoke(endContent)
        }
mChangeContent?.invoke(endContent)
    }

5、软键盘控制

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

/*** AUTHOR:AbnerMing* INTRODUCE:弹起软件盘*/privatefunshowKeyboard() {
if (mIsAndroidKeyBoard) {
isFocusable=trueisFocusableInTouchMode=truerequestFocus()
valim=context.getSystemService(Context.INPUT_METHOD_SERVICE) as?InputMethodManager?: returnim.showSoftInput(this, InputMethodManager.SHOW_FORCED)
        } else {
//启用自定义的软键盘if (mKeyBoard!=null) {
mKeyBoard?.invoke()
            }
        }
    }

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

/*** AUTHOR:AbnerMing* INTRODUCE:显示自己定义的软件盘*/privatevarmKeyBoard: (() ->Unit?)?=nullfunshowKeyBoard(block: () ->Unit) {
mKeyBoard=block    }

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

/*** AUTHOR:AbnerMing* INTRODUCE:隐藏软件盘*/funhideInputMethod() {
if (mIsAndroidKeyBoard) {
valimm: InputMethodManager=context.getSystemService(Context.INPUT_METHOD_SERVICE) asInputMethodManagerimm.hideSoftInputFromWindow(windowToken, 0) //强制隐藏        }
    }

三、开源地址。

目前项目已经开源，需要的朋友可以查看：https://github.com/AbnerMing888/InputBoxView

四、总结及注意事项。

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才会生效。

一个简单的自定义输入框

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

效果展示

边框黑圆圈展示

边框文字展示

纯色背景文字展示

纯色背景黑圆圈展示

纯色背景星号展示

下划线文字展示

下划线黑圆圈展示

纯色背景横向光标展示

Maven具体调用

代码使用

属性介绍

方法介绍

二、具体实现过程。

1、绘制方格或下划线

2、绘制内容

3、绘制光标

4、实现光标闪动

5、软键盘控制

三、开源地址。

四、总结及注意事项。

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

一个简单的自定义输入框

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

效果展示

边框黑圆圈展示

边框文字展示

纯色背景文字展示

纯色背景黑圆圈展示

纯色背景星号展示

下划线文字展示

下划线黑圆圈展示

纯色背景横向光标展示

Maven具体调用

代码使用

属性介绍

方法介绍

二、具体实现过程。

1、绘制方格或下划线

2、绘制内容

3、绘制光标

4、实现光标闪动

5、软键盘控制

三、开源地址。

四、总结及注意事项。

热门文章

最新文章

相关电子书