自定义View之自定义支付宝密码输入控件

效果如图上边(录像文件被压缩有些失真)

1、可以设置密码位数

2、每个格子能输入一位的数字

3、背景框、分割线、圆点颜色可以设置

4、位数输入满后可直接进行提示或后续操作

首先设置下需要的属性attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="passwordEditText"><attr name="colorPoint" format="color"  /><attr name="colorLine" format="color" /><attr name="colorBound" format="color" /><attr name="passwordLength" format="integer" /><attr name="pointRadius" format="integer" /></declare-styleable></resources>

属性依次是设置点颜色、分隔线颜色、边框线颜色、可输入的密码长度、圆点的半径。

然后自定义一个继承EditText的控件

package com.copyalipaypassword.cc;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.EditText;/*** @author Created by cc on 17/5/25.* @fileName PasswordEditText* @githublink https://github.com/cc0819* @csdnlink http://blog.csdn.net/qq_25404567*/public class PasswordEditText extends EditText {private int clLine;private int clPoint;private int clBound;private int passwordLength;private int pointRadius;private Paint paintLine;private Paint paintPoint;private Paint paintBound;private int mWidth;private int mHeight;private int psdTextLength;public OnTextEndListener onTextEndListener;public void SetOnTextEndListener(OnTextEndListener onTextEndListener){this.onTextEndListener = onTextEndListener;}public PasswordEditText(Context context, AttributeSet attrs) {super(context, attrs);initType(context,attrs);}public PasswordEditText(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initType(context,attrs);}private void initType(Context context,AttributeSet attrs){TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.passwordEditText);clLine = typedArray.getColor(R.styleable.passwordEditText_colorLine, Color.RED);clPoint = typedArray.getColor(R.styleable.passwordEditText_colorPoint, Color.BLUE);clBound = typedArray.getColor(R.styleable.passwordEditText_colorBound, Color.RED);passwordLength = typedArray.getInteger(R.styleable.passwordEditText_passwordLength, 4);pointRadius = typedArray.getInteger(R.styleable.passwordEditText_pointRadius, 10);init();//回收防内存泄漏typedArray.recycle();}private void init() {setFocusable(true);setFocusableInTouchMode(true);setCursorVisible(false);paintBound = new Paint();paintBound.setStrokeWidth(4);paintBound.setAntiAlias(true);paintBound.setColor(clBound);paintBound.setStyle(Paint.Style.STROKE);paintLine = new Paint();paintLine.setStrokeWidth(1);paintLine.setAntiAlias(true);paintLine.setColor(clLine);paintPoint = new Paint();paintPoint.setStrokeWidth(12);paintPoint.setAntiAlias(true);paintPoint.setColor(clPoint);}@Overrideprotected void onDraw(Canvas canvas) {mWidth = getMeasuredWidth();mHeight = getMeasuredHeight();
//        drawRoundLine(canvas);drawDivisionLine(canvas);drawPassword(canvas);}//绘制边框private void drawRoundLine(Canvas canvas) {canvas.drawRoundRect(0,0,mWidth,mHeight,8,8,paintBound);}//绘制分割线private void drawDivisionLine(Canvas canvas) {for (int i = 1; i < passwordLength; i++) {float mX = mWidth * i / passwordLength;canvas.drawLine(mX, 8, mX, mHeight-8, paintLine);}}//绘制密码点private void drawPassword(Canvas canvas) {float cx, cy = mHeight / 2;float half = mWidth / passwordLength;for (int i = 0; i < psdTextLength; i++) {cx = half / 2 + half * i;canvas.drawCircle(cx, cy, pointRadius, paintPoint);}}@Overrideprotected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {super.onTextChanged(text, start, lengthBefore, lengthAfter);psdTextLength = text.toString().length();if (psdTextLength == passwordLength && passwordLength != 0){Log.e("info","---输入完成了---");onTextEndListener.onTextEndListener(text.toString());}invalidate();}public int getClLine() {return clLine;}public void setClLine(int clLine) {this.clLine = clLine;}public int getClPoint() {return clPoint;}public void setClPoint(int clPoint) {this.clPoint = clPoint;}public int getPasswordLength() {return passwordLength;}public void setPasswordLength(int passwordLength) {this.passwordLength = passwordLength;}public int getPointRadius() {return pointRadius;}public void setPointRadius(int pointRadius) {this.pointRadius = pointRadius;}//重置public void reset(){setText("");invalidate();}//输入完成回调public  interface OnTextEndListener{void onTextEndListener(String string);}}

也借鉴了网上其他人写的方法，其实主要就是画背景框、分割线和圆点。

如上代码其实并未用到画背景框的方法，是因为画出来我总是感觉不大好看，总是有一个小角儿。

后来所幸就不用这个画了，直接用drawable画了一个圆角的背景放入控件中

如代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#FFFFFF" /><strokeandroid:width="1.0px"android:color="#ee3939" /><corners android:radius="8dp" /></shape>

为了方便颜色也直接写里面了

设置定义好的控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:psw="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.copyalipaypassword.cc.MainActivity"><com.copyalipaypassword.cc.PasswordEditTextandroid:id="@+id/psdEditText"android:layout_width="match_parent"android:layout_height="60dp"android:layout_marginTop="10dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="@drawable/bg_alipay"android:maxLength="6"psw:passwordLength = "6"/>
</RelativeLayout>

这里要注意设置的

passwordLength设置的长度要和maxLength设置的长度要一样。

拿设置6位密码来举例：

如果输入已经到6位还是继续输入的话，虽然试图中没有变化，但是你打印长度可以看出来还是继续增长的，

其次在自定义控件中我想设置maxLength根据用户设置的passwordLength来的，奈何实在没有找到。

如果哪位大佬设置成功还请告诉小弟。

最后是主页面中代码

package com.copyalipaypassword.cc;import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
import butterknife.BindView;
import butterknife.ButterKnife;public class MainActivity extends AppCompatActivity {@BindView(R.id.psdEditText)PasswordEditText psdEditText;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ButterKnife.bind(this);psdEditText.SetOnTextEndListener(new PasswordEditText.OnTextEndListener() {@Overridepublic void onTextEndListener(String string) {Toast.makeText(MainActivity.this, "输入完毕输出是" + string, Toast.LENGTH_SHORT).show();}});}}

