引子
在Android项目开发中特别是一些稍大型的项目，面对需求文档的时候你经常会发现很多地方用到了同样的组件，但是又略有不同。比如这个：
右边是一个小键盘输入板，左边当焦点不同的时候分别用右边的小键盘输入板来输入内容，同时发现很多别的地方也用到了这个小键盘输入板。
按照以往的做法，我们可能这样子来做出这么一个控件：
- 写一个小键盘的布局单独存为一个layout文件
- 在用到这个小键盘的activity/fragment中的layout布局中include这个小键盘布局文件
- 在activity/fragment中监听每小键盘的按钮来改变输入框的内容
这样子，别的地方同样用到这个小键盘就可以：
- 同样include这个布局文件
- 同样拷贝按钮逻辑处理代码
那么你做到复用了吗？答案是否定的。因为这里有一些问题，也是一些变数：
- 小键盘的布局可能不是这个样子的，其他地方布局万一有变化呢
- 小键盘的每个按钮按下后输入的效果或者说内容是不一样的
- 小键盘针对哪个输入框（比如EditText）起作用也是不定的
这样子看来面临的问题还很多，所以需要重新考虑怎么制作这个控件了。
如何抽象
我们第一步需要把这个组件的共性和区别给抽象出来，通过仔细考虑，发现下列地方是可以公用：
- 小键盘的各种布局中的每个按钮（0~9、小数点、删除）的view id是可以相同的
- 小键盘中每个按钮按下后的效果是可以有一个共同操作的，比如按下1就出来一个1，按下删除就删除最后一个数字
- 小键盘起作用的时候，影响的输入框在作用的时候引用是不变的（除非用户点击了另一个输入框期望对这个输入框操作）
所以我们做出这样的一个小键盘输入组件：
- 提供默认的布局，同时提供接口让使用者自定义布局
- 提供默认的按钮操作，同时提供接口让使用者自定义按钮操作（比如某个奇葩用户希望按下1键后打出来a）
- 提供接口，可以设置正在作用的输入框
下面将以上三点一一说明。
最终做出来的空间效果为：
（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;
}
至此，一个完整的可以快速复用定制的小键盘输入组件就搞定了