Android自定义数字键盘

时间:2014-02-19 05:48:23

标签: android android-softkeyboard

我想添加数字键盘,就像在Vault应用程序中那样

  

enter image description here

我不知道如何调用它,如何在谷歌中找到?

3 个答案:

答案 0 :(得分:45)

  1. 使用TableLayout创建数字键盘布局。
  2. 在每个自定义键视图上绑定View.OnClickListener以响应用户输入。
  3. 在回复中,将文本追加或删除到由EditText实现的密码字段。您可以使用append()或setText()来控制将在密码字段中填写的内容。
  4. 我写了一个自定义视图,可以在任何地方重用,这里是代码:

    KeyboardView.java

    public class KeyboardView extends FrameLayout implements View.OnClickListener {
    
        private EditText mPasswordField;
    
        public KeyboardView(Context context) {
            super(context);
            init();
        }
    
        public KeyboardView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public KeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        private void init() {
            inflate(getContext(), R.layout.keyboard, this);
            initViews();
        }
    
        private void initViews() {
            mPasswordField = $(R.id.password_field);
            $(R.id.t9_key_0).setOnClickListener(this);
            $(R.id.t9_key_1).setOnClickListener(this);
            $(R.id.t9_key_2).setOnClickListener(this);
            $(R.id.t9_key_3).setOnClickListener(this);
            $(R.id.t9_key_4).setOnClickListener(this);
            $(R.id.t9_key_5).setOnClickListener(this);
            $(R.id.t9_key_6).setOnClickListener(this);
            $(R.id.t9_key_7).setOnClickListener(this);
            $(R.id.t9_key_8).setOnClickListener(this);
            $(R.id.t9_key_9).setOnClickListener(this);
            $(R.id.t9_key_clear).setOnClickListener(this);
            $(R.id.t9_key_backspace).setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            // handle number button click
            if (v.getTag() != null && "number_button".equals(v.getTag())) {
                mPasswordField.append(((TextView) v).getText());
                return;
            }
            switch (v.getId()) {
                case R.id.t9_key_clear: { // handle clear button
                    mPasswordField.setText(null);
                }
                break;
                case R.id.t9_key_backspace: { // handle backspace button
                    // delete one character
                    Editable editable = mPasswordField.getText();
                    int charCount = editable.length();
                    if (charCount > 0) {
                        editable.delete(charCount - 1, charCount);
                    }
                }
                break;
            }
        }
    
        public String getInputText() {
            return mPasswordField.getText().toString();
        }
    
        protected <T extends View> T $(@IdRes int id) {
            return (T) super.findViewById(id);
        }
    }
    

    布局keyboard.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="8dp">
    
        <EditText
            android:id="@+id/password_field"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:background="#eeeeee"
            android:enabled="false"
            android:minHeight="48dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:singleLine="true"
            android:textAppearance="?android:attr/textAppearanceMedium"/>
    
        <TableLayout
            android:id="@+id/keyboard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:divider="@drawable/keyboard_divider"
            android:orientation="vertical"
            android:showDividers="beginning|middle|end">
    
            <TableRow style="@style/keyboard_row">
    
                <TextView
                    android:id="@+id/t9_key_1"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_one"/>
    
                <TextView
                    android:id="@+id/t9_key_2"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_two"/>
    
                <TextView
                    android:id="@+id/t9_key_3"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_three"/>
            </TableRow>
    
            <TableRow style="@style/keyboard_row">
    
                <TextView
                    android:id="@+id/t9_key_4"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_four"/>
    
                <TextView
                    android:id="@+id/t9_key_5"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_five"/>
    
                <TextView
                    android:id="@+id/t9_key_6"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_six"/>
            </TableRow>
    
            <TableRow style="@style/keyboard_row">
    
                <TextView
                    android:id="@+id/t9_key_7"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_seven"/>
    
                <TextView
                    android:id="@+id/t9_key_8"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_eight"/>
    
                <TextView
                    android:id="@+id/t9_key_9"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_nine"/>
            </TableRow>
    
            <TableRow style="@style/keyboard_row">
    
                <TextView
                    android:id="@+id/t9_key_clear"
                    style="@style/keyboard_button"
                    android:text="@string/btn_clear"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>
    
                <TextView
                    android:id="@+id/t9_key_0"
                    style="@style/keyboard_number_button"
                    android:text="@string/number_zero"/>
    
                <TextView
                    android:id="@+id/t9_key_backspace"
                    style="@style/keyboard_button"
                    android:text="@string/btn_backspace"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>
            </TableRow>
        </TableLayout>
    </LinearLayout>
    

    style.xml

    <style name="keyboard_row">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:divider">@drawable/keyboard_divider</item>
        <item name="android:gravity">center</item>
        <item name="android:showDividers">beginning|middle|end</item>
    </style>
    
    <style name="keyboard_button">
        <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:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:clickable">true</item>
        <item name="android:gravity">center</item>
        <item name="android:scaleType">centerInside</item>
        <item name="android:background">@drawable/keyboard_button_bg</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
    </style>
    
    <style name="keyboard_number_button" parent="keyboard_button">
        <item name="android:tag">number_button</item>
    </style>
    

    drawable keyboard_button_bg.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_shortAnimTime">
        <item android:state_pressed="true">
            <shape>
                <solid android:color="#dddddd"/>
            </shape>
        </item>
        <item android:state_pressed="false">
            <shape>
                <solid android:color="@android:color/transparent"/>
            </shape>
        </item>
    </selector> 
    

    drawable keyboard_divider.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#dddddd"/>
        <size
            android:width="1px"
            android:height="1px"/>
    </shape>
    

    strings.xml

    <string name="number_zero">0</string>
    <string name="number_one">1</string>
    <string name="number_two">2</string>
    <string name="number_three">3</string>
    <string name="number_four">4</string>
    <string name="number_five">5</string>
    <string name="number_six">6</string>
    <string name="number_seven">7</string>
    <string name="number_eight">8</string>
    <string name="number_nine">9</string>
    <string name="btn_clear">Clear</string>
    <string name="btn_backspace">Back</string>
    

    在布局中使用自定义KeyboardView

    <com.xxx.yyy.KeyboardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    

    旧答案:

    键盘布局代码如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/anti_theft_t9_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_grey"
        android:divider="@android:color/darker_gray"
        android:orientation="vertical"
        android:showDividers="middle|beginning|end" >
    
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/darker_gray"
        android:gravity="center"
        android:showDividers="middle" >
    
        <TextView
            android:id="@+id/anti_theft_t9_key_1"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_one"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_2"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_two"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_3"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_three"
            android:textIsSelectable="false" />
    </TableRow>
    
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/darker_gray"
        android:gravity="center"
        android:showDividers="middle" >
    
        <TextView
            android:id="@+id/anti_theft_t9_key_4"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_four"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_5"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_five"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_6"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_six"
            android:textIsSelectable="false" />
    </TableRow>
    
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/darker_gray"
        android:gravity="center"
        android:showDividers="middle" >
    
        <TextView
            android:id="@+id/anti_theft_t9_key_7"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_seven"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_8"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_eight"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_9"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_nine"
            android:textIsSelectable="false" />
    </TableRow>
    
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/darker_gray"
        android:gravity="center"
        android:showDividers="middle" >
    
        <TextView
            android:id="@+id/anti_theft_t9_key_clear"
            style="@style/anti_theft_t9_key"
            android:text="@string/anti_theft_keyboard_clear"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textIsSelectable="false" />
    
        <TextView
            android:id="@+id/anti_theft_t9_key_0"
            style="@style/anti_theft_t9_key"
            android:text="@string/number_zero"
            android:textIsSelectable="false" />
    
        <ImageView
            android:id="@+id/anti_theft_t9_key_backspace"
            style="@style/anti_theft_t9_key"
            android:contentDescription="@string/app_name_for_anti_theft"
            android:src="@drawable/anti_theft_keyboard_backspace"
            android:textIsSelectable="false" />
    </TableRow>
    
    </TableLayout>
    

    每种关键风格:

    <style name="anti_theft_t9_key">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:paddingTop">@dimen/anti_theft_t9_key_paddingTop</item>
        <item name="android:paddingBottom">@dimen/anti_theft_t9_key_paddingBottom</item>
        <item name="android:clickable">true</item>
        <item name="android:gravity">center</item>
        <item name="android:scaleType">centerInside</item>
        <item name="android:background">@drawable/anti_theft_btn_blue_bg</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
    </style>
    

    每个密钥的回复:

    private EditText mEtPassword ;
    
    private void setViews(){
        // find view references...
        // set OnClickListener to each key view...
    }
    
    private void onT9KeyClicked(int key) {
        switch (key) {
        case R.id.anti_theft_t9_key_0:
            mEtPassword.append("0");
            break;
        case R.id.anti_theft_t9_key_1:
            mEtPassword.append("1");
            break;
        case R.id.anti_theft_t9_key_2:
            mEtPassword.append("2");
            break;
        case R.id.anti_theft_t9_key_3:
            mEtPassword.append("3");
            break;
        case R.id.anti_theft_t9_key_4:
            mEtPassword.append("4");
            break;
        case R.id.anti_theft_t9_key_5:
            mEtPassword.append("5");
            break;
        case R.id.anti_theft_t9_key_6:
            mEtPassword.append("6");
            break;
        case R.id.anti_theft_t9_key_7:
            mEtPassword.append("7");
            break;
        case R.id.anti_theft_t9_key_8:
            mEtPassword.append("8");
            break;
        case R.id.anti_theft_t9_key_9:
            mEtPassword.append("9");
            break;
        case R.id.anti_theft_t9_key_backspace: {
            // delete one character
            String passwordStr = mEtPassword.getText().toString();
            if (passwordStr.length() > 0) {
                String newPasswordStr = new StringBuilder(passwordStr)
                        .deleteCharAt(passwordStr.length() - 1).toString();
                mEtPassword.setText(newPasswordStr);
            }
        }
            break;
        case R.id.anti_theft_t9_key_clear:
            // clear password field
            mEtPassword.setText(null);
            break;
        }
    }
    

答案 1 :(得分:0)

您可以将EditText的inputType设置为数字

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number" >
        <requestFocus />
    </EditText>

如果您还要设置密码字段,请使用 numberPassword

答案 2 :(得分:-1)

在github上有一个开源库可以解决您的确切问题:clamnumpad