Android 自定义数字键盘

最新推荐文章于 2024-08-08 08:25:19 发布
最新推荐文章于 2024-08-08 08:25:19 发布
阅读量2.5k 收藏 6
点赞数
分类专栏： android  技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lindroid/article/details/83582685
版权

先来看下截图

 

 

有时需要输入验证码或者数字密码的地方，为了安全和便捷，应用内通常会自定义一个数字键盘，来帮助用户完成输入。

那么我们来自己动手撸一个键盘出来；

 

1.首先在res目录里新建xml目录，然后在xml目录中新建num_keyboard.xml：

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:horizontalGap="1dp"
    android:keyHeight="8%p"
    android:keyWidth="33.33333%p"
    android:verticalGap="1dp">

    <Row>
        <Key
            android:codes="49"
            android:keyLabel="1" />
        <Key
            android:codes="50"
            android:keyLabel="2" />
        <Key
            android:codes="51"
            android:keyLabel="3" />
    </Row>

    <Row>
        <Key
            android:codes="52"
            android:keyLabel="4" />
        <Key
            android:codes="53"
            android:keyLabel="5" />
        <Key
            android:codes="54"
            android:keyLabel="6" />
    </Row>

    <Row>
        <Key
            android:codes="55"
            android:keyLabel="7" />
        <Key
            android:codes="56"
            android:keyLabel="8" />
        <Key
            android:codes="57"
            android:keyLabel="9" />
    </Row>

    <Row>
        <Key
            android:codes="-10"
            android:keyLabel="取消" />
        <Key
            android:codes="48"
            android:keyLabel="0" />

        <Key
            android:codes="-5"
            android:keyIcon="@android:color/transparent" />
    </Row>

</Keyboard>

上面代码中，定义了KeyBoard 的按键排位和键值，keyLabl等参数；

 

 

2.自定义属性

在res/values/attrs.xml   中新增如下内容， 没有的话就创建这个文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="NumberKeyboardView">

        <!-- 删除按键的图标 -->
        <attr name="xnkv_deleteDrawable" format="reference" />

        <!-- 删除按键图标的宽度 -->
        <attr name="xnkv_deleteWidth" format="dimension|reference" />

        <!-- 删除按键图标的高度 -->
        <attr name="xnkv_deleteHeight" format="dimension|reference" />

        <!-- 删除按键图标的颜色 -->
        <attr name="xnkv_deleteBackgroundColor" format="color|reference" />

    </declare-styleable>

</resources>

 

3.自定义KeyBoardView



import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.inputmethodservice.Keyboard;
import android.inputmethodservice.KeyboardView;
import android.util.AttributeSet;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;


/**
 * 自定义数字键盘
 * kpl
 */
public class NumberKeyboardView extends KeyboardView implements KeyboardView.OnKeyboardActionListener {

    // 用于区分左下角空白的按键
    private static final int KEYCODE_EMPTY = -10;

    private int mDeleteWidth;
    private int mDeleteHeight;
    private int mDeleteBackgroundColor;
    private Drawable mDeleteDrawable;
    private Rect mDeleteDrawRect;

    private IOnKeyboardListener mOnKeyboardListener;
    private boolean showCancel = true;

