自定义view-仿支付宝淘宝自定义密码

最新推荐文章于 2021-05-26 04:07:56 发布
最新推荐文章于 2021-05-26 04:07:56 发布
阅读量320 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24675479/article/details/79481571
本文介绍如何在Android中自定义键盘布局及密码输入框，包括XML布局定义、密码框属性配置、绘制背景、分割线及密码圆点等关键步骤。

这里写图片描述

自定义键盘布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#EBEBEB"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="3" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="4" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="5" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="6" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="7" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="8" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="9" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="20dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center"
            android:padding="20dp"
            android:text="0" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="15dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/customer_password_keyboard_delete" />
    </LinearLayout>
</LinearLayout>

自定义密码框

  • 属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PasswordEditText">
        <!-- 密码的个数 -->
        <attr name="passwordNumber" format="integer"/>
        <!-- 密码圆点的半径 -->
        <attr name="passwordRadius" format="dimension" />
        <!-- 密码圆点的颜色 -->
        <attr name="passwordColor" format="color" />
        <!-- 分割线的颜色 -->
        <attr name="divisionLineColor" format="color" />
        <!-- 分割线的大小 -->
        <attr name="divisionLineSize" format="dimension" />
        <!-- 背景边框的颜色 -->
        <attr name="bgColor" format="color" />
        <!-- 背景边框的大小 -->
        <attr name="bgSize" format="dimension" />
        <!-- 背景边框的圆角大小 -->
        <attr name="bgCorner" format="dimension"/>
    </declare-styleable>
</resources>

自定义输入框

public class PasswordEditText extends EditText {
    // 画笔
    private Paint mPaint;
    // 一个密码所占的宽度
    private int mPasswordItemWidth;
    // 密码的个数默认为6位数
    private int mPasswordNumber = 6;
    // 背景边框颜色
    private int mBgColor = Color.parseColor("#d1d2d6");
    // 背景边框大小
    private int mBgSize = 1;
    // 背景边框圆角大小
    private int mBgCorner = 0;
    // 分割线的颜色
    private int mDivisionLineColor = mBgColor;
    // 分割线的大小
    private int mDivisionLineSize = 1;
    // 密码圆点的颜色
    private int mPasswordColor = mDivisionLineColor;
    // 密码圆点的半径大小
    private int mPasswordRadius = 4;

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

    public PasswordEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttributeSet(context, attrs);
        initPaint();
        //设置默认只能设置数字和字母
        setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();
        // 抗锯齿
        mPaint.setAntiAlias(true);

        // 防抖动
        mPaint.setDither(true);
    }

    /**
     * 初始化属性
     */
    private void initAttributeSet(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText);
        // 获取大小
        mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize));
        mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius));
        mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize));
        mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, 0);
        // 获取颜色
        mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor);
        mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor);
        mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mDivisionLineColor);
        array.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 一个密码的宽度
        mPasswordItemWidth = (getWidth() - 2 * mBgSize - (mPasswordNumber - 1) * mDivisionLineSize) / mPasswordNumber;
        //画背景
        drawBg(canvas);
        // 画分割线
        drawDivisionLine(canvas);
        //画密码
        drawPassWord(canvas);

    }

    /**
     * 绘制密码
     */
    private void drawPassWord(Canvas canvas) {
        //设置为实心
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mPasswordColor);

        //获取输入框内容
        String password = getText().toString().trim();
        int length = password.length();
        //for循环
        for (int i = 0; i < length; i++) {
            int cy=getHeight()/2;
            int cx = mBgSize + i * mPasswordItemWidth + i * mDivisionLineSize + mPasswordItemWidth / 2;
            canvas.drawCircle(cx,cy,mPasswordRadius,mPaint);
        }
    }

    /**
     * 画分割线
     */
    private void drawDivisionLine(Canvas canvas) {
        mPaint.setStrokeWidth(mDivisionLineSize);
        mPaint.setColor(mDivisionLineColor);
        for (int i = 0; i < mPasswordNumber-1; i++) {
            float startX = (i+1)*mPasswordItemWidth+mBgSize+mDivisionLineSize;
            float startY = mBgSize;
            float endX = startX;
            float endY = getHeight()-mBgSize;
            canvas.drawLine(startX, startY, endX, endY, mPaint);
        }

    }

    /**
     * 绘制背景
     */
    private void drawBg(Canvas canvas) {
        //如果没有设置背景则 canvas.drawRect();
//        RectF rect=new RectF(0,0,getWidth(),getHeight());
        RectF rect = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);
        mPaint.setStrokeWidth(mBgSize);
        //设置画笔为空心
        mPaint.setStyle(Paint.Style.STROKE);
        if (mBgCorner == 0) {
            canvas.drawRect(rect, mPaint);
        } else {
            canvas.drawRoundRect(rect, mBgCorner, mBgCorner, mPaint);
        }

    }

    /**
     * px 转 dp
     */
    private float dip2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dip, getResources().getDisplayMetrics());
    }

    /**
     * 添加密码
     */
    public void addPassWordNumber(String number) {
        String passWord = getText().toString();
        if(passWord.length()>=mPasswordNumber){//当前密码的长度大于当前密码数量return
            return;
        }
        passWord+=number;
        setText(passWord);
        //判断是否添加密码是否添加完成
        if(mListener!=null){
            if(passWord.length()>=mPasswordNumber){
                mListener.passwordFull(getText().toString().trim());
            }
        }
    }

    /**
     * 删除密码
     */
    public void deletePassWord() {
        String passWord = getText().toString().trim();
        if(passWord.length()<=0){
            return;
        }
        passWord=passWord.substring(0,passWord.length()-1);
        setText(passWord);
    }
    // 设置当前密码是否已满的接口回掉
    private PasswordFullListener mListener;
    public void setOnPasswordFullListener(PasswordFullListener listener){
        this.mListener = listener;
    }



    /**
     * 密码已经全部填满
     */
    public interface PasswordFullListener {
        public void passwordFull(String password);
    }
}

