Android自定义PasswordInputView密码输入

欢迎来到“实现自定义密码输入控件”这一章节,PasswordInputView定义了密码输入的监听,支持直接在布局文件定义属性值、支持直接获取密码输入的长度、原始密码……

先上图

PasswordInputView是做什么的?

PasswordInputView是一个自定义密码输入的控件,类似支付宝、微信支付的密码输入,同时定义了密码输入的监听,支持直接在布局文件定义属性值、支持直接获取密码输入的长度、原始密码等,还可以扩展其他方法,请自行实现。

实现原理

1.创建一个类 ‘PasswordInputView' ,让其继承EditText,因为我们要实现的自定义view是用来密码输入的,所以必须继承EditText。

2.为了在布局(layout)文件(.xml)能直接定义PasswordInputView各个属性的值,我们需要定义PasswordInputView带AttributeSet 参数的构造方法。

public PasswordInputView(Context context, AttributeSet attr) {
  super(context, attr);
  init(context, attr);
}

3.在'value/attrs.xml'中定义PasswordInputView各个属性及其类型,如:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="Passwordinputview">
    <attr name="passwordLength" format="integer"/>
    <attr name="borderWidth" format="dimension"/>
    <attr name="borderRadius" format="dimension"/>
    <attr name="borderColor" format="color"/>
    <attr name="passwordWidth" format="dimension"/>
    <attr name="passwordColor" format="color"/>
  </declare-styleable>
</resources>

4.重载OnDraw(Canvas canvas)方法,并在其实现画边框、画内容区域(以填充模式绘制Paint.Style.FILL)、画分割线、画实心圆点(密码)。有人可能会问:画了边框、分割线,就可以了,为什么还要画内容区域?问得好,笔者在实现过程中也碰到这个问题,当时没有画内容区域,导致输入的原始内容也显示出来了(如下异常图),所以画内容区域(以填充模式绘制Paint.Style.FILL)是为了掩盖原始内容不被发现,切记必不可少。

正确代码如下:

 private void init(Context context, AttributeSet attr) {
  TypedArray ta = context.obtainStyledAttributes(attr, R.styleable.Passwordinputview);
  try {
   passwordLength = ta.getInt(R.styleable.Passwordinputview_passwordLength, passwordLength);
   borderWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderWidth, borderWidth);
   borderRadius = ta.getDimensionPixelSize(R.styleable.Passwordinputview_borderRadius, borderRadius);
   borderColor = ta.getColor(R.styleable.Passwordinputview_borderColor, borderColor);
   passwordWidth = ta.getDimensionPixelSize(R.styleable.Passwordinputview_passwordWidth, passwordWidth);
   passwordColor = ta.getColor(R.styleable.Passwordinputview_passwordColor, passwordColor);
  } catch (Exception e) {

  }
  ta.recycle();

  borderPaint = new Paint();
  borderPaint.setAntiAlias(true);
  borderPaint.setColor(borderColor);
  borderPaint.setStrokeWidth(borderWidth);
  borderPaint.setStyle(Paint.Style.FILL); //以填充模式来画,防止原始输入内容显示出来

  passwordPaint = new Paint();
  passwordPaint.setAntiAlias(true);
  passwordPaint.setColor(passwordColor);
  passwordPaint.setStrokeWidth(passwordWidth);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  // TODO Auto-generated method stub
  super.onDraw(canvas);
  int width = getWidth();
  int height = getHeight();

  //画边框
  RectF rect = new RectF(0, 0, width, height);
  borderPaint.setColor(borderColor);
  canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);

  //画内容区域,与上面的borderPaint.setStyle(Paint.Style.FILL)对应, 防止原始输入内容显示出来
  RectF rectContent = new RectF(rect.left + defaultContentMargin, rect.top + defaultContentMargin, rect.right - defaultContentMargin, rect.bottom - defaultContentMargin);
  borderPaint.setColor(Color.WHITE);
  canvas.drawRoundRect(rectContent, borderRadius, borderRadius, borderPaint);

  //画分割线:分割线数量比密码数少1
  borderPaint.setColor(borderColor);
  borderPaint.setStrokeWidth(defaultSplitLineWidth);
  for (int i = 1; i < passwordLength; i++) {
   float x = width * i / passwordLength;
   canvas.drawLine(x, 0, x, height, borderPaint);
  }

  //画密码内容
  float px, py = height / 2;
  float halfWidth = width / passwordLength / 2;
  for (int i = 0; i < textLength; i++) {
   px = width * i / passwordLength + halfWidth;
   canvas.drawCircle(px, py, passwordWidth, passwordPaint);
  }
}

5.定义“设置属性值”的方法,如下

public void setBorderWidth(int borderWidth) {
 this.borderWidth = borderWidth;
 borderPaint.setStrokeWidth(borderWidth);
 postInvalidate();
}

动态图

项目源码

