Android 仿「微信」自定义数字键盘

最终效果：

实现这个自定义键盘的思路很简单：

1. 要写出一个数字键盘的布局；
2. 与 Edittext 结合使用，对每个按键的点击事件进行处理；
3. 禁用系统软键盘。

有了思路，实现起来就不难了。

1. 实现键盘的 xml 布局

网格样式的布局用 GridView 或者 RecyclerView 都可以实现，其实用 GridView 更方便一些，不过我为了多熟悉 RecyclerView 的用法，这里选择用了 RecyclerView。

RecyclerView 用来实现键盘布局，上面的 RelativeLayout 则是为了实现收起键盘的点击事件。

2. 在代码中实现键盘布局，填充数据、增加点击事件

我们新建类 KeyboardView 继承自 RelativeLayout，关联上面的布局文件，然后做一些初始化操作：对 RecyclerView 填充数据、设置适配器，设置出现和消失的动画效果，写一些会用到的方法等。

public class KeyboardView extends RelativeLayout {

    private RelativeLayout rlBack;
    private RecyclerView recyclerView;
    private List datas;
    private KeyboardAdapter adapter;
    private Animation animationIn;
    private Animation animationOut;


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

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

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

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        LayoutInflater.from(context).inflate(R.layout.layout_key_board, this);
        rlBack = findViewById(R.id.rl_back);
        rlBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) { // 点击关闭键盘
                dismiss();
            }
        });
        recyclerView = findViewById(R.id.recycler_view);

        initData();
        initView();
        initAnimation();
    }

    // 填充数据
    private void initData() {
        datas = new ArrayList<>();
        for (int i = 0; i < 12; i++) {
            if (i < 9) {
                datas.add(String.valueOf(i + 1));
            } else if (i == 9) {
                datas.add(".");
            } else if (i == 10) {
                datas.add("0");
            } else {
                datas.add("");
            }
        }
    }

    // 设置适配器
    private void initView() {
        recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
        adapter = new KeyboardAdapter(getContext(), datas);
        recyclerView.setAdapter(adapter);
    }

    // 初始化动画效果
    private void initAnimation() {
        animationIn = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_in);
        animationOut = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_out);
    }

    // 弹出软键盘
    public void show() {
        startAnimation(animationIn);
        setVisibility(VISIBLE);
    }

    // 关闭软键盘
    public void dismiss() {
        if (isVisible()) {
            startAnimation(animationOut);
            setVisibility(GONE);
        }
    }

    // 判断软键盘的状态
    public boolean isVisible() {
        if (getVisibility() == VISIBLE) {
            return true;
        }
        return false;
    }

    public void setOnKeyBoardClickListener(KeyboardAdapter.OnKeyboardClickListener listener) {
        adapter.setOnKeyboardClickListener(listener);
    }

    public List getDatas() {
        return datas;
    }

    public RelativeLayout getRlBack() {
        return rlBack;
    }
}

Adapter 里面都是很简单的代码，这里就不贴出了，文章末尾我会给出源码下载地址。

到这里为止，自定义数字键盘基本就算写好了，不过最重要的还是要和 Edittext 结合使用。

3. 与 Edittext 结合使用

1. 禁用系统软键盘

if (Build.VERSION.SDK_INT <= 10) {
     etInput.setInputType(InputType.TYPE_NULL);
} else {
     getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
     try {
         Class cls = EditText.class;
         Method setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", boolean.class);
         setShowSoftInputOnFocus.setAccessible(true);
         setShowSoftInputOnFocus.invoke(etInput, false);
     } catch (Exception e) {
         e.printStackTrace();
     }
}

在网上找了一些方法，但是点击 Edittext 的时候系统软键盘依然会弹出。最后找到了这个方法，利用反射强制不弹出软键盘，效果不错。

2. 处理各个按键的点击事件

    @Override
    public void onKeyClick(View view, RecyclerView.ViewHolder holder, int position) {
        switch (position) {
            case 9: // 按下小数点
                String num = etInput.getText().toString().trim();
                if (!num.contains(datas.get(position))) {
                    num += datas.get(position);
                    etInput.setText(num);
                    etInput.setSelection(etInput.getText().length());
                }
                break;
            default: // 按下数字键
                if ("0".equals(etInput.getText().toString().trim())) { // 第一个数字按下0的话，第二个数字只能按小数点
                    break;
                }
                etInput.setText(etInput.getText().toString().trim() + datas.get(position));
                etInput.setSelection(etInput.getText().length());
                break;
        }
    }

    @Override
    public void onDeleteClick(View view, RecyclerView.ViewHolder holder, int position) {
        // 点击删除按钮
        String num = etInput.getText().toString().trim();
        if (num.length() > 0) {
            etInput.setText(num.substring(0, num.length() - 1));
            etInput.setSelection(etInput.getText().length());
        }
    }

逻辑也非常简单，看代码就明白了。最终的效果就是第一张图的样子。

这个键盘很简单，打算之后写一个模仿微信或者支付宝的支付密码输入布局。

->->->点击下载源码<-<-<-

欢迎关注我的微信公众号