Comment faire un clavier Android personnalisé?

Je veux faire un clavier personnalisé. Je ne sais pas comment le faire en XML et en activité. Cette image est mon modèle de clavier. Il n’a besoin que de chiffres.

entrer la description de l'image ici

Tout d’abord, vous aurez besoin d’un fichier keyboard.xml qui sera placé dans le dossier res/xml (si le dossier n’existe pas, créé).

                      

** Notez que vous devrez créer le dessin backspace et le placer dans le dossier res / drawable-ldpi de très petite taille (18×18 pixels)

Ensuite, dans le fichier XML que vous souhaitez utiliser (où se trouve votre TextView), vous devez append le code suivant:

  .....  ......  

** Notez que le fichier xml dans lequel vous alignParentBottom="true" android.inputmethodservice.KeyboardView doit être RelativeLayout pour pouvoir définir l’ alignParentBottom="true" (généralement, les claviers sont présentés en bas de l’écran)

Ensuite, vous devez append le code suivant dans la fonction onCreate de l’ Activity qui gère le TextView vous souhaitez attacher le clavier.

  // Create the Keyboard mKeyboard= new Keyboard(this,R.xml.keyboard); // Lookup the KeyboardView mKeyboardView= (KeyboardView)findViewById(R.id.keyboardview); // Attach the keyboard to the view mKeyboardView.setKeyboard( mKeyboard ); // Do not show the preview balloons //mKeyboardView.setPreviewEnabled(false); // Install the key handler mKeyboardView.setOnKeyboardActionListener(mOnKeyboardActionListener); 

** Notez que mKeyboard et mKeyboardView sont des variables de classe privées que vous devez créer.

