Composants de base sous Android.

Les composants graphiques correspondent aux éléments qui permettront à l'utilisateur d'interagir avec le système, lorsque nous parlons d'interface graphique, nous nous référons aux interfaces utilisateur graphiques, donc ces interfaces sont construites à travers des éléments graphiques tels que des boutons, des menus, des icônes, des champs de texte, étiquettes, etc... texte entre autres, une interface graphique combine la conception visuelle et les événements associés à cette conception, donc si nous ajoutons un bouton, nous devons programmer l'événement associé à ce bouton lorsqu'il est pressé par un utilisateur.

Annonces

Comme mentionné, concentrons-nous sur les composants graphiques utilisés à partir de fichiers XML, voyons certaines des propriétés mentionnées ci-dessus.

Propriétés de base.

Voyons quelques propriétés de base utilisées dans les composants graphiques, celles-ci peuvent être appliquées à n'importe quel composant quel que soit son type, car comme mentionné, tous les composants sont des vues, ils partagent donc les mêmes propriétés, certaines des plus utilisées sont :

Android : identifiant.

Propriété très importante car elle permet de définir un identifiant pour le champ, cette propriété est affectée à n'importe quelle vue, par exemple si elle est affectée à un champ de saisie de données alors celle-ci servira à saisir les informations de l'utilisateur, il faut donc lui donner un nom différentiateur est clair.

La manière correcte de générer un identifiant est la suivante :

android:id="@+id/miTextField"

Le symbole @+identifiant/ signifie qu'un nouvel identifiant est généré, cela rendra la classe R à partir du package gen du projet, créez une référence à cet objet afin qu'il puisse ensuite être manipulé par du code.

Dans l'exemple, l'identifiant "monChampTexte" pour le composant.

android:layout_width.

Définit la largeur associée à la vue, c'est une propriété obligatoire et sa valeur peut être définie en valeurs absolues ou en indiquant l'une des deux valeurs suivantes :

