Conception d'interface utilisateur Android dispositions relatives

Comprendre les schémas est important pour bien concevoir une application Android. Dans ce didacticiel, vous apprendrez tout sur les dispositions relatives, qui organisent les commandes de l'interface utilisateur, ou widgets, à l'écran les unes par rapport aux autres, ou à leur disposition parente. Lorsqu'elles sont utilisées correctement, les dispositions relatives peuvent être la disposition puissante et flexible sur laquelle de nombreuses interfaces utilisateur d'applications Android intéressantes peuvent être conçues..

Qu'est-ce qu'une disposition relative?

Après les dispositions linéaires, qui affichent les contrôles sur une seule ligne ou une seule colonne, les dispositions relatives sont l’un des types de dispositions les plus couramment utilisés par les concepteurs d’interface utilisateur Android. Comme pour les autres dispositions, les dispositions relatives peuvent être définies dans les ressources de présentation XML ou par programme dans le code Java de l'application. La disposition relative fonctionne comme son nom l’indique: elle organise les contrôles les uns par rapport aux autres, ou au contrôle parent lui-même..

Qu'est-ce que ça veut dire? Cela signifie que les contrôles enfants, tels que les contrôles ImageView, TextView et Button, peuvent être placés au-dessus, au-dessous, à gauche ou à droite les uns des autres. Les contrôles enfants peuvent également être placés par rapport au parent (le conteneur de mise en page relatif), notamment en plaçant les contrôles alignés sur les bords supérieur, inférieur, gauche ou droit de la présentation..

Le placement de contrôle enfant de disposition relative est défini à l'aide de règles. Ces règles définissent la manière dont les contrôles de la présentation relative sont affichés. Pour obtenir la liste complète des règles pour les dispositions relatives, voir la documentation du SDK Android pour la classe RelativeLayout. Les attributs XML associés à utiliser dans les ressources XML sont également définis dans la documentation..

REMARQUE: les règles exigent que chaque attribut enfant ait son attribut id correctement défini.

Une mise en page relative simple

Les schémas relatifs sont mieux expliqués à l'aide d'un exemple. Supposons que nous voulions concevoir un écran avec un contrôle EditText et un contrôle Button. Nous voulons que le bouton s'affiche à droite du contrôle EditText. Par conséquent, nous pourrions définir une mise en page relative avec deux contrôles enfants: le EditText et le Button. Le contrôle EditText peut avoir une règle qui dit: alignez ce contrôle sur le côté gauche du contrôle parent (la présentation) et sur la gauche d'un deuxième contrôle, un contrôle Button. Pendant ce temps, le contrôle Button peut avoir une règle qui dit: alignez ce contrôle sur le côté droit du contrôle parent (la présentation).

Les figures suivantes montrent une telle disposition relative, affichée en mode portrait ou paysage. La disposition relative a deux contrôles enfants: un contrôle EditText et un contrôle Button..

Définition d'une ressource de mise en page XML avec une mise en page relative

Le moyen le plus pratique et le plus facile à gérer de concevoir des interfaces utilisateur pour les applications consiste à créer des ressources de présentation XML. Cette méthode simplifie grandement le processus de conception de l'interface utilisateur, en transférant une grande partie de la création et de la présentation statiques des contrôles de l'interface utilisateur et de la définition des attributs de contrôle vers XML, au lieu de jalonner le code..

Les ressources de présentation XML doivent être stockées dans la hiérarchie des répertoires de projet / res / layout. Jetons un coup d'œil à la mise en page relative introduite dans la section précédente. Ce fichier de ressources de présentation, nommé judicieusement /res/layout/relative.xml, est défini dans XML comme suit:

Rappelez-vous que, dans l'activité, une seule ligne de code dans la méthode onCreate () est nécessaire pour charger et afficher une ressource de présentation à l'écran. Si la ressource de présentation était stockée dans le fichier /res/layout/relative.xml, cette ligne de code serait:

 setContentView (R.layout.relative); 

La largeur et la hauteur de cette disposition relative sont définies pour remplir l'écran et trois règles sont configurées sur ses contrôles enfants:

• EditText01: Aligner sur le côté gauche de la présentation
• EditText01: Affichage à gauche de Button01
• Button01: Aligner sur le côté droit de la présentation

Définir une mise en page relative par programme

