自定义数字键盘
前端时间有个要优化键盘的需求,后来发现安卓自带的系统键盘很难修改,于是决定自定义一个数字键盘,该键盘是纯数字键盘,同时最上方有图标和完成键,最下方是,完成,0,删除键。
思路大体是这样:用户点击了一个EditText后,屏蔽掉系统的键盘,同时弹出自己定义的键盘,这个键盘从本质上来讲其实就是一个dialog,只是把这个dialog显示在了页面的底部,dialog的样式可以根据需求自己定义。
首先,我们先描绘好页面。
<?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="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/bg_color"
android:orientation="horizontal">
<ImageView
android:id="@+id/number_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/margin20"
android:padding="@dimen/margin15"
android:layout_centerHorizontal="true"
android:src="@drawable/mima_logo" />
<TextView
android:id="@+id/logo_number_finish"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="@color/black"
android:gravity="center_vertical"
android:layout_alignParentRight="true"
android:textSize="@dimen/sp16"
android:paddingRight="@dimen/margin15"
android:text="完成" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal">
<TextView
android:id="@+id/number1"
style="@style/number_style"
android:text="1" />
<TextView
android:id="@+id/number2"
style="@style/number_style"
android:text="2" />
<TextView
android:id="@+id/number3"
style="@style/number_style"
android:text="3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal">
<TextView
android:id="@+id/number4"
style="@style/number_style"
android:text="4" />
<TextView
android:id="@+id/number5"
style="@style/number_style"
android:text="5" />
<TextView
android:id="@+id/number6"
style="@style/number_style"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal">
<TextView
android:id="@+id/number7"
style="@style/number_style"
android:text="7" />
<TextView
android:id="@+id/number8"
style="@style/number_style"
android:text="8" />
<TextView
android:id="@+id/number9"
style="@style/number_style"
android:text="9" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal">
<TextView
android:id="@+id/number_finish"
style="@style/number_style"
android:background="@color/result_minor_text"
android:text="完成"
android:textSize="@dimen/sp16" />
<TextView
android:id="@+id/number0"
style="@style/number_style"
android:text="0" />
<ImageView
android:id="@+id/number_delete"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/result_minor_text" />
</LinearLayout>
</LinearLayout>
接着是style
<style name="number_style">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">@dimen/sp22</item>
<item name="android:textColor">@color/black</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/keyboard_number</item>
</style>
<style name="alert_dialog" >
<item name="android:windowFrame">@null</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="dialog_anim" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/dialog_in</item>
<item name="android:windowExitAnimation">@null</item>
</style>
再接着是自定义的dialog,这个dialog继承了AlertDialog,用户点击了Editext后在底部显示
public class KeyBoardDialog extends AlertDialog {
@BindView(R.id.logo_number_finish)
TextView logo_number_finish;
@BindView(R.id.number1)
TextView number1;
@BindView(R.id.number2)
TextView number2;
@BindView(R.id.number3)
TextView number3;
@BindView(R.id.number4)
TextView number4;
@BindView(R.id.number5)
TextView number5;
@BindView(R.id.number6)
TextView number6;
@BindView(R.id.number7)
TextView number7;
@BindView(R.id.number8)
TextView number8;
@BindView(R.id.number9)
TextView number9;
@BindView(R.id.number0)
TextView number0;
@BindView(R.id.number_finish)
TextView number_finish;
@BindView(R.id.number_delete)
ImageView number_delete;
@BindView(R.id.number_logo)
ImageView number_logo;
private EditText editText;
public KeyBoardDialog(Context context) {
super(context);
requestWindowFeature(Window.FEATURE_NO_TITLE);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.ui_keyboard);
ButterKnife.bind(this);
}
private void initDialog() {
Window window = this.getWindow();
// this.setCanceledOnTouchOutside(true);//外部点击是否有效
window.setGravity(Gravity.BOTTOM);//显示在底部
// window.setWindowAnimations(R.style.dialog_anim);//动画可有可无,根据需求了
WindowManager.LayoutParams layoutParams = window.getAttributes();
layoutParams.dimAmount = 0f;//去掉dialog背景的黑暗色 这个很重要
layoutParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
window.setAttributes(layoutParams);
}
//外部调用该方法即可
public void showDialog(EditText editText) {
super.show();
this.editText = editText;
initDialog();
}
//响应点击事件
@OnClick({R.id.number1, R.id.number2, R.id.number3, R.id.number4, R.id.number5, R.id.number6, R.id.number7, R.id.number8, R.id.number9, R.id.number0, R.id.logo_number_finish, R.id.number_finish, R.id.number_delete})
public void click(View view) {
String inputStr = editText.getText().toString();
switch (view.getId()) {
case R.id.number0:
if (inputStr.length() == 0) {//禁止0开头,不同需求可以去掉
break;
} else {
editText.setText(inputStr + "0");
editText.setSelection(editText.length());
}
break;
case R.id.number1:
editText.setText(inputStr + "1");
editText.setSelection(editText.length());
break;
case R.id.number2:
editText.setText(inputStr + "2");
editText.setSelection(editText.length());
break;
case R.id.number3:
editText.setText(inputStr + "3");
editText.setSelection(editText.length());
break;
case R.id.number4:
editText.setText(inputStr + "4");
editText.setSelection(editText.length());
break;
case R.id.number5:
editText.setText(inputStr + "5");
editText.setSelection(editText.length());
break;
case R.id.number6:
editText.setText(inputStr + "6");
editText.setSelection(editText.length());
break;
case R.id.number7:
editText.setText(inputStr + "7");
editText.setSelection(editText.length());
break;
case R.id.number8:
editText.setText(inputStr + "8");
editText.setSelection(editText.length());
break;
case R.id.number9:
editText.setText(inputStr + "9");
editText.setSelection(editText.length());
break;
case R.id.number_finish:
case R.id.logo_number_finish://两个完成键
dismiss();
break;
case R.id.number_delete://按了删除键
if (inputStr.length() > 0) {
editText.setText(inputStr.substring(0, inputStr.length() - 1));
editText.setSelection(inputStr.length() - 1);
}
break;
}
}
}
然后是activity中的处理,et_account_num就是EditText.
et_account_num.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN){
et_account_num.requestFocus();//获取光标
getWindow().setSoftInputMode(SOFT_INPUT_STATE_ALWAYS_HIDDEN);//隐藏系统自带的键盘
KeyBoardDialog keyBoardDialog = new KeyBoardDialog(context);
keyBoardDialog.showDialog(et_account_num);//展示自定义的键盘
}
return true;
}
});
需要注意的是,这里的实例化各个组件和点击事件用了butterknife,关于这点大家自己去查找了,图片也不贴了,希望对大家有些启发。