最终效果:
实现这个自定义键盘的思路很简单:
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());
}
}
逻辑也非常简单,看代码就明白了。最终的效果就是第一张图的样子。
这个键盘很简单,打算之后写一个模仿微信或者支付宝的支付密码输入布局。