点此链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用模板生成支持手机直接查看的Word文档

    最近在项目工作中,碰到一个很棘手的需求,说是要在手机端根据模板生成word文档,而且不借助第三方的软件可以查看word文档,一开始听这个需求差不多蒙了,这要怎么做,为什么不把生成word文档这个工作放在后台呢,抱怨归抱怨,但是面对需求只能硬着头皮做了,经过各种拷问度娘和谷哥,终于找了一个比较好用的方法.特此跟他家分享. Apache 公司推出的 Apache POI,我们来看下他的介绍:Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给

  • Android 下载并打开PDF,Doc,Dwg文档实例

    今天项目中遇到这样一个需求 ,根据后台接口里pdf,doc,dwg文档的地址 是一个URL ,需要根据文档的url 下载到本地(内部存储或内存卡)并用手机中能打开该文档的软件弹出来并打开,(这里需要做一个缓存,第一次查看这个文档是在服务器上下载并打开,以后打开不需要下载直接打开本地的文档)在网上找了些资料 写了以下代码,下面分享给大家; 效果图: 代码: 这是一个单独的类 首先接收intent传过来的url我是用url的后14位作为存储本地的文件名(这里根据自己服务器的文件命名规则而定) 拿到文

  • Android实现pdf在线预览或本地预览的方法

    最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放. 接下来总结下目前能够实现pdf阅读的方案,开发当中需要根据实际需求去选择相应的方案. 1.使用Google doc支持来展示word,excel,pdf,txt(WebView方式在线预览): <span style="font-size:18px;">WebView urlWebView = (WebVi

  • android手机端与PC端使用adb forword通信

    PC端与Android手机端使用adb forword通信 服务器端代码如下: import java.io.IOException; import java.io.ObjectOutputStream; import java.net.Socket; import java.net.UnknownHostException; import java.util.Scanner; public class Server { public static final String TAG = "ser

  • Android webview转PDF的方法示例

    1.网上找了好多没有显示出来效果不错,后来看到调用手机打印预览,看了效果还不错,就打算使用系统打印服务预览下载 2.'webView.createPrintDocumentAdapter()'得到打印的PrintDocumentAdapter有了该类就可以使用onWrite方法写入制定的文件,但是这个方法需要传入回调这个悲剧的是这个回调方法是hiden的我们没办法调用 3,字怎么解决呢,有连个方法 3.1 使用此开源库替换自己的sdk 中的android.jar文件,就可以使用了 https:/

  • Android NDK开发简单程序分享(Hello Word!)

    在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android程序,首先你必须了解C语言.JAVA语言以及Linux操作系统,这样可以帮助你开始上手,当然不是说你必须是大牛才能进行NDK开发,下面我们来一起实现一个简单的NDK程序. 第一步,创建Android工程 打开开发环境eclipse,在左侧空白区域,右键单击创建Android工程(非常简单,不再赘述)

  • Android自定义PasswordInputView密码输入

    欢迎来到"实现自定义密码输入控件"这一章节,PasswordInputView定义了密码输入的监听,支持直接在布局文件定义属性值.支持直接获取密码输入的长度.原始密码-- 先上图 PasswordInputView是做什么的? PasswordInputView是一个自定义密码输入的控件,类似支付宝.微信支付的密码输入,同时定义了密码输入的监听,支持直接在布局文件定义属性值.支持直接获取密码输入的长度.原始密码等,还可以扩展其他方法,请自行实现. 实现原理 1.创建一个类 'Passw

  • Android自定义view实现输入控件

    本文实例为大家分享了Android自定义view实现输入控件的具体代码,供大家参考,具体内容如下 网络上大部分的输入控件都是多个EditText组合而成,本例中采用的是: 单个EditText作为输入的捕捉控件 多个ImageView的子类作为显示的控件,绘制EditText中的数据 如上图: 输入前和输入后输入框需要发生响应的改变 点击自定义控件要弹出软键盘 EditText数据捕捉,以及EditView不能操作(如果可以操作,数据处理会混乱) 输完后会得到相应的提示 ImageView的子类

  • Android 自定义View 密码框实例代码

    暴露您view中所有影响可见外观的属性或者行为. •通过XML添加和设置样式 •通过元素的属性来控制其外观和行为,支持和重要事件交流的事件监听器 详细步骤见:Android 自定义View步骤 效果图展示: 支持的样式 可以通过XML定义影响外边和行为的属性如下 边框圆角值,边框颜色,分割线颜色,边框宽度,密码长度,密码大小,密码颜色 <declare-styleable name="PasswordInputView"> <attr name="borde

  • Android仿支付宝密码输入效果封装

    模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa

  • Android 自定义View步骤

    例子如下:Android 自定义View 密码框 例子 1 良好的自定义View 易用,标准,开放. 一个设计良好的自定义view和其他设计良好的类很像.封装了某个具有易用性接口的功能组合,这些功能能够有效地使用CPU和内存,并且十分开放的.但是,除了开始一个设计良好的类之外,一个自定义view应该: l 符合安卓标准 l 提供能够在Android XML布局中工作的自定义样式属性 l 发送可访问的事件 l 与多个Android平台兼容. Android框架提供了一套基本的类和XML标签来帮您创

  • Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 自定义输入支付密码的软键盘实例代码

    Android 自定义输入支付密码的软键盘 有项目需求需要做一个密码锁功能,还有自己的软键盘,类似与支付宝那种,这里是整理的资料,大家可以看下,如有错误,欢迎留言指正 需求:要实现类似支付宝的输入支付密码的功能,效果图如下: 软键盘效果图 使用 android.inputmethodservice.KeyboardView 这个类自定义软键盘 软键盘的实现 1. 自定义只输入数字的软键盘 PasswordKeyboardView 类,继承自 android.inputmethodservice.

  • Android自定义密码输入EditTextLayout

    本文为大家分享了Android自定义密码输入的具体代码,供大家参考,具体内容如下 布局 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" andro

  • Android自定义密码样式 黑点转换成特殊字符

    本文为大家分享了Android自定义密码样式的制作代码,黑点换成¥.%等特殊字符,供大家参考,具体内容如下 复制下面代码即可: 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_par

  • Android实现支付宝6位密码输入界面

    我们先来照图分析一下: (1)限制输入6位,每一位都有自己的框格,每个格显示一位: (2)有回退/取消支付按钮: (3)有忘记密码链接: (4)自定义的只能输入数字的键盘输入区: (5)在6位输完后自动进行密码校验和支付交易.如上图左边是iOS支付宝支付密码输入控件,右边是我模仿实现的效果. 首先,我们需要一个页面来完成以上的静态布局,.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <Relativ

随机推荐