自定义数字键盘

                    自定义数字键盘

前端时间有个要优化键盘的需求，后来发现安卓自带的系统键盘很难修改，于是决定自定义一个数字键盘，该键盘是纯数字键盘，同时最上方有图标和完成键，最下方是，完成，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，关于这点大家自己去查找了，图片也不贴了，希望对大家有些启发。