wrap_content (Il occupe l'espace en fonction de son contenu)
match_parent (Occupe tout l'espace disponible)

Exemple: Android : layout_width="match_parent" n'importe quel Android : layout_width="290dp"

androïde : hauteur_de_la_mise_en-page.
Définit la hauteur associée à la vue, c'est une propriété obligatoire et sa valeur peut être définie en valeurs absolues ou en indiquant l'une des deux valeurs suivantes :

wrap_content (Il occupe l'espace en fonction de son contenu)
match_parent (Occupe tout l'espace disponible)

Exemple: android:layout_height="wrap_content" n'importe quel android:layout_height="58dp"

Android : mise en page_marge.

Définit une marge pour le composant, permettant d'établir un espace au-dessus, en dessous et sur ses côtés, comme variantes au cas où vous voudriez donner des espaces indépendants, cela peut être fait en utilisant les propriétés marginLeft, marginRight, marginTop ou marginBottom (ou tous)

Exemple: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"

androïde : indice.

Cette propriété permet d'afficher du texte dans le champ comme aide alors que l'utilisateur n'a pas encore entré d'informations. (Préférable à la propriété text)

Exemple: android:hint="Entrez le nom"

android : type d'entrée.

Il détermine quel type d'entrée sera autorisé pour la zone de texte, cela permet une sorte de validation des données et indique également au système d'exploitation quel type de clavier (virtuel) utiliser.

Parmi les options que nous pouvons associer à cette propriété, il y en a certaines telles que :

Texte
nombre
texture
mot de passe texte
Téléphone
réunion
TextEmailAddress

Il existe de nombreuses autres options qui peuvent être utilisées en fonction des besoins.

Exemple: android:inputType="nombre" | android:inputType="textEmailAddress"

android : taille du texte.

Définit une taille pour le texte à afficher à l'écran, les unités de mesure doivent être prises en compte là où sp est utilisé pour les textes

Exemple: android:textSize="25sp"

Android : texte de style.

Définit un style pour le texte, pouvant définir le texte comme normal, gras, italique (ou les deux).

Exemple: android:textStyle="gras" | android:textStyle="italique" | android:textStyle="gras|italique"

Android : couleur du texte.

Définit une couleur pour le texte, pouvant ajouter une couleur à partir du fichier de propriétés "couleurs" ou une valeur hexadécimale

Exemple: android:textColor="@color/teal_700" | android:textColor="#9C27B0"

android:backgroundTint.

Définit une couleur de fond pour le composant, vous pouvez également obtenir la couleur à partir des propriétés "colors" ou une valeur hexadécimale

Exemple: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"

Android : texte.

Définit le contenu textuel associé à la vue. Bien que sa valeur puisse être affectée directement, il est fortement recommandé d'utiliser le fichier de chaînes disponible dans le dossier des ressources.

Exemple: android:text="Bienvenidos" | android:text="@chaîne/titre"

Cette propriété est courante dans les vues qui affichent du texte dans l'interface de l'appareil. L'écran suivant montre le fichier de ressources strings.xml où différentes valeurs pour les textes sont ajoutées

et plus tard ces valeurs sont accessibles depuis les vues

Après avoir effacé les propriétés précédentes, voyons quels sont les composants graphiques de base.

Bouton.

Ceux-ci correspondent aux boutons de base que nous connaissons, il affiche juste un bouton avec son texte interne et une marge définie.

Le bouton remplirait la fonction de base d'attendre un événement lorsqu'il est pressé.

bouton à bascule

Le type ToggleButton correspond à un type de bouton qui peut être maintenu dans 2 états possibles, enfoncé ou non enfoncé, pour cela non seulement une seule propriété de texte est définie, mais 2 selon l'état qu'il a à l'instant, en utilisant les propriétés de l'android : textOn et android:textOff.

Comme les boutons traditionnels, le ToggleButton peut être programmé pour répondre à l'événement de clic, mais vous avez probablement juste besoin de savoir dans quel état il se trouve. Cela peut être fait en consultant la méthode isChecked(), qui renvoie la valeur true dans l'événement pressé et false sinon.

navette

Ce contrôle peut simuler un commutateur très similaire au fonctionnement de ToggleButton, mais avec une apparence visuelle différente.

N'oubliez pas que selon la version d'Android que nous utilisons, l'apparence visuelle de nos composants peut changer, dans ce cas, le contrôleur Switch pour les versions Android 5.0 et supérieures ressemblerait à ceci :

ImageButton

Ce type de bouton vous permet d'y lier une image à afficher à l'utilisateur au lieu d'un texte comme d'habitude, pour cela nous pouvons prendre l'image des dossiers /res/drawable et la charger en utilisant la propriété android:src, dans ce cas, nous utiliserons une image directement à partir des ressources Android.

Affichage

Ceux-ci correspondent aux étiquettes de texte de base qui sont affichées aux utilisateurs, celles-ci dans d'autres langues sont appelées étiquettes et permettent d'afficher un texte associé à la propriété android:text, ces étiquettes ont d'autres propriétés qui vous permettent de manipuler leur taille, arrière-plan couleur, couleur et type de police, style, etc.

éditer le texte

La vue Android EditText est équivalente à ASP et C# Textbox ou JAVA JTextField, c'est un contrôle qui permet de capturer le texte tapé par l'utilisateur à l'exécution.

boîte de sélection

Le contrôle de case à cocher est utilisé pour cocher ou décocher des options dans une application. La manière de le définir dans l'interface et les propriétés disponibles pour sa manipulation par code sont analogues à celles commentées dans le contrôle ToogleButton.

Ce contrôle hérite du contrôle TextView, donc toutes les options de mise en forme déjà mentionnées pour ce contrôle sont également valables pour le checkBox.

Dans le code de l'application, vous pouvez vérifier si ce champ est sélectionné ou non grâce à la méthode isChecked() qui retourne la valeur de VRAI si vous avez été sélectionné ou FAUX sinon, vous pouvez également utiliser la méthode setChecked(value) pour définir un état spécifique pour le contrôle, où value VRAI serait pour sélectionné et FAUX par non sélectionné.

L'événement qui est normalement programmé pour ce champ et qui est exécuté à chaque changement d'état (sélectionné / non sélectionné) est onCheckedChanged.

bouton radio

Comme le contrôle CheckBox, le RadioButton sert à cocher ou décocher une option donnée, la différence réside dans le type de sélection que vous souhaitez effectuer. Les RadioButtons sont normalement utilisés dans des groupes pour définir un ensemble d'options parmi lesquelles vous ne pouvez en sélectionner qu'une, c'est-à-dire que chaque option est mutuellement exclusive, donc lors de la sélection d'une option, celle qui a été précédemment sélectionnée sera automatiquement décochée. Ces groupes sont définis par l'élément RadioGroup, qui à son tour contiendra tous les éléments RadioButton qui représentent les options.

RadioGroups peut définir la propriété android:orientation sur "Vertical" ou "Horizontal" pour déterminer comment les RadioButtons qu'elle contient seront ordonnés.

Le RadioButton, à son tour, en plus de la largeur et de la hauteur, doit définir la propriété android:text pour associer le texte de l'option représentée et android:id pour associer un code au contrôle afin qu'il puisse être manipulé à partir de la logique de l'application.

Pour manipuler le contrôle depuis la logique de l'application, différentes méthodes peuvent être utilisées, parmi lesquelles on trouve check(j'irais) qui est utilisé pour définir le radiobutton identifié avec l'id passé en paramètre comme sélectionné, la méthode clearCheck() est utilisée pour décocher tous les radiobuttons du groupe et la méthode getCheckedRadioButtonId() est utilisée pour obtenir l'id du bouton radio qui se trouve dans le groupe sélectionné ou la valeur -1 si aucun élément n'est sélectionné.

L'événement le plus important de ce contrôle est également le onCheckedChanged, qui se déclenche lorsqu'un élément du groupe est sélectionné (rappelons que la sélection d'un élément du groupe indique la désélection d'un autre).

Et voilà, ce sont quelques-uns des composants graphiques de base que nous utiliserons tout au long du cours, dans les prochains articles, nous continuerons avec d'autres composants ou mises en page.

Cela peut aussi vous intéresser.

Souhaitez-vous ajouter ou commenter cette entrée ? n'hésitez pas à faire….Et si ça vous a plu... je vous invite à partager y Abonnez-vous en cliquant sur le bouton "Rejoindre ce site" pour entendre plus de messages comme celui-ci 😉