Android - Disposition de l'interface utilisateur

L'élément de base de l'interface utilisateur est un Viewobjet qui est créé à partir de la classe View et occupe une zone rectangulaire sur l'écran et est responsable du dessin et de la gestion des événements. View est la classe de base des widgets, qui sont utilisés pour créer des composants d'interface utilisateur interactifs tels que des boutons, des champs de texte, etc.

le ViewGroup est une sous-classe de View et fournit un conteneur invisible qui contient d'autres vues ou d'autres groupes de vues et définit leurs propriétés de disposition.

Au troisième niveau, nous avons différentes mises en page qui sont des sous-classes de la classe ViewGroup et une mise en page typique définit la structure visuelle d'une interface utilisateur Android et peut être créée au moment de l'exécution en utilisant View/ViewGroup objets ou vous pouvez déclarer votre mise en page à l'aide d'un simple fichier XML main_layout.xml qui se trouve dans le dossier res / layout de votre projet.

Paramètres de mise en page

Ce didacticiel porte davantage sur la création de votre interface graphique basée sur des dispositions définies dans un fichier XML. Une mise en page peut contenir tout type de widgets tels que des boutons, des étiquettes, des zones de texte, etc. Voici un exemple simple de fichier XML ayant LinearLayout -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

Une fois votre mise en page créée, vous pouvez charger la ressource de mise en page à partir du code de votre application, dans votre implémentation de rappel Activity.onCreate () comme indiqué ci-dessous -

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

Types de disposition Android

Il existe un certain nombre de mises en page fournies par Android que vous utiliserez dans presque toutes les applications Android pour offrir une vue, une apparence et une sensation différentes.

Sr. Non	Disposition et description
1	Disposition linéaire LinearLayout est un groupe de vues qui aligne tous les enfants dans une seule direction, verticalement ou horizontalement.
2	Disposition relative RelativeLayout est un groupe de vues qui affiche les vues enfants dans des positions relatives.
3	Disposition de la table TableLayout est une vue qui regroupe les vues en lignes et en colonnes.
4	Disposition absolue AbsoluteLayout vous permet de spécifier l'emplacement exact de ses enfants.
5	Disposition du cadre Le FrameLayout est un espace réservé à l'écran que vous pouvez utiliser pour afficher une seule vue.
6	Vue en liste ListView est un groupe de vues qui affiche une liste d'éléments défilables.
sept	Vue Grille GridView est un ViewGroup qui affiche les éléments dans une grille défilante bidimensionnelle.

Attributs de mise en page

Chaque mise en page a un ensemble d'attributs qui définissent les propriétés visuelles de cette mise en page. Il existe peu d'attributs communs parmi toutes les mises en page et leurs autres attributs sont spécifiques à cette mise en page. Les attributs communs suivants seront appliqués à toutes les mises en page:

Sr. Non	Attribut et description
1	android:id Il s'agit de l'ID qui identifie de manière unique la vue.
2	android:layout_width Il s'agit de la largeur de la mise en page.
3	android:layout_height C'est la hauteur de la mise en page
4	android:layout_marginTop Il s'agit de l'espace supplémentaire en haut de la mise en page.
5	android:layout_marginBottom Il s'agit de l'espace supplémentaire en bas de la mise en page.
6	android:layout_marginLeft Il s'agit de l'espace supplémentaire sur le côté gauche de la mise en page.
sept	android:layout_marginRight Il s'agit de l'espace supplémentaire sur le côté droit de la mise en page.
8	android:layout_gravity Ceci spécifie comment les vues enfants sont positionnées.
9	android:layout_weight Cela spécifie la quantité d'espace supplémentaire dans la disposition qui doit être allouée à la vue.
dix	android:layout_x Ceci spécifie la coordonnée x de la mise en page.
11	android:layout_y Ceci spécifie la coordonnée y de la mise en page.
12	android:layout_width Il s'agit de la largeur de la mise en page.
13	android:paddingLeft Il s'agit du remplissage de gauche pour la mise en page.
14	android:paddingRight Il s'agit du bon remplissage pour la mise en page.
15	android:paddingTop Il s'agit du rembourrage supérieur rempli pour la mise en page.
16	android:paddingBottom Il s'agit du rembourrage inférieur rempli pour la mise en page.