    public NumberKeyboardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public NumberKeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NumberKeyboardView,
                defStyleAttr, 0);
        mDeleteDrawable = a.getDrawable(R.styleable.NumberKeyboardView_xnkv_deleteDrawable);
        mDeleteBackgroundColor = a.getColor(
                R.styleable.NumberKeyboardView_xnkv_deleteBackgroundColor, Color.TRANSPARENT);
        mDeleteWidth = a.getDimensionPixelOffset(R.styleable.NumberKeyboardView_xnkv_deleteWidth,
                -1);
        mDeleteHeight = a.getDimensionPixelOffset(R.styleable.NumberKeyboardView_xnkv_deleteHeight,
                -1);
        a.recycle();

        // 设置软键盘按键的布局
        Keyboard keyboard = new Keyboard(context, R.xml.keybord_num_layout);
        setKeyboard(keyboard);

        setEnabled(true);
        setPreviewEnabled(false); // 设置按键没有点击放大镜显示的效果
        setOnKeyboardActionListener(this);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 遍历所有的按键
        List<Keyboard.Key> keys = getKeyboard().getKeys();
        for (Keyboard.Key key : keys) {
            // 如果是左下角空白的按键，重画按键的背景
            if (key.codes[0] == KEYCODE_EMPTY) {
                if (showCancel) {
                    key.label = "取消";
                } else {
                    drawKeyBackground(key, canvas, mDeleteBackgroundColor);
                }
            }
            // 如果是右下角的删除按键，重画按键的背景，并且绘制删除图标
            else if (key.codes[0] == Keyboard.KEYCODE_DELETE) {
                drawKeyBackground(key, canvas, mDeleteBackgroundColor);
                drawDeleteButton(key, canvas);
            }
        }
    }

    // 绘制按键的背景
    private void drawKeyBackground(Keyboard.Key key, Canvas canvas, int color) {
        ColorDrawable drawable = new ColorDrawable(color);
        drawable.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
        drawable.draw(canvas);
    }


    public void setShowCancelButton(boolean isShow) {
        this.showCancel = isShow;
        invalidate();
    }


    /**
     * 设置返回按键图标
     *
     * @param icon
     */
    public void setBackKeyIcon(Drawable icon) {
        mDeleteDrawable = icon;
        invalidate();
    }

    // 绘制删除按键
    private void drawDeleteButton(Keyboard.Key key, Canvas canvas) {
        if (mDeleteDrawable == null) {
            return;
        }

        // 计算删除图标绘制的坐标
        if (mDeleteDrawRect == null || mDeleteDrawRect.isEmpty()) {
            int drawWidth, drawHeight;
            int intrinsicWidth = mDeleteDrawable.getIntrinsicWidth();
            int intrinsicHeight = mDeleteDrawable.getIntrinsicHeight();

            if (mDeleteWidth > 0 && mDeleteHeight > 0) {
                drawWidth = mDeleteWidth;
                drawHeight = mDeleteHeight;
            } else if (mDeleteWidth > 0 && mDeleteHeight <= 0) {
                drawWidth = mDeleteWidth;
                drawHeight = drawWidth * intrinsicHeight / intrinsicWidth;
            } else if (mDeleteWidth <= 0 && mDeleteHeight > 0) {
                drawHeight = mDeleteHeight;
                drawWidth = drawHeight * intrinsicWidth / intrinsicHeight;
            } else {
                drawWidth = intrinsicWidth;
                drawHeight = intrinsicHeight;
            }

            // 限制图标的大小，防止图标超出按键
            if (drawWidth > key.width) {
                drawWidth = key.width;
                drawHeight = drawWidth * intrinsicHeight / intrinsicWidth;
            }
            if (drawHeight > key.height) {
                drawHeight = key.height;
                drawWidth = drawHeight * intrinsicWidth / intrinsicHeight;
            }

            // 获取删除图标绘制的坐标
            int left = key.x + (key.width - drawWidth) / 2;
            int top = key.y + (key.height - drawHeight) / 2;
            mDeleteDrawRect = new Rect(left, top, left + drawWidth, top + drawHeight);
        }

        // 绘制删除的图标
        if (mDeleteDrawRect != null && !mDeleteDrawRect.isEmpty()) {
            mDeleteDrawable.setBounds(mDeleteDrawRect.left, mDeleteDrawRect.top,
                    mDeleteDrawRect.right, mDeleteDrawRect.bottom);
            mDeleteDrawable.draw(canvas);
        }
    }

    @Override
    public void onKey(int primaryCode, int[] keyCodes) {
        // 处理按键的点击事件
        // 点击了删除按键
        if (primaryCode == Keyboard.KEYCODE_DELETE) {
            if (mOnKeyboardListener != null)
                mOnKeyboardListener.onDeleteKeyEvent();
        }
        // 点击了数字按键
        else if (primaryCode != KEYCODE_EMPTY) {
            if (mOnKeyboardListener != null) {
                mOnKeyboardListener.onInsertKeyEvent(Character.toString(
                        (char) primaryCode));
            }
        } else if (showCancel && primaryCode == KEYCODE_EMPTY) {
            if (mOnKeyboardListener != null)
                mOnKeyboardListener.onCancel();
        }
    }

    // 0-9 数字的 Character 值
    private final List<Character> keyCodes = Arrays.asList('0', '1', '2', '3', '4', '5', '6', '7','8','9');

    /**
     * 随机打乱数字键盘上键位的排列顺序。
     */
    public void shuffleKeyboard() {
        Keyboard keyboard = getKeyboard();
        if (keyboard != null && keyboard.getKeys() != null && keyboard.getKeys().size() > 0) {

            Collections.shuffle(keyCodes); // 随机排序数字

            // 遍历所有的按键
            List<Keyboard.Key> keys = getKeyboard().getKeys();
            int index = 0;
            for (Keyboard.Key key : keys) {
                // 如果按键是数字
                if (key.codes[0] != KEYCODE_EMPTY && key.codes[0] != Keyboard.KEYCODE_DELETE) {
                    char code = keyCodes.get(index++);
                    key.codes[0] = code;
                    key.label = Character.toString(code);
                }
            }
            setKeyboard(keyboard);
        }
    }

    @Override
    public void onPress(int primaryCode) {

    }

    @Override
    public void onRelease(int primaryCode) {

    }

    @Override
    public void onText(CharSequence text) {

    }

    @Override
    public void swipeLeft() {

    }

    @Override
    public void swipeRight() {

    }

    @Override
    public void swipeDown() {

    }

    @Override
    public void swipeUp() {

    }

    /**
     * 设置键盘的监听事件。
     *
     * @param listener 监听事件
     */
    public void setIOnKeyboardListener(IOnKeyboardListener listener) {
        this.mOnKeyboardListener = listener;
    }

    /**
     * 键盘的监听事件。
     */
    public interface IOnKeyboardListener {

        /**
         * 点击数字按键。
         *
         * @param text 输入的数字
         */
        void onInsertKeyEvent(String text);

        /**
         * 点击了删除按键。
         */
        void onDeleteKeyEvent();

        /**
         *  点击了取消键
         */
        void onCancel();

    }
}

 

