Android自定义view，PasswordView，交易密码输入框

最新推荐文章于 2024-08-15 09:07:05 发布
最新推荐文章于 2024-08-15 09:07:05 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Android 文章标签： android 交易密码输入 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jshch2009/article/details/66477750
版权

1、效果图：

这里写图片描述

2、代码：

attr.xml

<declare-styleable name="PasswordView">
        <attr name="pv_color" format="color|reference" />
        <attr name="pv_background_color" format="color|reference" />
        <attr name="pv_stroke_color" format="color|reference" />
        <attr name="pv_stroke_width" format="dimension" />
        <attr name="pv_password_length" format="integer|reference" />
    </declare-styleable>

view源码：

package exam.org.jsc.password.view;

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.TypedValue;
import android.view.View;

import exam.org.jsc.password.R;

/**
 * Created by Justin Qin on 3/25/2017.
 */

public class PasswordView extends View {
    Paint mPaint;
    int color;
    int backgroundColor;
    int strokeColor;
    int strokeWidth;

    String password = "";
    int passwordLength;

    OnPasswordChangedListener changedListener;

    public PasswordView(Context context) {
        this(context, null);
    }

    public PasswordView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PasswordView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordView);
        color = array.getColor(R.styleable.PasswordView_pv_color, Color.BLACK);
        backgroundColor = array.getColor(R.styleable.PasswordView_pv_background_color, Color.WHITE);
        strokeColor = array.getColor(R.styleable.PasswordView_pv_stroke_color, Color.BLACK);
        strokeWidth = array.getDimensionPixelSize(R.styleable.CloseView_cv_stroke_width, 1);
        passwordLength = array.getInt(R.styleable.PasswordView_pv_password_length, 6);
        array.recycle();
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    public void addOnPasswordChangedListener(OnPasswordChangedListener changedListener) {
        this.changedListener = changedListener;
    }

    public void input(String txt){
        if (password.length() >= passwordLength)
            return;

        password += txt;
        postInvalidate();

        if (changedListener == null)
            return;

        changedListener.onPasswordChanged(password);
        if (password.length() >= passwordLength)
            changedListener.onPasswordFinish(password);
    }

    public void delete(){
        if (password.length() <= 0)
            return;

        password = password.substring(0, password.length() -1);
        postInvalidate();
        if (changedListener != null)
            changedListener.onPasswordChanged(password);
    }

    public void clearPassword(){
        password = "";
        postInvalidate();
        if (changedListener != null)
            changedListener.onPasswordChanged(password);
    }

    public String getPassword() {
        return password;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));
        int widthSize = getMeasuredWidth();
        int heightSize = getMeasuredHeight();
        //把宽度分成passwordLength等份
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize  / passwordLength, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int stepWidth = width / passwordLength;

        mPaint.setColor(backgroundColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawRect(0, 0, width, height, mPaint);

        mPaint.setColor(strokeColor);
        mPaint.setStrokeWidth(strokeWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(0, 0, width - strokeWidth, height - strokeWidth, mPaint);
        for (int i = 1; i < passwordLength; i++) {
            canvas.drawLine(stepWidth * i, 0, stepWidth * i, height, mPaint);
        }

        mPaint.setColor(color);
        mPaint.setStyle(Paint.Style.FILL);
        int radius = stepWidth / 8;
        int len = password.length() > passwordLength ? passwordLength : password.length();
        for (int i = 0; i < len; i++) {
            canvas.drawCircle(stepWidth / 2 + stepWidth * i, height / 2, radius, mPaint);
        }
    }

    public interface OnPasswordChangedListener {
        void onPasswordChanged(String password);
        void onPasswordFinish(String password);
    }
}