Vous pouvez également créer et configurer par programmation des dispositions relatives. Ceci est fait en utilisant la classe RelativeLayout (android.widget.Relative). Vous trouverez les paramètres spécifiques aux enfants dans la classe RelativeLayout.LayoutParams. En outre, les paramètres de présentation types (android.view.ViewGroup.LayoutParams), tels que layout_height et layout_width, ainsi que les paramètres de marge (ViewGroup.MarginLayoutParams) s'appliquent toujours aux objets RelativeLayout..
Au lieu de charger une ressource de présentation directement à l'aide de la méthode setContentView () comme indiqué précédemment, vous devez créer le contenu de l'écran en Java, puis fournir un objet de présentation parent qui contient tout le contenu du contrôle à afficher sous forme de vues enfant dans setContentView (). méthode. Dans ce cas, votre mise en page parent serait la mise en page relative.
Par exemple, le code suivant montre comment faire en sorte qu'une activité instancie un RelativeLayout par programme et y place un contrôle TextView et un contrôle Button dans sa méthode onCreate (), à peu près comme celle présentée dans la section précédente:

public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.relative); EditText ed = new EditText (this); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); params.addRule (RelativeLayout.ALIGN_PARENT_LEFT); // utilise le même identifiant que celui défini lors de l'ajout du bouton params.addRule (RelativeLayout.LEFT_OF, 1001); ed.setLayoutParams (params); ed.setHint ("Entrez du texte…"); Button but1 = new Button (ceci); RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params2.addRule (RelativeLayout.ALIGN_PARENT_RIGHT); but1.setLayoutParams (params2); but1.setText ("Appuyez ici!"); // donne au bouton un identifiant que nous connaissons but1.setId (1001); RelativeLayout layout1 = new RelativeLayout (this); layout1.setLayoutParams (nouveaux LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); layout1.addView (ed); layout1.addView (but1); setContentView (layout1);  

Regardons de plus près la liste de code Java ci-dessus. Nous créons d'abord un contrôle EditText comme d'habitude. Nous lui donnons des paramètres RelativeLayout, puis définissons ses règles. Dans ce cas, nous créons deux règles pour le contrôle EditText.

Ensuite, nous créons un contrôle Button et définissons sa règle (alignement sur le bord droit de la présentation parent). Enfin, nous créons un objet RelativeLayout, définissons ses paramètres, ajoutons les deux contrôles enfants à l'aide de la méthode addView () et chargeons la présentation relative à afficher à l'aide de la méthode setContentView ()..

Comme vous pouvez le constater, la taille du code peut augmenter rapidement au fur et à mesure que de nouveaux contrôles sont ajoutés à l'écran. Pour l'organisation et la facilité de maintenance, il est préférable de définir et d'utiliser des mises en page par programmation plutôt que dans le cas contraire..

Exploration des propriétés et des attributs de mise en page relatifs importants

Parlons maintenant des attributs qui permettent de configurer une disposition relative et ses contrôles enfants. Certains attributs spécifiques s’appliquent aux dispositions relatives, à savoir les règles enfants, notamment:

• Règles de centrage des contrôles enfants dans la présentation parente, notamment: centre horizontalement, centre verticalement ou les deux.
• Règles pour l'alignement du contrôle enfant dans la présentation parent, y compris: alignement avec le bord supérieur, inférieur, gauche ou droit d'un autre contrôle.
• Règles d'alignement des contrôles enfants par rapport aux autres contrôles enfants, notamment: alignement avec le bord supérieur, inférieur, gauche ou droit.
• Règles de placement des contrôles enfants par rapport aux autres contrôles enfants, notamment: placement à gauche ou à droite d'un contrôle spécifique, ou au-dessus ou au-dessous d'un autre contrôle.

En outre, les attributs généraux du style ViewGroup s’appliquent aux dispositions relatives. Ceux-ci inclus:

• Paramètres de présentation génériques tels que layout_height (requis) et layout_width (requis) (class: ViewGroup.LayoutParams)
• Paramètres de disposition de la marge tels que margin_top, margin_left, margin_right et margin_bottom (classe: ViewGroup. MarginLayoutParams)
• Paramètres de disposition tels que layout_height et layout_width (class: ViewGroup.LayoutParams)

Mettons maintenant certaines de ces règles en pratique!

Travailler avec des règles de mise en page

Regardons un design d'écran plus complexe. Pour les besoins de cet exercice, nous commencerons par examiner la conception d'écran finale, puis nous procéderons en arrière, en discutant des caractéristiques de mise en page et des règles utilisées pour atteindre ce résultat final..