CustomerKeyboard:自定义键盘

public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {
    public CustomerKeyboard(Context context) {
        this(context, null);
    }

    public CustomerKeyboard(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomerKeyboard(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.ui_customer_keyboard, this);
        setItemClickListener(this);
    }

    /**
     * 设置子view的点击事件
     */
    public void setItemClickListener(View view) {
        if (view instanceof ViewGroup) {
            ViewGroup viewGroup = (ViewGroup) view;//LinearLayout
            //继续遍历
            int childCount = viewGroup.getChildCount();
            for (int i = 0; i < childCount; i++) {
                //不断遍历循环
                View childView = viewGroup.getChildAt(i);
                setItemClickListener(childView);
            }
        } else {
            view.setOnClickListener(this);
        }

    }

    @Override
    public void onClick(View v) {
        if (v instanceof TextView) {
            String number = ((TextView) v).getText().toString().trim();
            if(v.getId()==R.id.textView4){
                Toast.makeText(getContext(),"改按钮不可点击",Toast.LENGTH_SHORT).show();
                return;
            }
            if (mListener != null) {
                mListener.click(number);
            }
        }
        if(v instanceof ImageView){
            if(mListener!=null){
                mListener.delete();
            }
        }
    }

    // 设置点击回掉监听
    private CustomerKeyboardClickListener mListener;

    public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {
        this.mListener = listener;
    }

    /**
     * 点击键盘的回调监听
     */
    public interface CustomerKeyboardClickListener {
        public void click(String number);

        public void delete();
    }
}

MainActivity中使用

   mPasswordEditText = (PasswordEditText) findViewById(R.id.password_edit_text);
        mCustomerKeyBoard = (CustomerKeyboard) findViewById(R.id.customer_key_board);
        mPasswordEditText.setOnPasswordFullListener(this);
        mCustomerKeyBoard.setOnCustomerKeyboardClickListener(new CustomerKeyboard.CustomerKeyboardClickListener() {
            @Override
            public void click(String number) {
                //Toast.makeText(MainActivity.this,"点击了"+number,Toast.LENGTH_SHORT).show();
                mPasswordEditText.addPassWordNumber(number);
            }

            @Override
            public void delete() {
                //Toast.makeText(MainActivity.this,"点击了删除",Toast.LENGTH_SHORT).show();
                mPasswordEditText.deletePassWord();
            }
        });

@Override
    public void passwordFull(String password) {
        Toast.makeText(MainActivity.this,"你输入的密码是:"+password,Toast.LENGTH_SHORT).show();
    }

最后：附上源码的位置:https://gitee.com/yijia_cn/Android_Advanced.git

