Débuter avec les dispositions XML

Ce tutoriel vous apprendra les bases de la construction de dispositions d'interface Android avec XML. Continuer à lire!

Lorsque vous commencez à développer des applications Android à l'aide d'Eclipse et du plug-in ADT, le puissant éditeur de disposition graphique d'Eclipse constitue un excellent point de départ pour concevoir visuellement votre interface utilisateur. Cependant, cette approche "ce que vous voyez est ce que vous obtenez" a ses limites, et vous aurez parfois besoin de passer à XML..

L'un des principaux avantages de la déclaration de votre interface utilisateur en XML est la possibilité de conserver l'interface utilisateur et le comportement de votre application séparés, ce qui vous permet de modifier la présentation de votre application sans perturber les fonctionnalités sous-jacentes..

Dans cet article, je vais vous montrer comment concevoir une présentation XML de base à partir de rien, notamment en définissant l'élément racine, en spécifiant les paramètres de hauteur et de largeur et en ajoutant des éléments de base de l'interface utilisateur. Enfin, j'utiliserai cette présentation de base pour illustrer certaines options XML avancées, telles que l'allocation de quantités d'espace différentes à différents objets et la prise en main des ressources de chaîne..

Remarque: Sous Android, les modèles XML doivent être stockés dans le répertoire res / layout avec l’extension .xml..

Partie 1: Principes de base de la mise en page XML

Tout d'abord, nous allons nous habituer au XML en créant une interface utilisateur Android très basique utilisant le groupe de vues LinearLayout pour contenir un élément de case à cocher. Ouvrez le fichier res / layouts / activity_main.xml et commençons.

Étape 1: Spécifiez votre élément racine

L'interface utilisateur doit contenir un seul élément racine qui fait office de conteneur visuel pour tous vos autres éléments. L'élément racine peut être un groupe de vues (i.e, LinearLayout, ListView, GridView), un élément de fusion ou une vue, mais il doit contenir l'espace de noms XML. Dans cet exemple, j'utiliserai LinearLayout, un ViewGroup qui aligne tous les enfants dans une direction spécifiée..

Un LinearLayout consiste à ouvrir et à fermer des balises XML:

 < LinearLayout… >

Dans l'onglet d'ouverture, vous devez définir l'espace de noms XML, norme recommandée par le W3C. Il est facile de définir l’espace de noms XML dans Android. Il vous suffit de saisir le code et l’URL suivants dans le cadre de la balise LinearLayout d’ouverture:

 xmlns: android = "http://schemas.android.com/apk/res/android"

Étape 2: largeur et hauteur

Ensuite, spécifiez les paramètres width et height pour votre élément racine. Dans la plupart des cas, vous utiliserez la valeur "fill_parent" pour l'élément racine, car cela lui indique de prendre tout l'écran de l'appareil..

Entrez le code XML suivant pour les paramètres hauteur / largeur:

 android: layout_width = "fill_parent" android: layout_height = "fill_parent">

Votre code XML devrait maintenant ressembler à ceci:

Étape 3: Créer une case à cocher

Il est temps d'ajouter quelque chose à cette toile vierge! Entrez la balise d'ouverture de votre case à cocher. Comme il s'agit d'un élément d'interface utilisateur, un code XML supplémentaire est requis:

1) Identifiez votre article

Eclipse utilise un ID entier pour identifier différents éléments d'interface utilisateur dans une arborescence. Cela devrait être référencé en tant que chaîne, en utilisant l'attribut 'id' et la syntaxe suivante:

android: id = "@ + id / name"

Dans cet exemple, nous ferons référence à cet élément d'interface utilisateur en tant que 'CheckBox:'

 android: id = "@ + id / CheckBox"

2) Paramètres Largeur / Hauteur: wrap_content

Encore une fois, vous devrez entrer les paramètres hauteur / largeur. Si vous définissez cet attribut sur 'wrap_content', l'élément correspondant sera suffisamment grand pour contenir le redimensionnement du contenu. Nous pouvons réutiliser la structure de syntaxe height / width de précédemment, en remplaçant 'fill_parent' par 'wrap_content:'

 android: layout_width = "wrap_content" android: layout_height = "wrap_content"

3) Définissez votre texte

Enfin, vous devrez spécifier le texte devant apparaître à côté de la case à cocher. Nous allons définir la case à cocher pour afficher «Oui»:

 android: text = "Yes" />

Votre code XML devrait maintenant ressembler à ceci:

Exécutez votre code dans l'émulateur Android pour voir votre XML en action!

