web-dev-qa-db-fra.com

Clavier numérique personnalisé Android

Je veux ajouter un clavier numérique comme celui de l'application de coffre-fort 

enter image description here

Je ne sais pas comment l'appeler et comment puis-je le trouver dans google?

androidandroid-softkeyboard
16
Zaw Myo Htet
  1. Utilisez TableLayout pour créer la disposition du clavier numérique.
  2. Liez View.OnClickListener sur chaque vue de clé personnalisée pour répondre à l'entrée de l'utilisateur.
  3. Dans les réponses, ajoutez ou supprimez du texte au champ de mot de passe implémenté par EditText. Vous pouvez utiliser append () ou setText () pour contrôler le contenu du champ de mot de passe.

J'écris une vue personnalisée pour la réutiliser n'importe où, voici le 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);
    }
}

layout 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>

dessinable 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>

dessinable 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>

Utilisez la personnalisation KeyboardView dans votre mise en page:

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

Ancienne réponse:

Le code de configuration du clavier ressemble à ceci:

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

Chaque style de clé:

<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>

Réponses de chaque clé:

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;
    }
}
44
AvatarQing

Vous pouvez définir inputType de EditText sur nombre pour cela.

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

Et si vous souhaitez également définir un champ de mot de passe, utilisez numberPassword  

0
Keya