3、使用：

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="exam.org.jsc.password.activity.AboutActivity">

    <include layout="@layout/title_bar" />

    <exam.org.jsc.password.view.PasswordView
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        app:pv_color="@color/colorAccent" />

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_gravity="center_horizontal"
        android:columnCount="4"
        android:orientation="horizontal"
        android:rowCount="3">
        　　
        <Button
            android:id="@+id/btn_01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1" />
        　　
        <Button
            android:id="@+id/btn_02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2" />
        　　　
        <Button
            android:id="@+id/btn_03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="3" />

        <Button
            android:id="@+id/btn_04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="4" />

        <Button
            android:id="@+id/btn_05"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="5" />
        　　
        <Button
            android:id="@+id/btn_06"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="6" />
        　　　
        <Button
            android:id="@+id/btn_07"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="7" />

        <Button
            android:id="@+id/btn_08"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="8" />
        　　
        <Button
            android:id="@+id/btn_09"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="9" />

        <Button
            android:id="@+id/btn_00"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="0" />

        <Button
            android:id="@+id/btn_10"
            android:layout_columnSpan="2"
            android:layou`
_gravity="fill"
            android:text="delete" />
    </GridLayout>


</LinearLayout>

Activity

package exam.org.jsc.password.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import exam.org.jsc.password.R;
import exam.org.jsc.password.view.PasswordView;

public class InputPasswordActivity extends BaseActivity {

    private final int[] ids = {
            R.id.btn_00,
            R.id.btn_01,
            R.id.btn_02,
            R.id.btn_03,
            R.id.btn_04,
            R.id.btn_05,
            R.id.btn_06,
            R.id.btn_07,
            R.id.btn_08,
            R.id.btn_09,
            R.id.btn_10
    };
    PasswordView mPasswordView;
    private Button[] buttons = new Button[ids.length];

    private View.OnClickListener listener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.btn_10){
                mPasswordView.delete();
            } else {
                Button button = (Button) v;
                String input = button.getText().toString();
                mPasswordView.input(input);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_input_password);
        setStatusBarBackground();
        initTitleBar("InputPassword", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        mPasswordView = (PasswordView) findViewById(R.id.et_password);
        mPasswordView.addOnPasswordChangedListener(new PasswordView.OnPasswordChangedListener() {
            @Override
            public void onPasswordChanged(String password) {

            }

            @Override
            public void onPasswordFinish(String password) {
                showShortToast(password);
            }
        });
        for (int i = 0; i < ids.length; i++) {
            buttons[i] = (Button) findViewById(ids[i]);
            buttons[i].setOnClickListener(listener);
        }
    }

}

谢谢您的惠顾，code有不足的地方请在评论里回复（或者联系我）。
QQ：1006368252

Oey
关注
专栏目录
qt弹框输入密码_Android仿支付宝密码输入框
weixin_39599372的博客
12-01 276
实现效果图：实现流程：1、定义6位密码输入View思路：要绘制边框矩形，绘制分割线，绘制圆点。绘制圆的数目要与字符串的长度有关，添加或者删除都要修改字符串，输入6位后就是要关闭弹框，拿到密码，做判断工作了。public class PasswordEditText extends AppCompatEditText { // 画笔 private Paint mPaint;...
View Password
05-07
Win98下的查看密码框中的“*”的工具，98以后，就退役啦。
android密码强度,自定义 View 实践之：打造一个显示密码强度等级的控件
weixin_42099936的博客
05-31 650
0. 前言最近项目不是特别紧张，有一点时间可以用来看点东西，于是找了下自定义View相关的文章来看看，毕竟也确实挺久没碰到了。和一基友交流了下，他最近也在看这方面，并且推荐了启舰的系列文章，大致都看了下，感觉讲的很细致，而且也挺全面，这里也推荐下，希望给大家在自定义View这块有所帮助。(传送门在文末会给出)看完文章之后，得来一发才行呀，所谓“纸上得来终觉浅，绝知此事要躬行”嘛。想到了以前项目里有...
使用指南：密码视图（PasswordView）开源项目
最新发布
gitblog_00212的博客
08-15 931
使用指南：密码视图（PasswordView）开源项目 passwordviewA Material Android password view that toggles password visibility via an eye icon.项目地址:https://gitcode.com/gh_mirrors/pa/passwordview 项目概述 PasswordView 是一个专为遵循...
密码查看器viewpassword
01-23
用vb做的密码查看软件,带源码及工程文件.在vb开发环境直接动行就可以了
Android密码输入框PasswordView-自定义view系列（1）
ruiruiddd的博客
04-21 1557
PasswordView 密码输入框-自绘制功能简介Gif演示PasswordView的xml属性介绍实现步骤java代码attrs.xml代码总结 功能简介 强大的密码输入框PasswordView，多种功能自由组合。 高亮，光标，隐藏输入后的内容，任意数量，任意大小，任意drawable设置样式，自动弹出/关闭键盘，锁定状态 完整代码：Github项目可自行下载: 点击跳转 相关文章:onMeasure()讲解: 点击跳转 Gif演示 PasswordView的xml属性介绍
安卓EditText输入框相关-Android仿支付宝自定义密码输入框.zip
07-29
总之，这个压缩包提供了一个Android自定义密码输入框的示例，对于想要学习自定义View和提升应用界面交互性的开发者来说，是一个很好的实践案例。通过理解并修改这个代码，你可以根据自己的需求打造更加个性化的...
android仿支付宝密码输入框效果
08-28
本文主要介绍了android仿支付宝密码输入框效果，通过自定义View实现密码输入框的效果，具有参考价值。下面是相关知识点的总结： 一、自定义View 自定义View是指在Android中自定义一个View控件，以满足特定的需求。...
Android仿支付宝支付密码输入框
01-20
【Android仿支付宝支付密码输入框】是Android应用开发中一种常见的设计，用于模拟支付宝APP中的支付密码输入体验。本文将详细介绍如何在Android中创建这样一个功能，主要包括以下关键知识点： 1. **自定义View**： ...
仿微信密码输入框，炒鸡简单的实现方式2
02-10
在Android或iOS应用开发中，通常会用到自定义视图（Custom View）来实现特定的UI组件，例如这个仿微信的密码输入框。在Android中，我们可以继承自`AppCompatEditText`或`TextInputLayout`，在iOS中则可能是自定义`...
仿支付宝支付密码输入框_自定义view
qq_19456237的博客
11-06 176
参考http://www.jfh.com/jfperiodical/article/3527?ref=myread?修改 效果图 代码 /** * Edit by lsj on 2019/10/10. */ @SuppressLint("AppCompatCustomView") public class PasswordView extends EditT...
ViewPass（星号密码查看）.rar
07-08
有些软件记住了密码，但是你却忘记了密码，可以用此工具将软件记住的密码显示出来/有些软件记住了密码，但是你却忘记了密码，可以用此工具将软件记住的密码显示出来
Android 仿「微信」「支付宝」的支付密码布局
07-04
详情参考博文：http://blog.csdn.net/qq_24867873/article/details/74231623
自定义view实现账号密码输入框
10-30
当输入框有字的时候，显示出清空按钮，当没有文字的时候，清空按钮隐藏。密码可以隐藏和显示密码
Android-PasswordInputView简单的自定义六位数字密码框
03-25
简单的自定义六位数字密码框
自定义Android Dialog EditText 密码输入框
09-08
自定义Dialog，模拟支付密码输入框，可以自定义显示的图标。EditText遮在背景View的上面，在afterTextChanged处理密码改变的逻辑。
Android 密码输入框、验证码输入框，完整版；
weixin_30347335的博客
09-14 1221
接上篇，优化了一下代码，添加一些属性； "space" //每个输入框之间的间距； "strokeWidth" //边框的高度； "checkedColor" //已输入的颜色 "defaultColor" //未输入的默认颜色 "textLength" //规定输入长度 "b...
Android自定义支付密码输入框
志哥的博客
06-15 5881
最近项目要做一个支付密码 之前我已经有个支付密码输入框 但是只能点击第一个才能输入 并且删除的时候还出现了问题 索性直接抛弃之前的那个密码输入框 使用下面这个 一个简单的自定义View 可以设置边框颜色 密码颜色 边框圆角半径等 先给一张效果图 下面贴上代码 package com.yxt.kake.views.widgets; import android.content.Cont
android 弹出框输入密码,Android 常用的提示框，输入框，弹窗
weixin_39596668的博客
05-30 2425
提供常用的提示框，输入框，弹窗等GitHub地址文章目录GitHub地址环境配置Step 1. Add the JitPack repository to your build fileStep 2. Add the dependency使用方法介绍1. 选择dialog2. 确认dialog3. 可以输入内容的确认框4.连接dialog5. 加载dialog6. 密码输入dialog环境配置St...
Android自定义安全键盘与密码输入框实现
在Android开发中，尤其是在处理敏感信息如交易密码时，通常会避免使用系统键盘或第三方键盘，以防止密码在传输过程中被截取，导致安全风险。因此，开发自定义的密码输入框和安全键盘变得尤为重要。本文以支付宝的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值