4.自定义包裹键盘的layout

<?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="match_parent"
    android:background="#00000000"
    android:orientation="vertical"
    >


    <View
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00000000" />


    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#33000000"
        />



    <com.kpl.test.numkeybordlib.NumberKeyboardView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/view_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#b0b0b0"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:keyBackground="@drawable/selector_key_background"
        android:keyTextColor="#000000"
        android:shadowColor="@android:color/transparent"
        android:shadowRadius="0"
        app:xnkv_deleteBackgroundColor="#d2d2d2"
        app:xnkv_deleteDrawable="@drawable/back"
        app:xnkv_deleteWidth="22dp" />
</LinearLayout>

当然，布局是一个match_parent 的LinearLayout ，目的是为了使键盘能该在满界面的最前端， 除了键盘view ， 还有两个view控件，其中一个完全透明， 用来铺满除键盘布局外剩余的屏幕空间；

android:keyBackground="@drawable/selector_key_background"

这里给键盘设置了状态选择器当背景，代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/holo_blue_dark" android:state_pressed="true" />
    <item android:drawable="@android:color/white" />

</selector>

其他的还有几个自定义的属性，用来配置删除按钮；

 

5.NumberKeyboardLayout   对键盘的封装， 外部使用键盘的时候，只需要使用这个对象即可；



import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.LinearLayout;

/**
*        kpl  自定义数字键盘 ，对外使用
*/
public class NumberKeyboardLayout extends LinearLayout {


    private NumberKeyboardView keyboardView;
    private View view;

    public NumberKeyboardLayout(Context context) {
        super(context);
        init(context);
    }

    public NumberKeyboardLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public NumberKeyboardLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }


    private void init(Context context) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.keyboard_view, this, true);
        keyboardView = inflate.findViewById(R.id.view_keyboard);
        view = inflate.findViewById(R.id.view);
        view.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                hide();
            }
        });
    }


    public void hide() {
        this.setVisibility(GONE);
    }

    public void show(Context context) {
        //
        this.setVisibility(VISIBLE);


        InputMethodManager imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);


