Conception d'interface utilisateur Android Layouts

Les mises en page sont l'un des types de mise en page les plus simples utilisés pour organiser les contrôles dans l'interface utilisateur d'une application Android..
Comprendre les schémas est important pour bien concevoir une application Android. Dans ce didacticiel, vous apprendrez tout sur la disposition des cadres, principalement utilisée pour organiser des commandes de vue individuelles ou qui se chevauchent à l'écran. Lorsqu'elles sont utilisées correctement, les structures de cadre peuvent être la structure fondamentale sur laquelle de nombreuses interfaces utilisateur d'applications Android intéressantes peuvent être conçues..

Qu'est-ce qu'une structure de cadre?

Les mises en page sont l'un des types de mises en page les plus simples et les plus efficaces utilisés par les développeurs Android pour organiser les contrôles de vue. Elles sont moins souvent utilisées que d'autres présentations, simplement parce qu'elles sont généralement utilisées pour afficher une seule vue, ou des vues qui se chevauchent. La disposition du cadre est souvent utilisée comme disposition du conteneur, car elle ne comporte généralement qu'une seule vue enfant (souvent une autre disposition, utilisée pour organiser plusieurs vues)..

CONSEIL: En fait, les mises en page de cadre utilisées sont le lieu de mise en page parent de toutes les ressources de mise en page que vous concevez. Si vous extrayez votre application dans l'outil Visionneuse de hiérarchie (un outil utile pour déboguer les présentations de votre application), vous verrez que toutes les ressources de présentation que vous concevez sont affichées dans une vue parente, une disposition de cadre..

Les structures de cadre sont très simples, ce qui les rend très efficaces. Ils peuvent être définis dans les ressources de présentation XML ou par programme dans le code Java de l'application. Une vue enfant dans une disposition de cadre est toujours dessinée par rapport au coin supérieur gauche de l'écran. Si plusieurs vues enfant existent, elles sont ensuite dessinées, l'une après l'autre, l'une par-dessus l'autre. Cela signifie que la première vue ajoutée à la disposition du cadre s'affichera en bas de la pile et que la dernière vue ajoutée s'affichera en haut..

Regardons un exemple simple. Supposons que nous ayons une structure de cadre dimensionnée pour contrôler tout l'écran (en d'autres termes, les attributs layout_width et layout_height sont tous deux définis sur match_parent). Nous pourrions ensuite ajouter trois contrôles enfants à cette mise en page:

  • Un ImageView avec une image d'un lac.
  • Un TextView avec du texte à afficher vers le haut de l'écran.
  • Un TextView avec du texte à afficher vers le bas de l'écran (utilisez simplement l'attribut layout_gravity pour que le TextView "coule" au bas du parent).

La figure suivante montre à quoi ce type de présentation ressemblerait à l'écran.

Définition d'une ressource de structure XML avec une structure de cadre

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 structure de cadre simple présentée dans la section précédente. Encore une fois, cet écran est fondamentalement une structure de cadre avec trois vues enfants: une image qui remplit la totalité de l'écran, sur laquelle deux contrôles de texte sont dessinés, chacun avec le fond transparent par défaut. Ce fichier de ressources de présentation, nommé /res/layout/framed.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/framed.xml, cette ligne de code serait:

 setContentView (R.layout.framed); 

Définir une structure de cadre par programme

Vous pouvez également créer et configurer par programme des dispositions de cadre. Ceci est fait en utilisant la classe FrameLayout (android.widget.FrameLayout). Vous trouverez les paramètres spécifiques au cadre dans la classe FrameLayout.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 FrameLayout..
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 du cadre..
Par exemple, le code suivant montre comment reproduire la même disposition décrite précédemment par programmation. Plus précisément, nous avons une activité qui instancie un FrameLayout et place un contrôle ImageView suivi de deux contrôles TextView dans sa méthode onCreate ():

public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); TextView tv1 = new TextView (this); tv1.setText (R.string.top_text); tv1.setTextSize (40); tv1.setTextColor (Color.BLACK); TextView tv2 = new TextView (this); tv2.setLayoutParams (nouveaux LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM)); tv2.setTextSize (50); tv2.setGravity (Gravity.RIGHT); tv2.setText (R.string.bottom_text); tv2.setTextColor (Color.WHITE); ImageView iv1 = new ImageView (this); iv1.setImageResource (R.drawable.lake); iv1.setLayoutParams (nouveaux LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); iv1.setScaleType (ScaleType.MATRIX); FrameLayout fl = new FrameLayout (this); fl.setLayoutParams (nouveaux LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); fl.addView (iv1); fl.addView (tv1); fl.addView (tv2); setContentView (fl);  

L’écran résultant a exactement le même aspect que la figure présentée précédemment.

Quand utiliser les mises en page

Avec d’autres types de mise en page puissants, tels que les mises en page linéaires, les mises en page relatives et les mises en page de tableaux, il est facile d’oublier la mise en page. L'efficacité d'une structure de cadre en fait un bon choix pour les écrans contenant peu de commandes de vue (écrans d'accueil, écrans de jeu avec une seule toile, etc.). Parfois, d'autres conceptions de mise en page inefficaces peuvent être réduites à une conception de mise en page plus efficace, tandis que d'autres fois, un type de mise en page plus spécialisé convient. Les dispositions de cadre sont la disposition normale de choix lorsque vous souhaitez superposer des vues..

Regardant des contrôles similaires

FrameLayout est relativement simple. Pour cette raison, de nombreux autres types de disposition et contrôles de vue sont basés sur celle-ci. Par exemple, ScrollView est simplement un FrameLayout qui comporte des barres de défilement lorsque le contenu enfant est trop volumineux pour être dessiné dans les limites de la présentation. Tous les widgets d'application de l'écran d'accueil résident dans un FrameLayout.
Un ajout notable à tous les FrameLayouts est qu’ils peuvent prendre premier plan dessinable en plus du fond normal. Cela se fait via l'attribut XML android: foreground. Cela pourrait être utilisé pour, littéralement, un cadre autour des vues sous-jacentes.

Conclusion

Les interfaces utilisateur des applications Android sont définies à l'aide de dispositions, et les dispositions de cadre constituent l'un des types de disposition les plus simples et les plus efficaces disponibles. Les contrôles enfants d'une disposition de cadre sont dessinés par rapport au coin supérieur gauche de la disposition. S'il existe plusieurs vues enfants dans la structure du cadre, elles sont dessinées dans l'ordre, avec la dernière vue enfant en haut..