Disons que nous voulons concevoir un écran qui ressemble à ceci:

Pour concevoir cet écran en utilisant une disposition relative, continuez avec les étapes suivantes.

Étape 1: Définissez une disposition relative dans votre fichier de ressources XML.

Commencez par définir une mise en page relative dans votre fichier de ressources XML. Etant donné que vous souhaitez que cette présentation contrôle le contenu de tout l'écran, définissez ses attributs height et width sur fill_parent. Votre fichier de ressources XML devrait maintenant ressembler à ceci:

Étape 2: Déterminer les contrôles enfants

Ensuite, nous déterminons les contrôles enfants dont nous avons besoin. Dans ce cas, nous avons besoin de sept contrôles TextView (un pour chaque couleur). Configurez-les comme vous le feriez normalement, en définissant des attributs de texte sur des chaînes, des couleurs d'arrière-plan, des tailles de police, etc. Placez chacun de ces contrôles dans votre disposition relative..

Étape 3: Définir les règles de mise en page relative

Ensuite, nous définissons les règles pour chaque contrôle enfant, afin de les amener à dessiner aux endroits appropriés:

• Le contrôle RED TextView n'a aucun paramètre spécifique configuré. Par défaut, ce contrôle sera dessiné dans le coin supérieur gauche de la présentation parente..
• Le contrôle ORANGE TextView est centré horizontalement dans la mise en page parent. Etant donné que tous les contrôles sont placés par défaut dans le coin supérieur gauche de l'écran, cela permet d'ancrer le contrôle au bord supérieur haut de la présentation parent..
• Le contrôle JAUNE TextView est aligné sur le bord droit de la disposition parent. Etant donné que tous les contrôles sont placés par défaut dans le coin supérieur gauche de l'écran, le contrôle est donc ancré dans le coin supérieur droit de la présentation parent..
• Le contrôle GREEN TextView est centré verticalement dans la disposition parent et configuré pour s'afficher à gauche du contrôle BLUE TextView..
• Le contrôle BLUE TextView est aligné sur le centre (horizontalement et verticalement) du contrôle parent. Cela l'affiche au milieu de l'écran.
• Le contrôle INDIGO TextView est centré verticalement dans la présentation parent et configuré pour s'afficher à droite du contrôle BLUE TextView.
• Le contrôle VIOLET TextView est aligné sur le bord inférieur de la disposition parent. Sa largeur est également définie pour remplir le parent, ce qui lui permet de s'étendre sur le bord inférieur de l'écran..

Si vous définissez ces règles dans votre fichier de ressources XML, il devrait maintenant ressembler à ceci:

Conseils d'utilisation de RelativeLayout

Voici quelques astuces pour travailler avec des dispositions relatives.

• Les contrôles enfants de disposition relative doivent avoir des attributs d'identifiant uniques pour que les règles s'appliquent correctement.
• Attention aux règles circulaires. Les règles circulaires se produisent lorsque deux contrôles ont des règles qui pointent l'une vers l'autre. Si vous incluez un ensemble circulaire de règles dans votre conception de disposition, vous obtiendrez l'erreur suivante:

  IllegalStateException: les dépendances circulaires ne peuvent pas exister dans un RelativeLayout 

  Il peut être utile de rappeler que les règles de mise en page relatives sont appliquées en un seul passage..

• Gardez vos règles de mise en page relatives au minimum. Cela aide à réduire le risque de règles circulaires et rend votre mise en page plus facile à gérer et plus flexible.
• Comme d'habitude, n'oubliez pas de vérifier que votre mise en page fonctionne comme prévu dans les modes portrait et paysage, ainsi que sur différentes tailles d'écran et résolutions..
• Utilisez des dispositions relatives au lieu d'imbriquer des dispositions linéaires pour améliorer les performances et la réactivité de l'application.

Conclusion

Les interfaces utilisateur des applications Android sont définies à l'aide de dispositions, et les dispositions relatives sont l'un des types de disposition utilisés pour créer des écrans d'application à la fois souples et puissants. La disposition relative permet d’organiser les contrôles enfants les uns par rapport aux autres et par rapport au parent (bords et centrés verticalement et horizontalement). Une fois que vous maîtrisez les règles de mise en page relatives, elles peuvent être incroyablement polyvalentes, vous permettant de créer des dispositions complexes sans la surcharge d'imbriquer différentes dispositions, améliorant ainsi les performances..