热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

AndroidView教程之自定义验证码输入框效果

这篇文章主要给大家介绍了关于AndroidView教程之自定义验证码输入框效果的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

首先,我们来看看实现的是怎么样的效果:

如果我们拿到这样的UI,想到的布局应该是用4个EditText包在横向的LinearLayout里面,但今天要讲的View,所以我们决定用一个自定义的EditText 画出来。

学到什么?

  • 基本理解画布概念
  • 画布的状态、平移
  • 布局测量
  • 画图片

功能需求

  • 高亮当前输入框
  • 输入满4个数字自动调用方法

思路

完全重画一个EditText,就包含了测量布局和重新绘制这两个关键步骤。好了,到这里理一下整体的思路:

  • 根据验证码个数以及边框大小来计算输入框显示的宽度
  • 覆盖原来的EditText画布,重新绘制方框
  • 根据输入的索引来确定高亮的方框
  • 重写onTextChanged 但满足验证码个数的时候调用自动完成方法

开始动手

准备开始了,果断继承一个AppCompatEditText 来初始化基本参数先:

  • 验证码个数
  • 输入方框的大小
  • 边框的大小及间距

/**
 * 验证码输入框,重写EditText的绘制方法实现。
 * @author RAE
 */
public class CodeEditText extends AppCompatEditText {
 
 // 验证码文本颜色
 private int mTextColor;
 // 输入的最大长度
 private int mMaxLength = 4;
 // 边框宽度
 private int mStrokeWidth;
 // 边框高度
 private int mStrokeHeight;
 // 边框之间的距离
 private int mStrokePadding = 20;
 // 用矩形来保存方框的位置、大小信息
 private final Rect mRect = new Rect();
 // 方框的背景
 private Drawable mStrokeDrawable;

 /**
 * 构造方法
 *
 */
 public CodeEditText(Context context, AttributeSet attrs) {
 super(context, attrs);
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CodeEditText);
 int indexCount = typedArray.getIndexCount();
 for (int i = 0; i = 0) {
  setFilters(new InputFilter[]{new InputFilter.LengthFilter(maxLength)});
 } else {
  setFilters(new InputFilter[0]);
 }
 }
}

开始测量布局

初始化完了就要开始测量布局了,计算公式为:

输入框宽度 = 边框宽度 * 数量 + 边框间距 *(数量-1)

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 // 当前输入框的宽高信息
 int width = getMeasuredWidth();
 int height = getMeasuredHeight();
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);

 // 判断高度是否小于推荐高度
 if (height 

画家登场

来到最重要的步骤了,重画输入框!来一步步看代码注释:

 @Override
 protected void onDraw(Canvas canvas) {
  // 在画支持设置文本颜色,把系统化的文本透明掉,相当于覆盖
  mTextColor = getCurrentTextColor();
  setTextColor(Color.TRANSPARENT);
  // 系统画的方法
  super.onDraw(canvas);
  // 重新设置文本颜色
  setTextColor(mTextColor);
  // 重绘背景颜色
  drawStrokeBackground(canvas);
  // 重绘文本
  drawText(canvas);
 }

绘制背景方框

 /**
  * 绘制方框
  */
 private void drawStrokeBackground(Canvas canvas) {
  // 下面绘制方框背景颜色
  // 确定反馈位置
  mRect.left = 0;
  mRect.top = 0;
  mRect.right = mStrokeWidth;
  mRect.bottom = mStrokeHeight;
  int count = canvas.getSaveCount(); // 当前画布保存的状态
  canvas.save(); // 保存画布
  for (int i = 0; i 

一般画布的移动canvas.translate(x,y)会结合canvas.save();来使用。

1、调用canvas.save();保存当前画布的状态,用PS来解析就是按下ctrl +s键,然后帮你新建一个新的图层。你之后画的内容不会影响到之前画的内容,要回到之前的状态就调用canvas.restoreToCount(count)来还原。

2、把画布的位置移到下一个位置canvas.translate(x,y),下图所示,你会发现方框在画布中的位置没有发生变化而是画布距离发生了变化。这就是画布平移的效果了。

画验证码文字

 /**
  * 重绘文本
  */
 private void drawText(Canvas canvas) {
  int count = canvas.getSaveCount();
  canvas.translate(0, 0);
  int length = getEditableText().length();
  for (int i = 0; i 

监听文本变化回调自动完成方法

 @Override
 protected void onTextChanged(CharSequence text, int start,
         int lengthBefore, int lengthAfter) {
  super.onTextChanged(text, start, lengthBefore, lengthAfter);

  // 当前文本长度
  int textLength = getEditableText().length();

  if (textLength == mMaxLength) {
   hideSoftInput();
   if (mOnInputFinishListener != null) {
    mOnInputFinishListener.onTextFinish(getEditableText().toString(), mMaxLength);
   }
  }

 }

查看完整的源码

到这里你能大概理解画布的概念了,本文完。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。


推荐阅读
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 本文详细介绍如何使用arm-eabi-gdb调试Android平台上的C/C++程序。通过具体步骤和实用技巧,帮助开发者更高效地进行调试工作。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文将详细介绍如何使用剪映应用中的镜像功能,帮助用户轻松实现视频的镜像效果。通过简单的步骤,您可以快速掌握这一实用技巧。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
author-avatar
mobiledu2502858037
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有