// 强制隐藏软键盘
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);

    }

    //设置删除按钮的图标
    public void setBackKeyIcon(Drawable icon) {
        keyboardView.setBackKeyIcon(icon);
    }

    //打乱键盘的按键顺序，并重新绘制键盘
    public void shuffleKeyboard() {
        keyboardView.shuffleKeyboard();
    }

    //设置键盘的按键监听
    public void setIOnKeyboardListener(NumberKeyboardView.IOnKeyboardListener listener) {
        keyboardView.setIOnKeyboardListener(listener);
    }
}

 

6.使用

布局：

<?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="match_parent"
    android:orientation="vertical"
    >

  <EditText
      android:id="@+id/et"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />




  <Button
      android:onClick="bt"
      android:text="aaa"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />




</LinearLayout>

 

这里键盘的控件是直接通过new 一个NumberKeyboardLayout 对象，加在了Activity的布局中 

numberKeyboardLayout = new NumberKeyboardLayout(this);
        numberKeyboardLayout.setIOnKeyboardListener(this);

        addContentView(numberKeyboardLayout, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

至此，数字小键盘就撸完了

最后，送上两个隐藏系统软键盘的工具类


    /**
     * Hide the soft input.
     *
     * @param activity The activity.
     */
    public static void hideSoftInput( Activity activity) {
        InputMethodManager imm =
                (InputMethodManager) activity.getSystemService(Activity.INPUT_METHOD_SERVICE);
        if (imm == null) return;
        View view = activity.getCurrentFocus();
        if (view == null) view = new View(activity);
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
    }

    /**
     * Hide the soft input.
     *
     * @param view The view.
     */
    public static void hideSoftInput(Context context, View view) {
        InputMethodManager imm =
                (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
        //noinspection ConstantConditions
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
    }

 

 

 gitHub:

https://github.com/wkangle

陈塘关哪吒
关注
专栏目录
android 自定义数字软键盘,（笔记）Android自定义数字键盘
weixin_32780623的博客
05-25 2296
前言最近Android开发中用到了自定义数字键盘，网上找的demo不能满足我的需求，比如删除和插入的时候只能在最后删除和插入，不能通过滑动键盘来移动光标。所以现在完成后把它总结写出来。概述主要实现以下功能：(1)只有数字键，包括没有标点符号。(2)可以在任意点插入和删除数字。(3)可以通过手指左右滑动键盘来改变光标位置。(4)输入框右边删除图标和按钮可随着内容有无变化。(5)每三个数字空一格，输入...
Android 自定义软键盘实现 数字九宫格
2401_85730279的博客
06-23 993
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取。
android 纯自定义数字键盘输入
06-30
一个自定义的 android 纯数字键盘输入 demo 源码
数字键盘（NumberKeyboard）开源项目使用手册
最新发布
gitblog_00437的博客
08-08 547
数字键盘（NumberKeyboard）开源项目使用手册 NumberKeyboard仿造android端闲鱼发布选择价格数字键盘，自定义数字键盘项目地址:https://gitcode.com/gh_mirrors/nu/NumberKeyboard 项目概述 本指南将带您深入了解NumberKeyboard开源项目，这是一个专为Android应用设计的数字及辅助操作键盘库。该项目提供高度定制...
android 数字键盘
Anthonybuer的博客
12-27 1703
android平常在输入密码或者金额的时候需要自定义输入的数字键盘 引用：我是在这个软键盘的基础上进行修改的https://github.com/xuejinwei/NumberKeyboard 1. package com.dejun.commonsdk.wight.numkeyboard; import android.app.Activity; import android.conte...
android自定义数字键盘
02-02
android自定义数字键盘 实现键盘的自定义、点击edittext光变移动、数字随机生成等，目前只支持单行文本
Android 最简单的自定义数字键盘之一
weixin_34301307的博客
06-08 281
作者: Jooyer, 时间: 2018.6 .8 Github地址,欢迎点赞,fork 只需要四个类 + 几个 XML 文件即可,即拷即用 接下来我们依次讲解: NumberKeyboardView KeyboardContainer key_board_container.xml KeyboardUtil OnDoneListener 其他几个 XML 文件 首先我们看看 ...
android 自定义纯数字键盘输入
LiuWaiter的博客
06-30 5506
很久没更新博客了，最近在做一个新项目，遇到了很多坑，现将遇到的坑学到的东西一个个记录下来，方便自己和大家共同学习。后面还会抽出时间将项目中遇到的其他问题一一上传分析。项目中需要使用自定义数字键盘输入金额，效果图如下最初想偷懒在网上找个 demo copy 进项目，无奈网上的坑一个比一个多，还是自己瞎折腾吧，废话少说，开车！首先是界面部分，代码如下：<?xml version="1.0" encodi
Android开发之如何自定义数字键盘详解
01-04
这篇文章是介绍Android中自定义键盘的一些套路，通过定义一个数字键盘为例，本篇的文章语言是基于Kotlin实现的，如果还没有用或者不熟悉该语言的同学，可以自己补习，我之前也写过入门文章。 效果图 github：源码...
android自定义数字键盘和密码输入框
11-08
综上所述，实现"android自定义数字键盘和密码输入框"涉及到了Android自定义View、触摸事件处理、布局管理、样式定制等多个方面，通过这些技术可以打造出符合应用需求的专属输入界面，提升用户体验。在实际项目中，你...
Android 数字键盘实现过程
喵喵喵爱吃鱼的博客
02-15 534
Android 数字键盘实现过程
android edittext 自定义按键盘
04-18
edittext 自定义按键盘，实现按edittext不弹出系统的按键盘
android自定义软键盘--纯数字键
03-28
NULL 博文链接：https://yafei.iteye.com/blog/1260283
Android自定义键盘的实现（数字键盘和字母键盘）
08-29
本篇文章主要介绍了Android自定义键盘的实现（数字键盘和字母键盘），具有一定的参考价值，有兴趣的可以了解一下
android简约型数字键盘实现
欢迎进入JesseAndroid的博客
07-04 2356
效果图： xml代码，使用时将下面代码插入到你想添加数字键盘的地方即可： <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" andro...
Android EditText自定义按键盘
山石的专栏
04-18 2550
效果图：
Android自定义数字键盘
北京小辣鸡
12-20 223
借鉴大佬的键盘，也没啥说的，看代码最清晰，拿来直接用就完全 ojbk 我能加的注释 基本都加了。。。 package com.example.coco.canlaedemo; import android.content.Context; import android.graphics.Color; import android.text.TextUtils; import android.ut...
android 自定义数字软键盘,Android自定义数字键盘
weixin_42102713的博客
05-25 655
package com.numberkeyboard.android;/*** 数字键盘。*/public class WNumberKeyboardView extends KeyboardViewimplements KeyboardView.OnKeyboardActionListener {// 用于区分左下角空白的按键private static final int KEYCODE_EM...
android 自定义数字软键盘,Android 自定义数字键盘
weixin_35723036的博客
05-25 375
业务需求自定义数字键盘，写了一个demo主要代码：import android.app.Activity;import android.content.Context;import android.graphics.drawable.ColorDrawable;import android.util.DisplayMetrics;import android.view.View;import an...
android 自定义数字键盘
06-10
要自定义 Android 数字键盘，你可以使用自定义视图来替代默认的数字键盘。以下是一些步骤： 1.创建一个 XML 文件来定义你的自定义数字键盘的布局。例如，你可以在这个文件中添加按钮和其他视图，来表示数字键盘上的各个按键。 2.创建一个自定义视图类，该类继承自 View 或 ViewGroup，以便可以将你的 XML 布局文件加载到该视图中。 3.为你的自定义视图设置一些属性和方法，以便可以控制数字键盘的行为。例如，你可以添加一个方法来处理按键事件，或者添加一个属性来指定数字键盘的颜色和样式。 4.在你的应用程序中使用你的自定义数字键盘视图。这可以通过在 XML 布局文件中添加你的自定义视图，或者通过在代码中创建一个实例并将其添加到视图层次结构中来完成。 总之，自定义 Android 数字键盘需要你熟悉 Android 开发的基本知识，并且需要一些 Java 编程技巧。如果你不熟悉这些技术，可以参考一些 Android 开发教程或者请一个有经验的开发者来帮助你完成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值