Androidカスタム数字キーボード

Question

Vaultアプリケーションにあるような数字キーボードを追加したい

私はそれを呼び出す方法がわかりません、そしてどのように私はグーグルで見つけることができますか？

Answer 1

1. TableLayoutを使用して、数値キーボードレイアウトを作成します。
2. 各カスタムキービューにView.OnClickListenerをバインドして、ユーザー入力に応答します。
3. 応答として、EditTextによって実装されるパスワードフィールドにテキストを追加または削除します。append（）またはsetText（）を使用して、パスワードフィールドに入力する内容を制御できます。

私はどこでも再利用するためのカスタムビューを書きます、これがコードです：

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>

ドローアブル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> 

ドローアブル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;
    }
}

Answer 2

Githubに正確な問題を解決するオープンソースライブラリがあります： clamnumpad

Answer 3

これには、EditTextのinputTypeをnumberに設定できます。

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

また、パスワードフィールドも設定する場合は、numberPasswordを使用します