github下载地址：https://github.com/cc0819/CopyAliPayPassword

自定义View之自定义支付宝密码输入控件相关推荐

自定义view,仿微信、支付宝密码输入控件的源码实现
研究支付宝密码输入控件及源码实现目标效果图实现思路要想实现输入,就少不了EditText 看整体布局应该是一个横向的LinearLayout 每个格子看进来应该是多个子View 那么我们是不是有 ...
php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
Android 自定义View 三板斧之二——组合现有控件
通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件上文说过了如何继承现 ...
Android自定义View实战：简约风歌词控件
作者:jsyjst 前言最近重构了之前的音乐播放器,添加了许多功能,比如歌词,下载功能等.这篇文章就让我们聊聊歌词控件的实现,先上效果图,如果感觉海星,就继续瞧下去! 看到这里,估计你对这个控件还有 ...
Android自定义View实战：简约风歌词控件，Android开发者值得深入思考的几个问题
57[02:41.62]从不知她的痛苦 58[02:52.02] 59[02:54.11]喜欢你那双眼动人 60[03:00.13]笑声更迷人 61[03:02.38] 62[03:03.14]愿 ...
安卓学习笔记--- Android自定义View（CustomCalendar－定制日历控件）
最近需要做一个日历的控件,感觉使用系统的不能满足自己需求,发现了一个比较不错的自定义日历控件,博主写的很好,转载支持一下. 转载地址: http://blog.csdn.net/xmxkf/artic ...
自定义验证码输入控件
控件代码深度参考了掘金文章 Android仿滴滴出行验证码输入框效果,增加了 setText() 方法控件采用多个横向排列的 EditText 组合控件来实现验证码录入框. 自定义属性文件 attr ...
自定义xy组 android,Android自定义view之仿支付宝芝麻信用仪表盘示例
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码接着在构造方法里初始化自定义属性和画笔: private void initAttr(At ...
Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding=&qu ...

自定义View之自定义支付宝密码输入控件

自定义View之自定义支付宝密码输入控件相关推荐

最新文章

热门文章