教你写一个Android可快速复用的小键盘输入控件

引子

---

在Android项目开发中特别是一些稍大型的项目，面对需求文档的时候你经常会发现很多地方用到了同样的组件，但是又略有不同。比如这个：

右边是一个小键盘输入板，左边当焦点不同的时候分别用右边的小键盘输入板来输入内容，同时发现很多别的地方也用到了这个小键盘输入板。

按照以往的做法，我们可能这样子来做出这么一个控件：

1. 写一个小键盘的布局单独存为一个layout文件
2. 在用到这个小键盘的activity/fragment中的layout布局中include这个小键盘布局文件
3. 在activity/fragment中监听每小键盘的按钮来改变输入框的内容

这样子，别的地方同样用到这个小键盘就可以：

• 同样include这个布局文件
• 同样拷贝按钮逻辑处理代码

那么你做到复用了吗？答案是否定的。因为这里有一些问题，也是一些变数：

• 小键盘的布局可能不是这个样子的，其他地方布局万一有变化呢
• 小键盘的每个按钮按下后输入的效果或者说内容是不一样的
• 小键盘针对哪个输入框（比如EditText）起作用也是不定的

这样子看来面临的问题还很多，所以需要重新考虑怎么制作这个控件了。

 

 

如何抽象

---

我们第一步需要把这个组件的共性和区别给抽象出来，通过仔细考虑，发现下列地方是可以公用：

• 小键盘的各种布局中的每个按钮（0~9、小数点、删除）的view id是可以相同的
• 小键盘中每个按钮按下后的效果是可以有一个共同操作的，比如按下1就出来一个1，按下删除就删除最后一个数字
• 小键盘起作用的时候，影响的输入框在作用的时候引用是不变的（除非用户点击了另一个输入框期望对这个输入框操作）

所以我们做出这样的一个小键盘输入组件：

1. 提供默认的布局，同时提供接口让使用者自定义布局
2. 提供默认的按钮操作，同时提供接口让使用者自定义按钮操作（比如某个奇葩用户希望按下1键后打出来a）
3. 提供接口，可以设置正在作用的输入框

下面将以上三点一一说明。

最终做出来的空间效果为：

（PS : 只是右边的小键盘控件，左边的可以忽略）

 

 

布局

---

首先我们这个自定义view继承自LinearLayout，我们把它命名为NumericPad类，首先是写一个默认的布局，这里很简单，花点时间即可：

// filename : custom_numeric_pad.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/pad_1"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="1"/>
        <Button
            android:id="@+id/pad_2"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="2"/>
        <Button
            android:id="@+id/pad_3"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="3"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/pad_4"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="4"/>
        <Button
            android:id="@+id/pad_5"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="5"/>
        <Button
            android:id="@+id/pad_6"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="6"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/pad_7"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="7"/>
        <Button
            android:id="@+id/pad_8"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="8"/>
        <Button
            android:id="@+id/pad_9"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="9"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/pad_dot"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="."/>
        <Button
            android:id="@+id/pad_0"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:textSize="26sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:text="0"/>
        <ImageButton
            android:id="@+id/pad_del"
            android:layout_width="0dp"
            android:layout_height="65dp"
            android:layout_weight="1"
            android:layout_margin="10dp"
            android:scaleType="center"
            android:background="@drawable/bg_cal_btn_selector"
            android:textColor="@color/btn_text_color"
            android:src="@drawable/cal_del_selector"/>
    </LinearLayout>
</LinearLayout>

上述layout的效果即为最终效果图右侧的那个12个按钮的输入板，我们在NumericPad的构造方法中inflater出来：

public NumericPad(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mRoot = (LinearLayout) mInflater.inflate(R.layout.custom_numeric_pad, this);
    }

同时提供一个接口允许用户传入一个layout资源id，但是这个资源文件里面的每个viewid都是和默认的layout每个viewid是一致的，比如按钮1的viewid必须是R.id.pad_1，按钮删除的viewid必须是R.id.pad_del，依次类推。这样子做是为了第二步，封装和提供自定制按钮逻辑而做准备的。提供的设置layout的接口很简单：

public void setLayout(@LayoutRes int layoutId) {
        if (layoutId != 0) {
            // use customized layout from parameter
            mRoot = (LinearLayout) mInflater.inflate(layoutId, this);
        }

    }

 

 

按钮逻辑

---

因为每个小键盘按钮都是个button，那么这里首先我们要处理的是点击事件的监听，这里我们不需要创建出来button，只需要依次迭代每个ViewID对他findviewbyid出来，同时设置setonclicklistener或者setonlongclicklistener即可：

 

首先需要将NumericPad实现两个接口：

public class NumericPad extends LinearLayout implements View.OnClickListener, View.OnLongClickListener{
...

}

在写一个ArrayList，把所有的viewId放进去，逐个的设置监听事件：

//initView方法需要在NumericPad的构造函数和setLayout方法中调用

 private void initView() {
        mViewsId = new ArrayList<>();
        mViewsId.add(R.id.pad_0);
        mViewsId.add(R.id.pad_1);
        mViewsId.add(R.id.pad_2);
        mViewsId.add(R.id.pad_3);
        mViewsId.add(R.id.pad_4);
        mViewsId.add(R.id.pad_5);
        mViewsId.add(R.id.pad_6);
        mViewsId.add(R.id.pad_7);
        mViewsId.add(R.id.pad_8);
        mViewsId.add(R.id.pad_9);
        mViewsId.add(R.id.pad_dot);
        mViewsId.add(R.id.pad_del);
        for (int viewId : mViewsId) {
            findViewById(viewId).setOnClickListener(this);
            findViewById(viewId).setOnLongClickListener(this);
        }
    }

