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.
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 .
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.
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.
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.
Ajoutez les deux fichiers suivants au dossier res/layout
de votre application:
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 .
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
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.
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. InputConnection
est ce qui est utilisé pour envoyer des entrées à une autre vue comme un EditText
. 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.
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:
Voici un résumé:
Vous devriez maintenant pouvoir utiliser votre clavier partout où vous pouvez taper dans Android.
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.
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:
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 . onKeyClicked(Ssortingng text)
ou onBackspace()
. 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. 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. 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!
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.
J’ai nommé mon projet InAppKeyboard
. Appelez-vous comme vous voulez.
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
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; } }
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.
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.
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. 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:
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é