Créateur d'applications Android en ligne en Français

Votre profil
Se déconnecter
Créateur d
Créateur d
Créateur d
Créateur d
Créateur d
alt_image_de_flag
Make me Droid

Publicité
Mise en page personnalisée
L'écran de mise en page personnalisée vous permet de positionner divers éléments (les contrôles) de la manière dont vous le souhaitez sur l'écran.

Cette mise en page n'est pas très complexe, mais certains concepts très utiles vous sont expliqués ici pour bien démarrer.
Principe d'une mise en page
Les appareils mobiles ont des tailles d'écrans (et résolutions) différentes les uns des autres. La mise en page doit donc s'adapter à cette contrainte. C'est pourquoi le concept principal de la mise en page des écrans personnalisés consiste à empiler des éléments, horizontalement et verticalement. Vous ne placez pas les éléments à un endroit exact de l'écran.

Les éléments empilés adaptent automatiquement leur taille en fonction de leur contenu, mais en tenant compte de l'espace qu'ils ont le droit d'utiliser (l'espace est limité à la largeur/hauteur de l'écran, qui ne pourra par exemple jamais contenir 20 boutons les uns à coté des autres par manque de place).

Certains contrôles utilisés lors de la mise en page sont ce qu'on appelle des contenants. C'est à dire qu'ils ont la capacité de contenir d'autres éléments. Par exemple, le contenant vertical permet d'empiler plusieurs éléments verticalement les uns à la suite des autres. Ce contenant vertical n'a pas de représentation graphique, il ne sert qu'à gérer la disposition des éléments sur l'écran. Ainsi, vous pouvez combiner plusieurs contenants, verticaux, horizontaux, avec barre de défilement, afin d'obtenir la mise en page souhaitée.
Les propriétés
Chaque contrôle possède des propriétés, c'est à dire des valeurs que vous pouvez modifier sur ce dernier: sa couleur, sa taille, son alignement, sa position....

Pour obtenir les propriétés d'un contrôle, cliquez simplement sur celui-ci. Ses propriétés apparaissent sur le coté, dans l'éditeur. La plupart des propriétés sont alors relativement explicites et chaque modification a un résultat visible sur l'écran.
Ajouter, supprimer, déplacer des éléments
Lorsque vous commencez à éditer un écran de mise en page personnalisée, ce dernier est vide. Vous devez ajouter un premier contenant. Généralement, on ajoute un contenant vertical déroulant, pour pouvoir empiler des éléments verticalement, et pour qu'apparaisse une barre de défilement verticale si le contenu déborde de la hauteur de l'écran.

Pour ajouter un nouvel élément sur l'écran, sélectionnez d'abord le contenant dans lequel sera effectué l'ajout. Dans le cas d'un écran vierge, cliquez sur la zone centrale. Les propriétés de mise en page personnalisée apparaissent alors. Cliquez sur le bouton et une liste de contrôles apparait. Sélectionnez le contrôle que vous souhaitez ajouter, et il viendra s'intégrer à votre mise en page actuelle.

Pour supprimer un élément, sélectionnez-le, puis cliquez sur le bouton dans ses propriétés.

Pour dupliquer un élément, commencez par le sélectionner sur l'écran, puis dans ses propriétés, cliquez sur le bouton pour le copier (similaire au copier-coller standard). Sélectionnez ensuite un contenant dans lequel coller l'élément, puis dans les propriétés, cliquez sur le bouton .

Pour déplacer un élément, cliquez dessus et laissez appuyé, puis déplacez-le là où vous le souhaitez. Les éléments de l'écran se réorganiseront automatiquement. Relachez le clic lorsque votre élément se trouve là où vous le souhaitez.
Exemple de mise en page
Voici à travers un exemple détaillé comment obtenir la mise en page suivante, qui s'adaptera à toutes les tailles d'écrans:
  • Créez un écran de mise en page personnalisée.
  • Cliquez au centre de l'écran pour afficher les propriétés de mise en page personnalisée.
  • Ajoutez un contenant vertical déroulant.
  • Sélectionnez le contenant vertical déroulant et ajoutez-y un contenant horizontal.
  • Sélectionnez le contenant horizontal, et dans ses propriétés, définissez sa largeur à 100%.
  • Ajoutez-y ensuite un contrôle image. Sélectionnez l'image et choisissez une image source pour ce contrôle. Activez le bouton pour forcer l'image à ne pas s'étendre sur toute la place disponible de l'écran. Définissez la largeur de l'image à 20%. Ceci permettra de toujours avoir une taille identique, quelle que soit la taille de l'image d'origine que vous choisissez depuis votre ordinateur.
  • Sélectionnez à nouveau le contenant horizontal et ajoutez-y un contenant vertical (non déroulant).
  • Sélectionnez à nouveau le contenant horizontal et ajoutez-y un bouton. Activez le bouton dans les propriétés du bouton.
  • Sélectionnez le contenant vertical puis ajoutez-y 2 textes. Modifiez les propriétés du premier texte pour lui donner une taille plus grande et une couleur blanche. Pour chaque texte, modifiez sa position à afin de l'aligner à la gauche de son contenant.

Votre première mise en page est terminée, testez le résultat sur le téléphone / simulateur!