随后就是在onClick和onLongClick里面实现默认的逻辑，比如输入一个1或者删除一个字符，或者长按删除清空输入框：

@Override
    public boolean onLongClick(View v) {
        switch (v.getId()) {
            case R.id.pad_del:
                if (mInputView != null) {
                    mInputView.setText("");
                }
                break;
        }
        return true;
    }
    @Override
    public void onClick(View v) {
        int result_param = PAD_ERR;
        switch (v.getId()) {
            case R.id.pad_0:
                result_param = PAD_ZERO;
                break;
            case R.id.pad_1:
                result_param = PAD_ONE;
                break;
            case R.id.pad_2:
                result_param = PAD_TWO;
                break;
            case R.id.pad_3:
                result_param = PAD_THREE;
                break;
            case R.id.pad_4:
                result_param = PAD_FOUR;
                break;
            case R.id.pad_5:
                result_param = PAD_FIVE;
                break;
            case R.id.pad_6:
                result_param = PAD_SIX;
                break;
            case R.id.pad_7:
                result_param = PAD_SEVEN;
                break;
            case R.id.pad_8:
                result_param = PAD_EIGHT;
                break;
            case R.id.pad_9:
                result_param = PAD_NINE;
                break;
            case R.id.pad_dot:
                result_param = PAD_DOT;
                break;
            case R.id.pad_del:
                result_param = PAD_DEL;
                break;
        }
        L.d("click button type : " + result_param);

        // do the default action
        doDefaultNumericAction(result_param);
    }

doDefaultNumericAction这个方法的具体的逻辑就不说了，后面一并放出。上面代码有两个需要解释的地方：

第一、mInputView这个变量即为所作用的inputView，这里需要提供一个接口让用户来设置所要作用的输入框，后面会说到。doDefaultNumericAction这个方法其实也就是在对mInputView的内容进行改变。

第二、PAD_ZERO这些就是一个常量而已，标识目前按下了哪个按钮

 

到此一个完整的具备布局和按钮逻辑的小键盘输入板已经完成了，下一步将提供用户可定制的输入板逻辑接口。

 

 

用户可定制逻辑

---

既然是用户自己想定制按钮输入逻辑，那么这个逻辑代码应该是放在含有NumericPad的activity/fragment中的，所以我们在NumericPad里面写一个interface:

public interface NumericPadButtonClickListener {
        /**
         * 当按下数字键盘某个按钮后的回调
         * @param type 检查返回值是否为PAD_ERR（错误），否者就是正常按下了某个值，根据值来判断做对应的界面响应
         */
        void onNumericPadButtonClicked(int type);
}
/**
 * 设置键盘按钮响应回调方法
 * @param mListener
 */
public void setNumericPadButtonClickListener(NumericPadButtonClickListener mListener) {
    this.mListener = mListener;
}

让activity/fragment来Implements这个接口，同时实现下面这个方法：

@Override
    public void onNumericPadButtonClicked(int type) {

    }

这个时候每当按钮按下，activity/fragment的onNumericPadButtonClicked会被毁掉，activity/fragment对type进行判断来执行相应的操作，比如如果type是PAD_ONE，在输入框中输入一个'a'。

 

NumericPad里面需要将按钮按下的事件和NumericPadButtonClickListener接口绑定起来，即改造onClick方法：

@Override
    public void onClick(View v) {
        int result_param = PAD_ERR;
        switch (v.getId()) {
            case R.id.pad_0:
                result_param = PAD_ZERO;
                break;
            case R.id.pad_1:
                result_param = PAD_ONE;
                break;
            case R.id.pad_2:
                result_param = PAD_TWO;
                break;
            case R.id.pad_3:
                result_param = PAD_THREE;
                break;
            case R.id.pad_4:
                result_param = PAD_FOUR;
                break;
            case R.id.pad_5:
                result_param = PAD_FIVE;
                break;
            case R.id.pad_6:
                result_param = PAD_SIX;
                break;
            case R.id.pad_7:
                result_param = PAD_SEVEN;
                break;
            case R.id.pad_8:
                result_param = PAD_EIGHT;
                break;
            case R.id.pad_9:
                result_param = PAD_NINE;
                break;
            case R.id.pad_dot:
                result_param = PAD_DOT;
                break;
            case R.id.pad_del:
                result_param = PAD_DEL;
                break;
        }
        L.d("click button type : " + result_param);
        if (mListener != null) {
            // 新添加的代码
            // do the custom action
            mListener.onNumericPadButtonClicked(result_param);
        } else {
            L.d("button click listener is null, will call the default action");
            // do the default action
            doDefaultNumericAction(result_param);
        }
    }

设置正在操作的输入框

---

这里很简单，就是一个设置的接口：

public void setInputView(@NonNull TextView view) {
        this.mInputView = view;
    }

至此，一个完整的可以快速复用定制的小键盘输入组件就搞定了