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 中 onSaveInstanceState()使用方法详解

    Android 中 onSaveInstanceState()使用方法详解

    这篇文章主要介绍了Android 中 onSaveInstanceState()使用方法详解的相关资料,希望通过本文大家能够掌握这部分知识,需要的朋友可以参考下
    2017-09-09
  • 利用源码编译Android系统的APK和可执行命令的方法

    利用源码编译Android系统的APK和可执行命令的方法

    这篇文章主要介绍了利用源码编译Android系统的APK和可执行命令的方法,示例在Linux系统环境上进行构建,需要的朋友可以参考下
    2016-02-02
  • Android实现数据按照时间排序

    Android实现数据按照时间排序

    这篇文章主要为大家详细介绍了Android实现数据按照时间排序的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Android PopupMenu弹出菜单的实现

    Android PopupMenu弹出菜单的实现

    这篇文章主要介绍了 Android PopupMenu弹出菜单的实现的相关资料,希望通过本文能帮助到大家,实现这样的功能,需要的朋友可以参考下
    2017-10-10
  • Android自定义垂直拖动seekbar进度条

    Android自定义垂直拖动seekbar进度条

    这篇文章主要为大家详细介绍了Android自定义垂直拖动seekbar进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 使用Android Studio创建OpenCV4.1.0 项目的步骤

    使用Android Studio创建OpenCV4.1.0 项目的步骤

    这篇文章主要介绍了使用Android Studio创建OpenCV4.1.0 项目的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 完整的Android MVP开发之旅

    完整的Android MVP开发之旅

    这篇文章主要为大家介绍了完整的Android MVP开发之旅,总结自己开发Android MVP的全过程,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 详解Android跨进程通信之AIDL

    详解Android跨进程通信之AIDL

    这篇文章主要介绍了详解Android跨进程通信之AIDL,想了解跨进程的同学可以参考下
    2021-04-04
  • Android制作微信app顶部menu菜单(ActionBar)

    Android制作微信app顶部menu菜单(ActionBar)

    这篇文章主要为大家详细介绍了Android利用ActionBar制作微信app顶部menu菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 快速了解Android Room使用细则

    快速了解Android Room使用细则

    这篇文章主要为大家介绍了快速了解Android Room使用细则,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论