Ici, la largeur et la hauteur sont la dimension de la mise en page / vue qui peut être spécifiée en termes de dp (pixels indépendants de la densité), sp (pixels indépendants de l'échelle), pt (points qui est 1/72 de pouce), px ( Pixels), mm (Millimètres) et enfin en (pouces).

Vous pouvez spécifier la largeur et la hauteur avec des mesures exactes, mais le plus souvent, vous utiliserez l'une de ces constantes pour définir la largeur ou la hauteur -

• android:layout_width=wrap_content indique à votre vue de se dimensionner aux dimensions requises par son contenu.

• android:layout_width=fill_parent indique à votre vue de devenir aussi grande que sa vue parente.

L'attribut Gravity joue un rôle important dans le positionnement de l'objet de vue et il peut prendre une ou plusieurs (séparées par «|») des valeurs constantes suivantes.

Constant	Valeur	La description
Haut	0x30	Poussez l'objet vers le haut de son conteneur, sans changer sa taille.
bas	0x50	Poussez l'objet au fond de son conteneur, sans changer sa taille.
la gauche	0x03	Poussez l'objet vers la gauche de son conteneur, sans changer sa taille.
droite	0x05	Poussez l'objet à droite de son conteneur, sans changer sa taille.
center_vertical	0x10	Placez l'objet au centre vertical de son conteneur, sans modifier sa taille.
fill_vertical	0x70	Augmentez la taille verticale de l'objet si nécessaire pour qu'il remplisse complètement son conteneur.
center_horizontal	0x01	Placez l'objet au centre horizontal de son conteneur, sans modifier sa taille.
fill_horizontal	0x07	Augmentez la taille horizontale de l'objet si nécessaire pour qu'il remplisse complètement son conteneur.
centre	0x11	Placez l'objet au centre de son conteneur dans l'axe vertical et horizontal, sans modifier sa taille.
remplir	0x77	Augmentez la taille horizontale et verticale de l'objet si nécessaire pour qu'il remplisse complètement son conteneur.
clip_vertical	0x80	Option supplémentaire qui peut être définie pour que les bords supérieur et / ou inférieur de l'enfant soient coupés aux limites de son conteneur. Le clip sera basé sur la gravité verticale: une gravité supérieure coupera le bord inférieur, une gravité inférieure coupera le bord supérieur et aucune des deux ne coupera les deux bords.
clip_horizontal	0x08	Option supplémentaire qui peut être définie pour que les bords gauche et / ou droit de l'enfant soient coupés aux limites de son conteneur. Le clip sera basé sur la gravité horizontale: une gravité gauche coupera le bord droit, une gravité droite coupera le bord gauche et aucune des deux ne coupera les deux bords.
début	0x00800003	Poussez l'objet au début de son conteneur, sans changer sa taille.
fin	0x00800005	Poussez l'objet jusqu'au bout de son conteneur, sans changer sa taille.

Voir l'identification

Un objet de vue peut avoir un ID unique qui lui sera attribué qui identifiera la vue de manière unique dans l'arborescence. La syntaxe pour un ID, à l'intérieur d'une balise XML est -

android:id="@+id/my_button"

Voici une brève description des signes @ et + -

• Le symbole at (@) au début de la chaîne indique que l'analyseur XML doit analyser et développer le reste de la chaîne d'ID et l'identifier comme une ressource d'ID.

• Le symbole plus (+) signifie qu'il s'agit d'un nouveau nom de ressource qui doit être créé et ajouté à nos ressources. Pour créer une instance de l'objet de vue et la capturer à partir de la mise en page, utilisez ce qui suit:

Button myButton = (Button) findViewById(R.id.my_button);