Android实现一个简易的带边输入框

 更新时间:2023年08月27日 15:42:06   作者:似曾相识2022  
如今市面上APP的输入框可以说是千奇百怪,不搞点花样出来貌似代表格局没打开,还在使用系统自带的输入框的兄弟可以停下脚步,哥带你实现一个简易的带边框输入框,感兴趣的同学可以自己动手试一下

话不多说,直接上图:

要实现这个效果,不得不再回顾下自定义View的流程,感兴趣的童鞋可以自行网上搜索,这里只提及该效果涉及到的内容。总体实现大致流程:

  • 继承AppCompatEditText
  • 配置可定义的资源属性
  • onDraw() 方法的重写

首先还得分析:效果图中最多只能输入6个数字,需要计算出每个文字的宽高和间隙,再分别绘制文字背景和文字本身。从中我们需要提取背景颜色、高度、边距等私有属性,通过新建attrs.xml文件进行配置:

<declare-styleable name="RoundRectEditText">
    <attr name="count" format="integer"/>
    <attr name="itemPading" format="dimension"/>
    <attr name="strokeHight" format="dimension"/>
    <attr name="strokeColor" format="color"/>/>
</declare-styleable>

这样在初始化的时候即可给你默认值:

val typedArray =context.obtainStyledAttributes(it, R.styleable.RoundRectEditText)
count = typedArray.getInt(R.styleable.RoundRectEditText_count, count)
itemPading = typedArray.getDimension(R.styleable.RoundRectEditText_itemPading,0f)
strokeHight = typedArray.getDimension(R.styleable.RoundRectEditText_strokeHight,0f)
strokeColor = typedArray.getColor(R.styleable.RoundRectEditText_strokeColor,strokeColor)
typedArray.recycle()

接下来便是重头戏,如何绘制文字和背景色。思路其实很简单,通过for循环去遍历绘制每一个数字。关键点还在于去计算每个文字的位置及宽高,只要得到了位置和宽高,绘制背景和绘制文字易如反掌。

获取每个文字宽度:

strokeWith =(width.toFloat() - paddingLeft.toFloat() - paddingRight.toFloat() - (count - 1) * itemPading) / count

文字居中需要计算出对应Y值:

val fontMetrics = paint.fontMetrics
val textHeight = fontMetrics.bottom - fontMetrics.top
val distance = textHeight / 2 - fontMetrics.bottom
val baseline = height / 2f + distance

文字的X值则根据当前index和文字宽度以及各边距得出:

private fun getIndexOfX(index: Int): Float {
    return paddingLeft.toFloat() + index * (itemPading + strokeWith) + 0.5f * strokeWith
}

得到了位置,宽高接下来的步骤再简单不过了。使用drawText 绘制文字,使用drawRoundRect 绘制背景。这里有一个细节一定要注意,绘制背景一定要在绘制文字之前,否则背景会把文字给覆盖。

另外,还需要注意一点。如果onDraw方法中不注释掉超类方法,底部会多出一段输入的数字。其实很好理解,这是AppCompatEditText 自身绘制的数字,所以我们把它注释即可,包括光标也是一样。如果想要光标则需要自己在onDraw方法中绘制即可。

//隐藏自带光标
super.setCursorVisible(false)
override fun onDraw(canvas: Canvas) {
        //不注释掉会显示在最底部
//        super.onDraw(canvas)
          ......
}

以上便是实现带边框的输入框的全部类型,希望对大家有所帮助!

到此这篇关于Android实现一个简易的带边输入框的文章就介绍到这了,更多相关Android实现输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android编程使用加速度传感器实现摇一摇功能及优化的方法详解

    Android编程使用加速度传感器实现摇一摇功能及优化的方法详解

    这篇文章主要介绍了Android编程使用加速度传感器实现摇一摇功能及优化的方法,结合实例形式分析了Android传感器的调用方法、参数含义及具体使用技巧,需要的朋友可以参考下
    2017-08-08
  • Android实现选择相册图片并显示功能

    Android实现选择相册图片并显示功能

    这篇文章主要为大家详细介绍了Android实现选择相册图片并显示功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 使用ViewPager2实现简易轮播图效果

    使用ViewPager2实现简易轮播图效果

    这篇文章主要为大家详细介绍了使用ViewPager2实现简易轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Intent传递对象之Serializable和Parcelable的区别

    Intent传递对象之Serializable和Parcelable的区别

    Intent在不同的组件中传递对象数据的应用非常普遍,大家都知道在intent传递对象的方法有两种:1、实现Serializable接口、2、实现Parcelable接口,接下来通过本文给大家介绍Intent传递对象之Serializable和Parcelable的区别,感兴趣的朋友一起学习吧
    2016-01-01
  • Android实现水波纹控件的方法

    Android实现水波纹控件的方法

    这篇文章主要为大家详细介绍了Android实现水波纹控件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android实现断点多线程下载

    Android实现断点多线程下载

    这篇文章主要为大家详细介绍了Android实现断点多线程下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法

    Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法

    这篇文章主要介绍了Android编程开发ScrollView中ViewPager无法正常滑动问题解决方法,以实例形式分析了ScrollView中滑动失效的原因及解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • vscode通过wifi调试真机的Flutter应用的教程

    vscode通过wifi调试真机的Flutter应用的教程

    这篇文章主要介绍了vscode通过wifi调试真机的Flutter应用的教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Android 不解压直接读取zip包的方法

    Android 不解压直接读取zip包的方法

    下面小编就为大家分享一篇Android 不解压直接读取zip包的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Android实现一个带粘连效果的LoadingBar

    Android实现一个带粘连效果的LoadingBar

    Loading效果相信大家应该都实现过,最近发现了一个不错的效果,决定分享给大家,所以下面这篇文章主要给大家介绍了关于利用Android实现一个带粘连效果的LoadingBar的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-12-12

最新评论