Android 自定义数字键盘 [英] Android custom numeric keyboard

查看:33
本文介绍了Android 自定义数字键盘的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I want to add numeric keyboard like the one in vault application

我不知道如何称呼它以及如何在谷歌中找到?

I don't know how to call it and how can I find in google ?

推荐答案

  1. 使用 TableLayout 创建数字键盘布局.
  2. 在每个自定义键视图上绑定 View.OnClickListener 以响应用户输入.
  3. 在响应中,向由 EditText 实现的密码字段附加或删除文本.您可以使用 append() 或 setText() 来控制将在密码字段中填充的内容.

我编写了一个可在任何地方重用的自定义视图,代码如下:

I write a custom view for reusing in anywhere, here is the code:

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 :

Use the custom KeyboardView in your layout :

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

<小时>

旧答案:

键盘布局代码如下所示:


Old answer:

The keyboard layout code looks like this:

<?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;
    }
}

这篇关于Android 自定义数字键盘的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