自定义view-仿支付宝芝麻分圆盘
zhou_anzhuojinjie的博客
01-16 633
自定义view-仿支付宝芝麻分表盘
仿支付宝app源码，基于uniapp框架，精仿支付宝UI界面，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝APP！
09-02
仿支付宝app源码，基于uniapp框架，精仿支付宝UI界面，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝APP！精仿支付宝UI界面，基于SumerUI 3.0和Uniapp前端框架，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝扫码支付/收付款，蚂蚁森林种树养鸡农场偷菜，用于视频，商城，直播，聊天，等场景 完全开源 无任何代码加密 使用Hbuilder导入插件即可使用。无后端代码，放心使用 兼容所有前端 源码说明： 1.0开源，1.0版本只提供SUMER UI组件库，应用界面要自己开发。2.0是完整版，提供完整应用UI界面及实现完整功能。 插件市场只提供1.0版本下载，2.0以上版本可扫下面的小程序码，进入小程序下载。 源码使用Hbuilder导入插件即可使用。无后端代码，如需后端代码，请联系作者有偿提供。 兼容所有热门终端。小程序，APP，H5 完美兼容！ 仿支付宝app源码，基于uniapp框架，精仿支付宝UI界面，界面漂亮颜值高，视频商城小工具等，支持订制开发，模拟支付宝APP！仿支付宝app源码，基于uniapp框架，精仿支付宝UI界面，界面漂亮
仿淘宝支付密码键盘
03-20
仿淘宝支付密码键盘
Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
weixin_39901203的博客
05-26 249
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能。效果如下所示：思路：就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会...
仿支付宝很牛逼的应用编辑.zip
02-25
最近客户要求实现应用编辑功能,模仿支付宝,里面实现的还是蛮不错的.有需要的就拿去用吧...有问题可以私聊我
仿支付宝平台源码
07-26
仿支付宝平台源码
RecyclerView实现仿支付宝应用管理
08-27
主要为大家详细介绍了RecyclerView实现仿支付宝应用管理的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义view-仿支付宝芝麻分表盘
01-16
本文将深入探讨如何实现一个自定义View，具体案例为仿支付宝芝麻分表盘，这对于初学者来说是一个很好的实践项目。 首先，我们需要理解自定义View的基本流程。在Android中，自定义View通常涉及以下步骤： 1. **创建...
Android移动开发-自定义View组件与TextWatcher监听-仿支付宝支付密码输入框与安全键盘实现-提供完整密码输入解决方案包含6位数字密码验证输入完成回调及密码获取功能.zip
最新发布
06-26
本压缩包文件提供了一个名为“仿支付宝支付密码输入框与安全键盘实现”的完整密码输入解决方案。该解决方案包括了自定义的View组件，它模拟了支付宝支付时输入密码的界面，确保了用户在输入密码时的隐私安全。同时，...
Android自定义view之仿支付宝芝麻信用仪表盘示例
01-05
自定义view练习 仿支付宝芝麻信用的仪表盘 对比图： 首先是自定义一些属性，可自己再添加，挺基础的，上代码 <?xml version=1.0 encoding=utf-8?> <!--最大数值--> <!--圆盘起始角度--&...
仿支付宝 财付通 大型网络支付平台网站源码
05-12
仿支付宝 财付通 大型网络支付平台网站源码 好不容易找到的东西 好像是用asp做的，共享了
支付宝（高仿）源码
07-10
等待完成界面： 1.手势解锁界面 2.其他详情页面 已经完成界面： 1.支付宝Home页（可自由对图标进行拖动排序和删除，尚未做持久化存储） 2.二维码、条形码扫描功能 3.服务界面 4.财富界面 5.余*额宝界面（收益数字动态表现） 测试环境：Xcode 6.2，iOS 6.0以上 欢迎有兴趣的同学和我一起努力完善此款APP
仿支付宝平台源码-互联网代码类资源
04-20
仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码 仿支付宝平台源码
一款高仿支付宝扫描的android源码
10-30
一款高仿支付宝扫描的android源码，扫描速度非常快，非常适合带有扫码功能的需求使用。
自定义仿支付宝首页Behavior 实例源码
07-05
一个自己写的博客附带源码
源码推荐(6.16)：高仿新浪微博，支付宝（高仿）源码[超强悍]
loongwong2011的博客
06-22 1112
原文地址：http://www.cocoachina.com/ios/20150616/12134.html 高仿新浪微博(作者：sam408130) 模仿新浪微博做的一款app，有发送博文，评论，点赞，私聊功能（修复了滑动会卡的bug） 使用到的第三方库： AVOSCloud AVOSCloudIM JSBadgeView
本app(仿手机支付宝界面)ios源码
weixin_30819163的博客
11-19 460
本app(仿手机支付宝界面)主要演示了： 动态显示splashimage如何控制手势密码（AES加密保存数据）如何控制viewcontroller之间的跳转，viewcontroller的代理控制。TabbarController与navigationControlle结合使用动态显示splashimage定制tableViewController自定义UIButton效果图本a...
仿支付宝php源码,thinkPHP仿华为商城带支付宝接口(完整源码+数据库脚本)
weixin_30533377的博客
03-10 1328
【实例简介】后台地址：http://域名/index.php/Admin/Login/index.html管理员账号:admin 密码:admin将数据库名更改为ceshi.sql【实例截图】脚本【核心代码】/** 网站后台订单详情Model类*/namespace Admin\Model;use Think\Model\ViewModel;Class OrderDescViewModel e...
HTML5开发APP-框架MUI（仿支付宝案例）
07-11
HTML5开发APP-框架MUI（仿支付宝案例）HTML5开发APP-框架MUI（仿支付宝案例）
仿支付宝芝麻分表盘自定义view教程
标题《自定义view-仿支付宝芝麻分表盘》中涉及到的知识点主要包含以下几个方面： 1. 自定义View的定义与应用： 自定义View是Android开发中的一项重要技术，它允许开发者扩展和定制Android的UI组件。通过自定义View...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值