Ensuite, vous avez besoin de la fonction suivante pour ouvrir le clavier (vous devez l’associer à TextView via la propriété xml onClick )

  public void openKeyboard(View v) { mKeyboardView.setVisibility(View.VISIBLE); mKeyboardView.setEnabled(true); if( v!=null)((InputMethodManager)getSystemService(Activity.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(v.getWindowToken(), 0); } 

Et enfin, vous avez besoin du OnKeyboardActionListener qui gérera vos événements

 private OnKeyboardActionListener mOnKeyboardActionListener = new OnKeyboardActionListener() { @Override public void onKey(int primaryCode, int[] keyCodes) { //Here check the primaryCode to see which key is pressed //based on the android:codes property if(primaryCode==1) { Log.i("Key","You just pressed 1 button"); } } @Override public void onPress(int arg0) { } @Override public void onRelease(int primaryCode) { } @Override public void onText(CharSequence text) { } @Override public void swipeDown() { } @Override public void swipeLeft() { } @Override public void swipeRight() { } @Override public void swipeUp() { } }; 

J’espère que cela pourra aider!!!

La plupart du code trouvé ici

Utilisez KeyboardView :

 KeyboardView kbd = new KeyboardView(context); kbd.setKeyboard(new Keyboard(this, R.xml.custom)); kbd.setOnKeyboardActionListener(new OnKeyboardActionListener() { .... } 

maintenant vous avez kbd qui est une vue normale.

La bonne chose à ce sujet est que R.xml.custom fait référence à /res/xml/custom.xml , qui définit dans xml la disposition du clavier. Pour plus d’informations sur ce fichier, regardez ici: Keyboard , Keyboard.Row , Keyboard.Key .

Clavier système

Cette réponse indique comment créer un clavier système personnalisé pouvant être utilisé dans toute application installée par un utilisateur sur son téléphone. Si vous souhaitez créer un clavier qui ne sera utilisé que dans votre propre application, consultez mon autre réponse .

L’exemple ci-dessous ressemblera à ceci. Vous pouvez le modifier pour n’importe quelle disposition de clavier.

entrer la description de l'image ici

Les étapes suivantes montrent comment créer un clavier système personnalisé qui fonctionne. Autant que possible, j’ai essayé de supprimer tout code inutile. S’il y a d’autres fonctionnalités dont vous avez besoin, j’ai fourni des liens vers plus d’aide à la fin.

1. Démarrer un nouveau projet Android

J’ai nommé mon projet “Clavier personnalisé”. Appelez ça comme vous voulez. Il n’y a rien d’autre de spécial ici. Je vais juste laisser la MainActivity et “Hello World!” mise en page telle quelle.

2. Ajoutez les fichiers de disposition

Ajoutez les deux fichiers suivants au dossier res/layout de votre application:

  • keyboard_view.xml
  • key_preview.xml

keyboard_view.xml

Cette vue est comme un conteneur qui contiendra notre clavier. Dans cet exemple, il n’y a qu’un seul clavier, mais vous pouvez append d’autres claviers et les échanger dans ce KeyboardView .

    

key_preview.xml

L’aperçu des touches est une mise en page qui apparaît lorsque vous appuyez sur une touche du clavier. Il montre simplement quelle touche vous appuyez (si vos gros doigts la recouvrent). Ce n’est pas un popup à choix multiple. Pour cela, vous devriez consulter la vue Candidats .

    

3. Ajouter des fichiers XML compatibles

Créez un dossier xml dans votre dossier res . (Cliquez avec le bouton droit sur res et choisissez Nouveau> Répertoire .)

Ajoutez ensuite les deux fichiers xml suivants. (Cliquez avec le bouton droit sur le dossier xml et choisissez Nouveau> Fichier de ressources XML ).

  • nombre_pad.xml
  • method.xml

nombre_pad.xml

C’est là que ça commence à devenir plus intéressant. Ce Keyboard définit la disposition des touches .

                      

Voici quelques points à noter:

  • keyWidth : C’est la largeur par défaut de chaque clé. Le 20%p signifie que chaque clé doit occuper 20% de la largeur du texte. Il peut être remplacé par des touches individuelles, cependant, comme vous pouvez le voir avec les touches Supprimer et Entrée de la troisième ligne.
  • keyHeight : Il est codé en dur ici, mais vous pouvez utiliser quelque chose comme @dimen/key_height pour le configurer dynamicment pour différentes tailles d’écran.
  • Gap : L’écart horizontal et vertical indique combien d’espace laisser entre les clés. Même si vous le définissez sur 0px il rest un petit écart.
  • codes : il peut s’agir d’une valeur de code Unicode ou personnalisée qui détermine ce qui se passe ou ce qui est entré lorsque la touche est pressée. Voir keyOutputText si vous souhaitez entrer une chaîne Unicode plus longue.
  • keyLabel : C’est le texte qui est affiché sur la clé.
  • keyEdgeFlags : Ceci indique à quel bord la clé doit être alignée.
  • isRepeatable : Si vous maintenez la touche enfoncée, il continuera de répéter l’entrée.

method.xml

Ce fichier indique au système les sous-types de méthodes d’entrée disponibles. Je ne fais qu’inclure une version minimale ici.

     

4. Ajoutez le code Java pour gérer les entrées de clé

Créez un nouveau fichier Java. Appelons-le MyInputMethodService . Ce fichier lie tout ensemble. Il gère les entrées reçues du clavier et les envoie à la vue qui les reçoit (un EditText , par exemple).

 public class MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener { @Override public View onCreateInputView() { // get the KeyboardView and add our Keyboard layout to it KeyboardView keyboardView = (KeyboardView) getLayoutInflater().inflate(R.layout.keyboard_view, null); Keyboard keyboard = new Keyboard(this, R.xml.number_pad); keyboardView.setKeyboard(keyboard); keyboardView.setOnKeyboardActionListener(this); return keyboardView; } @Override public void onKey(int primaryCode, int[] keyCodes) { InputConnection ic = getCurrentInputConnection(); if (ic == null) return; switch (primaryCode) { case Keyboard.KEYCODE_DELETE: CharSequence selectedText = ic.getSelectedText(0); if (TextUtils.isEmpty(selectedText)) { // no selection, so delete previous character ic.deleteSurroundingText(1, 0); } else { // delete the selection ic.commitText("", 1); } ic.deleteSurroundingText(1, 0); break; default: char code = (char) primaryCode; ic.commitText(Ssortingng.valueOf(code), 1); } } @Override public void onPress(int primaryCode) { } @Override public void onRelease(int primaryCode) { } @Override public void onText(CharSequence text) { } @Override public void swipeLeft() { } @Override public void swipeRight() { } @Override public void swipeDown() { } @Override public void swipeUp() { } } 

Remarques:

  • OnKeyboardActionListener écoute les entrées au clavier. Il faut aussi toutes ces méthodes vides dans cet exemple.
  • La InputConnection est ce qui est utilisé pour envoyer des entrées à une autre vue comme un EditText .

5. Mettre à jour le manifeste

Je mets ce dernier plutôt que le premier car il fait référence aux fichiers que nous avons déjà ajoutés ci-dessus. Pour enregistrer votre clavier personnalisé en tant que clavier système, vous devez append une section de service à votre fichier AndroidManifest.xml . Mettez-le dans la section application après l’ activity .

    ...          

C’est tout! Vous devriez pouvoir lancer votre application maintenant. Cependant, vous ne verrez pas grand-chose tant que vous n’activez pas votre clavier dans les parameters.

6. Activer le clavier dans Paramètres

Chaque utilisateur souhaitant utiliser votre clavier devra l’activer dans les parameters Android. Pour des instructions détaillées sur la façon de procéder, consultez le lien suivant:

  • Comment définir le clavier par défaut sur votre téléphone Android

Voici un résumé:

  • Accédez à Paramètres Android> Langues et saisie> Clavier actuel> Choisir les claviers.
  • Vous devriez voir votre clavier personnalisé dans la liste. Activez-le
  • Revenez en arrière et choisissez le clavier actuel à nouveau. Vous devriez voir votre clavier personnalisé dans la liste. Choisis le.

Vous devriez maintenant pouvoir utiliser votre clavier partout où vous pouvez taper dans Android.

Une étude plus approfondie

Le clavier ci-dessus est utilisable, mais pour créer un clavier que d’autres personnes voudront utiliser, vous devrez probablement append plus de fonctionnalités. Étudiez les liens ci-dessous pour apprendre comment.

  • Création d’une méthode de saisie (documentation Android)
  • SoftKeyboard (code source d’Android pour un clavier personnalisé de démonstration)
  • Construire un clavier Android personnalisé (tutoriel) ( code source )
  • Créer un clavier personnalisé sur Android (tutoriel tutsplus)
  • Comment créer un clavier personnalisé pour Android (vidéo YouTube: il est silencieux, mais c’est d’abord la façon dont j’ai appris à le faire).

Aller de l’avant

Vous n’aimez pas l’apparence et le comportement de KeyboardView standard? Je ne le fais certainement pas. On dirait qu’il n’a pas été mis à jour depuis Android 2.0. Que diriez-vous de tous ces claviers personnalisés dans le Play Store? Ils ne ressemblent en rien au clavier laid ci-dessus.

La bonne nouvelle est que vous pouvez personnaliser complètement l’apparence et le comportement de votre propre clavier. Vous devrez faire les choses suivantes:

  1. Créez votre propre affichage de clavier personnalisé qui sous-classe ViewGroup . Vous pouvez le remplir avec Button s ou même créer vos propres vues de clé personnalisées sous View . Si vous utilisez des vues popup, notez ceci .
  2. Ajoutez une interface d’ écouteur d’événement personnalisée sur votre clavier. Appelez ses méthodes pour des choses comme onKeyClicked(Ssortingng text) ou onBackspace() .
  3. Vous n’avez pas besoin d’append les éléments keyboard_view.xml , key_preview.xml ou number_pad.xml décrits dans les instructions ci-dessus, car ils ne concernent que le KeyboardView standard. Vous allez gérer tous ces aspects de l’interface utilisateur dans votre vue personnalisée.
  4. Dans votre classe MyInputMethodService , implémentez l’écouteur de clavier personnalisé que vous avez défini dans votre classe de clavier. Ceci est à la place de KeyboardView.OnKeyboardActionListener , qui n’est plus nécessaire.
  5. Dans la MyInputMethodService onCreateInputView() votre classe onCreateInputView() , créez et retournez une instance de votre clavier personnalisé. N’oubliez pas de définir le programme d’écoute personnalisé du clavier.

Voici un exemple de projet pour un clavier logiciel.

https://developer.android.com/guide/topics/text/creating-input-method.html

Votre devrait être dans les mêmes lignes avec une disposition différente.

Edit: Si vous avez besoin du clavier uniquement dans votre application, c’est très simple! Créez une disposition linéaire avec une orientation verticale et créez 3 dispositions linéaires à l’intérieur avec une orientation horizontale. Placez ensuite les boutons de chaque ligne dans chacune de ces dispositions linéaires horizontales et affectez la propriété de pondération aux boutons. Utilisez android: layout_weight = 1 pour tous, afin qu’ils soient équidistants.

Cela va résoudre. Si vous n’avez pas compris ce qui était attendu, veuillez poster le code ici, et nous sums là pour vous aider!

Clavier In-App

Cette réponse indique comment créer un clavier personnalisé à utiliser exclusivement dans votre application. Si vous souhaitez créer un clavier système pouvant être utilisé dans n’importe quelle application, consultez mon autre réponse .

L’exemple ressemblera à ceci. Vous pouvez le modifier pour n’importe quelle disposition de clavier.

entrer la description de l'image ici

1. Démarrer un nouveau projet Android

J’ai nommé mon projet InAppKeyboard . Appelez-vous comme vous voulez.

2. Ajoutez les fichiers de disposition

Clavier

Ajoutez un fichier de disposition au dossier res/layout . J’ai appelé le keyboard mine. Le clavier sera une vue composée personnalisée que nous gonflerons à partir de ce fichier de présentation XML. Vous pouvez utiliser n’importe quelle mise en page pour organiser les clés, mais j’utilise un LinearLayout . Notez les balises de merge .

res / layout / keyboard.xml

                       

Disposition de l’activité

À des fins de démonstration, notre activité comporte un seul EditText et le clavier est en bas. J’ai appelé ma vue clavier personnalisée MyKeyboard . (Nous appendons ce code bientôt, donc ignorez l’erreur pour le moment.) L’avantage de mettre tout notre code clavier dans une seule vue est qu’il facilite la réutilisation dans une autre activité ou application.

res / layout / activity_main.xml

      

3. Ajoutez le fichier Java clavier

Ajoutez un nouveau fichier Java. J’ai appelé le mien MyKeyboard .

La chose la plus importante à noter ici est qu’il n’ya pas de lien vers une EditText ou un EditText . Cela facilite le twigment sur n’importe quelle application ou activité qui en a besoin. Cette vue clavier personnalisée utilise également un InputConnection , qui reproduit la manière dont un clavier système communique avec un EditText . C’est comme ça que nous évitons les liens durs.

MyKeyboard est une vue composée qui gonfle la disposition de la vue que nous avons définie ci-dessus.

MyKeyboard.java

 public class MyKeyboard extends LinearLayout implements View.OnClickListener { // constructors public MyKeyboard(Context context) { this(context, null, 0); } public MyKeyboard(Context context, AtsortingbuteSet attrs) { this(context, attrs, 0); } public MyKeyboard(Context context, AtsortingbuteSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } // keyboard keys (buttons) private Button mButton1; private Button mButton2; private Button mButton3; private Button mButton4; private Button mButton5; private Button mButton6; private Button mButton7; private Button mButton8; private Button mButton9; private Button mButton0; private Button mButtonDelete; private Button mButtonEnter; // This will map the button resource id to the Ssortingng value that we want to // input when that button is clicked. SparseArray keyValues = new SparseArray<>(); // Our communication link to the EditText InputConnection inputConnection; private void init(Context context, AttributeSet attrs) { // initialize buttons LayoutInflater.from(context).inflate(R.layout.keyboard, this, true); mButton1 = (Button) findViewById(R.id.button_1); mButton2 = (Button) findViewById(R.id.button_2); mButton3 = (Button) findViewById(R.id.button_3); mButton4 = (Button) findViewById(R.id.button_4); mButton5 = (Button) findViewById(R.id.button_5); mButton6 = (Button) findViewById(R.id.button_6); mButton7 = (Button) findViewById(R.id.button_7); mButton8 = (Button) findViewById(R.id.button_8); mButton9 = (Button) findViewById(R.id.button_9); mButton0 = (Button) findViewById(R.id.button_0); mButtonDelete = (Button) findViewById(R.id.button_delete); mButtonEnter = (Button) findViewById(R.id.button_enter); // set button click listeners mButton1.setOnClickListener(this); mButton2.setOnClickListener(this); mButton3.setOnClickListener(this); mButton4.setOnClickListener(this); mButton5.setOnClickListener(this); mButton6.setOnClickListener(this); mButton7.setOnClickListener(this); mButton8.setOnClickListener(this); mButton9.setOnClickListener(this); mButton0.setOnClickListener(this); mButtonDelete.setOnClickListener(this); mButtonEnter.setOnClickListener(this); // map buttons IDs to input strings keyValues.put(R.id.button_1, "1"); keyValues.put(R.id.button_2, "2"); keyValues.put(R.id.button_3, "3"); keyValues.put(R.id.button_4, "4"); keyValues.put(R.id.button_5, "5"); keyValues.put(R.id.button_6, "6"); keyValues.put(R.id.button_7, "7"); keyValues.put(R.id.button_8, "8"); keyValues.put(R.id.button_9, "9"); keyValues.put(R.id.button_0, "0"); keyValues.put(R.id.button_enter, "\n"); } @Override public void onClick(View v) { // do nothing if the InputConnection has not been set yet if (inputConnection == null) return; // Delete text or input key value // All communication goes through the InputConnection if (v.getId() == R.id.button_delete) { CharSequence selectedText = inputConnection.getSelectedText(0); if (TextUtils.isEmpty(selectedText)) { // no selection, so delete previous character inputConnection.deleteSurroundingText(1, 0); } else { // delete the selection inputConnection.commitText("", 1); } } else { String value = keyValues.get(v.getId()); inputConnection.commitText(value, 1); } } // The activity (or some parent or controller) must give us // a reference to the current EditText's InputConnection public void setInputConnection(InputConnection ic) { this.inputConnection = ic; } } 

4. Pointez le clavier sur EditText

Pour les claviers système, Android utilise un InputMethodManager pour pointer le clavier vers le EditText ciblé. Dans cet exemple, l’activité prendra sa place en fournissant le lien depuis le EditText vers notre clavier personnalisé.

Comme nous n’utilisons pas le clavier système, nous devons le désactiver pour l’empêcher de surgir lorsque nous touchons le EditText . Deuxièmement, nous devons obtenir la InputConnection depuis EditText et la donner à notre clavier.

MainActivity.java

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText editText = (EditText) findViewById(R.id.editText); MyKeyboard keyboard = (MyKeyboard) findViewById(R.id.keyboard); // prevent system keyboard from appearing when EditText is tapped editText.setRawInputType(InputType.TYPE_CLASS_TEXT); editText.setTextIsSelectable(true); // pass the InputConnection from the EditText to the keyboard InputConnection ic = editText.onCreateInputConnection(new EditorInfo()); keyboard.setInputConnection(ic); } } 

Si votre activité a plusieurs EditTexts, vous devrez alors écrire du code pour transmettre le InputConnection d’EditText au clavier. (Vous pouvez le faire en ajoutant un OnFocusChangeListener et OnClickListener aux EditTexts. Consultez cet article pour une discussion à ce sujet.) Vous pouvez également masquer ou afficher votre clavier aux moments appropriés.

Fini

C’est tout. Vous devriez pouvoir lancer l’application d’exemple maintenant et saisir ou supprimer du texte comme vous le souhaitez. Votre prochaine étape consiste à tout modifier pour répondre à vos propres besoins. Par exemple, dans certains de mes claviers, j’ai utilisé TextViews plutôt que des boutons car il est plus facile de les personnaliser.

Remarques

  • Dans le fichier de mise en page xml, vous pouvez également utiliser un TextView plutôt qu’un Button si vous souhaitez améliorer l’apparence des touches. Il suffit ensuite de faire de l’arrière-plan un dessin qui change l’état d’appui lorsque vous appuyez dessus.
  • Claviers personnalisés avancés: pour plus de souplesse dans l’apparence du clavier et le changement de clavier, je propose désormais des vues de touches personnalisées qui sous- ViewGroup View et les claviers personnalisés de la sous-classe ViewGroup . Le clavier dispose toutes les clés par programmation. Les touches utilisent une interface pour communiquer avec le clavier (similaire à la manière dont les fragments communiquent avec une activité). Cela n’est pas nécessaire si vous n’avez besoin que d’une seule disposition de clavier, car la présentation xml fonctionne correctement pour cela. Mais si vous voulez voir un exemple de ce sur quoi je travaille, consultez toutes les classes Key* et Keyboard* ici . Notez que j’utilise également une vue de conteneur dont la fonction est de permuter les claviers.

L’un des exemples les mieux documentés que j’ai trouvé.

http://www.fampennings.nl/maarten/android/09keyboard/index.htm

KeyboardView fichier XML associé à KeyboardView et le code source sont fournis.

Eu le même problème. J’ai d’abord utilisé la disposition des tables, mais la disposition a continué à changer après un appui sur un bouton. J’ai trouvé cette page très utile cependant. http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout/

Je suis tombé sur ce post récemment lorsque j’essayais de décider quelle méthode utiliser pour créer mon propre clavier personnalisé. J’ai trouvé que l’API du système Android était très limitée, alors j’ai décidé de créer mon propre clavier intégré. En utilisant la réponse de Suragch comme base de mes recherches, j’ai continué à concevoir mon propre composant clavier . Il est publié sur GitHub avec une licence MIT. J’espère que cela sauvera beaucoup de temps et de maux de tête à quelqu’un d’autre.

L’architecture est assez flexible. Il existe une vue principale (CustomKeyboardView) que vous pouvez injecter avec la disposition de clavier et le contrôleur de votre choix.

Vous devez simplement déclarer le CustomKeyboardView dans votre activité xml (vous pouvez également le faire par programme):

   

Ensuite, enregistrez votre texte EditText et indiquez le type de clavier à utiliser:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val numberField: EditText = findViewById(R.id.testNumberField) val numberDecimalField: EditText = findViewById(R.id.testNumberDecimalField) val qwertyField: EditText = findViewById(R.id.testQwertyField) keyboard = findViewById(R.id.customKeyboardView) keyboard.registerEditText(CustomKeyboardView.KeyboardType.NUMBER, numberField) keyboard.registerEditText(CustomKeyboardView.KeyboardType.NUMBER_DECIMAL, numberDecimalField) keyboard.registerEditText(CustomKeyboardView.KeyboardType.QWERTY, qwertyField) } 

Le CustomKeyboardView gère le rest!

J’ai le bal avec un clavier Number, NumberDecimal et QWERTY. N’hésitez pas à le télécharger et à créer vos propres mises en page et contrôleurs. Cela ressemble à ceci:

paysage de gif clavier Android personnalisé

entrer la description de l'image ici

Même si ce n’est pas l’architecture que vous décidez d’utiliser, j’espère que cela vous aidera à voir le code source d’un clavier in-app qui fonctionne.

Encore une fois, voici le lien vers le projet: Clavier In-App personnalisé