Partie 2: Créez votre deuxième interface utilisateur avec XML

Dans la deuxième partie de ce didacticiel, nous examinerons un langage XML plus avancé pour affiner votre interface utilisateur. Nous allons créer une présentation composée de deux boutons, puis utiliser l'attribut 'weight' pour modifier le pourcentage d'espace de présentation alloué à chacun avant de couvrir brièvement les bases des ressources de chaîne..

Étape 1: Créez votre mise en page

La première étape consiste à créer les éléments de base de votre mise en page. Nous allons réutiliser l'élément racine LinearLayout de l'exemple précédent, ainsi que les paramètres width / height et, bien sûr, l'espace de noms XML:

Étape 2: Créez vos boutons

Pour créer le premier bouton, ajoutez la balise d'ouverture 'Button' et l'ID entier en utilisant le nom d'élément 'button1.'

Étape 3: Vérifiez l'émulateur

Pour avoir un aperçu de la situation sur un appareil Android réel, démarrez l'émulateur et jetez un coup d'œil!

Partie 3: Options XML avancées

Maintenant que vous avez votre interface utilisateur de base, nous allons utiliser un XML plus avancé pour affiner cette présentation simple..

Définir Layout_Weight

L'attribut 'android: layout_weight' vous permet de spécifier le rapport de taille entre plusieurs éléments de l'interface utilisateur. En termes simples, plus la valeur de poids est élevée, plus la part d'espace allouée est importante et plus l'élément d'interface utilisateur se développe. Si vous ne spécifiez pas de poids, Eclipse supposera que le poids de tous les éléments est égal à zéro et divise l’espace disponible de manière égale. Le ratio d'espace peut être défini avec le XML suivant:

 android: layout_weight = "?"

Dans cet exemple, nous assignerons 'button1' avec la valeur 1 et 'button2' avec la valeur 2.

Remarque, c'est purement un ajout; vous n'avez pas besoin de changer le code existant.

Le XML ci-dessus créera deux boutons de tailles différentes:

Une introduction aux ressources de chaîne

Une ressource de chaîne peut fournir des chaînes de texte pour votre application et vos fichiers de ressources. Dans la plupart des cas, il est recommandé de stocker toutes vos chaînes dans le dossier dédié 'strings.xml', accessible par:

1) Ouverture du dossier 'Res' dans l'explorateur de projets d'Eclipse.

2) Ouvrir le dossier 'Valeurs'.

3) Ouvrir le fichier 'strings.xml'.

Pour créer une nouvelle chaîne dans votre projet Android:

1) Ouvrez le fichier 'strings.xml' et sélectionnez 'Ajouter'.

2)Sélectionnez "Chaîne" dans la liste et cliquez sur "OK".

3) Sélectionnez votre chaîne nouvellement créée dans le menu 'Eléments de ressources'.

4) Dans le menu de droite "Attributs pour chaîne", entrez un nom pour la chaîne et une valeur (Remarque, l'attribut "nom" sert à référencer la valeur de la chaîne et la valeur de la chaîne correspond aux données qui seront affichées. )

Dans cet exemple, nous allons donner à la chaîne le nom "accepter" et entrer la valeur "J'accepte les termes et conditions".

5) Enregistrer cette nouvelle ressource de chaîne.

6) Ouvrez votre fichier 'activity_main.xml'. Recherchez la section de code qui définit 'button1' et modifiez l'attribut 'android: text' pour appeler cette nouvelle ressource de chaîne. L'appel d'une ressource de chaîne utilise la syntaxe suivante:

android: text = "@ string / nom-de-ressource"

Donc, dans cet exemple, le code sera:

 android: text = "@ string / agree"

Pour faciliter la visualisation de la sortie, supprimez «button2». Votre code devrait maintenant ressembler à ceci:

Vérifiez la sortie visuelle de votre code - le texte aurait dû être remplacé par la valeur de votre chaîne "d'accord".

C'est une chaîne très basique, sans aucun attribut supplémentaire de style ou de formatage. Si vous souhaitez en savoir plus sur les ressources de chaîne, les documents Android officiels constituent une excellente source d'informations supplémentaires..

Conclusion

Dans cet article, nous avons abordé l'essentiel en XML de la création d'un élément racine pour votre mise en page et codé quelques éléments de base de l'interface utilisateur avant de passer à un code XML plus avancé qui vous permet de mieux contrôler votre interface utilisateur. Vous devriez maintenant être prêt à créer vos propres interfaces utilisateur simples en utilisant XML!

Code