Mises en page dans les vues

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les mises en page dans Compose.
<ph type="x-smartling-placeholder"></ph> Découvrez les principes de base de la mise en page dans Compose →

Une mise en page définit la structure d'une interface utilisateur dans votre application, par exemple dans une activity. Tous les éléments de la balise mise en page sont construits en utilisant une hiérarchie de View et ViewGroup d'objets. View dessine généralement quelque chose que l'utilisateur peut voir et avec lesquelles interagir. Un ViewGroup est un conteneur invisible qui définit la structure de mise en page pour View et d'autres ViewGroup ; des objets, comme illustré dans la figure 1.

Figure 1. Illustration d'une hiérarchie des vues, qui définit une mise en page de l'interface utilisateur.

Les objets View sont souvent appelés widgets et peuvent être l'un des éléments de nombreuses sous-classes, comme Button ou TextView La Les objets ViewGroup sont généralement appelés mises en page et peuvent être de nombreux types qui fournissent une structure de mise en page différente, par exemple LinearLayout ou ConstraintLayout

Vous pouvez déclarer une mise en page de deux manières:

  • Déclarez les éléments d'interface utilisateur au format XML. Android fournit un fichier XML simple vocabulaire correspondant aux classes et sous-classes View, comme ceux des widgets et des mises en page. Vous pouvez également utiliser L'éditeur de mise en page pour créer votre fichier XML à l'aide d'une interface par glisser-déposer.

  • Instanciez les éléments de mise en page au moment de l'exécution. Votre application peut créer les objets View et ViewGroup, et de manipuler leurs de manière automatisée.

Déclarer votre UI en XML vous permet de séparer la présentation de votre appli le code qui contrôle son comportement. L'utilisation de fichiers XML facilite également fournir différentes mises en page pour différentes tailles et orientations d'écran. C'est abordé plus en détail dans Assurer la compatibilité avec différents écrans tailles d'écran.

Le framework Android vous permet d'utiliser l'un ou l'autre, ou les deux ces méthodes pour créer l'UI de votre application. Par exemple, vous pouvez déclarer les mises en page par défaut en XML, puis modifier la mise en page au moment de l'exécution.

<ph type="x-smartling-placeholder">

Écrire le fichier XML

Le vocabulaire XML d'Android vous permet de concevoir rapidement des mises en page d'interface utilisateur. qu'ils contiennent, de la même manière que vous créez des pages Web en HTML avec une série d'éléments imbriqués.

Chaque fichier de mise en page doit contenir exactement un élément racine, qui doit être un Objet View ou ViewGroup. Après avoir défini la racine vous pouvez ajouter des objets de mise en page ou des widgets supplémentaires en tant qu'éléments enfants à créer progressivement une hiérarchie View qui définit votre mise en page. Pour Voici un exemple de mise en page XML qui utilise un élément LinearLayout vertical pour contiennent TextView et Button:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

Après avoir déclaré votre mise en page au format XML, enregistrez le fichier avec l'élément Extension .xml dans le fichier res/layout/ de votre projet Android pour qu'il se compile correctement.

Pour en savoir plus sur la syntaxe d'un fichier XML de mise en page, consultez Ressource de mise en page.

Charger la ressource XML

Lorsque vous compilez votre application, chaque fichier de mise en page XML est compilé dans un View. Chargez la ressource de mise en page dans le Activity.onCreate() la mise en œuvre du rappel. Pour ce faire, appelez setContentView(), en transmettant la référence à votre ressource de mise en page sous la forme suivante: R.layout.layout_file_name Par exemple, si votre fichier XML est enregistrée en tant que main_layout.xml, chargez-la pour votre Activity comme suit:

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Java

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

Le framework Android appelle la méthode de rappel onCreate() dans votre Activity lors du lancement de Activity. Pour plus sur les cycles de vie des activités, consultez Présentation activités.

Attributs

Chaque objet View et ViewGroup accepte sa propre une variété d'attributs XML. Certains attributs sont spécifiques à un View . Par exemple, TextView est compatible avec textSize . Cependant, ces attributs sont également hérités par tous les View qui étendent cette classe. Certains sont communs à tous les View car ils sont hérités de la classe racine View, comme l'attribut id. D'autres attributs sont considérés comme la mise en page des paramètres, qui sont des attributs qui décrivent certaines orientations de mise en page. de l'objet View, tel que défini par le parent de cet objet ViewGroup.

ID

Tout objet View peut être associé à un ID entier pour identifient de manière unique View dans l'arborescence. Lorsque l'application est compilé, cet ID est référencé sous la forme d'un entier, mais l'ID est généralement attribué dans le fichier XML de mise en page en tant que chaîne dans l'attribut id. Il s'agit d'un Attribut XML commun à tous les objets View. Il est défini par la propriété View. Vous l'utilisez très souvent. La syntaxe d'un identifiant à l'intérieur d'une La balise XML est la suivante:

android:id="@+id/my_button"

Le symbole at (@) au début de la chaîne indique que l'analyseur XML analyse et développe le reste de la chaîne d'ID, puis l'identifie en tant que une ressource d'ID. Le symbole plus (+) signifie qu'il s'agit d'un nouveau nom de ressource à créer et à ajouter à vos ressources dans le R.java .

Le framework Android propose de nombreuses autres ressources d'ID. Lorsque vous référencez ID de ressource Android, vous n'avez pas besoin du symbole plus, mais vous devez ajouter le android comme suit:

android:id="@android:id/empty"

L'espace de noms du package android indique que vous référencez un ID de la classe de ressources android.R, plutôt que de la classe "resource".

Pour créer des vues et les référencer à partir de votre application, vous pouvez utiliser un comme suit:

  1. Définissez une vue dans le fichier de mise en page et attribuez-lui un identifiant unique, comme dans l'exemple suivant: 
    <Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>
  2. Créer une instance de l'objet "view" et l'enregistrer à partir de la mise en page généralement dans le onCreate() , comme illustré dans l'exemple suivant:

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)

    Java

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

Il est important de définir des ID pour les objets "View" (Vue) lors de la création d'un RelativeLayout Dans une mise en page relative, les vues frères peuvent définir leur mise en page par rapport à une autre vue sœur, référencée par l'identifiant unique.

Un identifiant n'a pas besoin d'être unique dans l'ensemble de l'arborescence, mais il doit être dans la partie de l'arborescence que vous recherchez. Il peut s'agir de l'intégralité Il est donc préférable de le rendre unique lorsque cela est possible.

Paramètres de mise en page

Les attributs de mise en page XML nommés layout_something définissent les paramètres de mise en page pour View qui conviennent ViewGroup dans lequel elle se trouve.

Chaque classe ViewGroup implémente une classe imbriquée qui étend ViewGroup.LayoutParams Cette sous-classe contient des types de propriétés qui définissent la taille et la position de chaque la vue enfant, en fonction du groupe de vues. Comme le montre la figure 2, Le groupe de vues définit les paramètres de mise en page pour chaque vue enfant, y compris l'élément enfant groupe de vues.

Figure 2. Visualisation d'une hiérarchie de vues avec une mise en page paramètres associés à chaque vue.

Chaque sous-classe LayoutParams possède sa propre syntaxe pour définir valeurs. Chaque élément enfant doit définir un LayoutParams qui est adaptée à son parent, bien qu'elle puisse également définir une autre LayoutParams pour ses propres enfants.

Tous les groupes de vues incluent une largeur et une hauteur à l'aide de layout_width et layout_height, et chaque vue est nécessaire pour les définir. Beaucoup Les LayoutParams incluent des marges et des bordures facultatives.

Vous pouvez indiquer la largeur et la hauteur avec des mesures exactes, souhaitez le faire souvent. Le plus souvent, vous utilisez l'une de ces constantes pour définir largeur ou hauteur:

  • wrap_content: indique à la vue de s'ajuster à la requises par son contenu.
  • match_parent: indique à votre vue de devenir aussi grande que son parent le groupe de vues autorisé.

En général, nous vous déconseillons de spécifier une largeur et une hauteur de mise en page avec des unités absolues telles que les pixels. Une meilleure approche consiste à utiliser des mesures relatives, comme les unités de pixels indépendantes de la densité (dp), wrap_content ou match_parent, car cela permet à votre application de s'afficher correctement sur différentes tailles d'écran des appareils. Les types de mesure acceptés sont définis dans Ressource de mise en page.

Position de la mise en page

Une vue présente une géométrie rectangulaire. Il dispose d'un lieu, exprimé sous la forme d'une paire de les coordonnées gauche et supérieure, ainsi que deux dimensions, exprimées sous la forme d'une la largeur et la hauteur. L'unité utilisée pour l'emplacement et les dimensions est le pixel.

Vous pouvez récupérer l'emplacement d'une vue en appelant les méthodes getLeft() et getTop() La première renvoie la coordonnée de gauche (x) du rectangle représentant la vue. Cette dernière renvoie la coordonnée supérieure (y) du rectangle représentant la vue. Ces méthodes renvoient l'emplacement de la vue par rapport à son parent. Par exemple, lorsque getLeft() renvoie 20, cela signifie que située à 20 pixels à droite du bord gauche de la vue directe parent.

En outre, il existe des méthodes pratiques pour éviter des calculs inutiles: à savoir getRight() et getBottom() Ces méthodes renvoient les coordonnées des bords droit et inférieur de la rectangle représentant la vue. Par exemple, appeler getRight() est semblable au calcul suivant: getLeft() + getWidth().

Taille, marge intérieure et marges

La taille d'une vue est exprimée par la largeur et la hauteur. Une vue comporte deux paires des valeurs de largeur et de hauteur.

La première paire est appelée largeur mesurée. hauteur mesurée. Ces dimensions définissent la taille souhaitée pour une vue. au sein de son parent. Vous pouvez obtenir les dimensions mesurées en appelant getMeasuredWidth() et getMeasuredHeight()

La deuxième paire est appelée width et height, ou parfois largeur du dessin et hauteur du dessin. Ces dimensions définissent la taille réelle de la vue à l'écran, au moment du dessin et après la mise en page. Ces peuvent être différentes de la largeur et de la hauteur mesurées, mais ce n'est pas une obligation. Toi vous pouvez obtenir la largeur et la hauteur getWidth() et getHeight()

Pour mesurer ses dimensions, une vue tient compte de sa marge intérieure. La marge intérieure est exprimée en pixels pour les parties gauche, supérieure, droite et inférieure de la vue. Vous pouvez utiliser une marge intérieure pour décaler le contenu de la vue d'un nombre spécifique de de pixels. Par exemple, une marge intérieure de gauche de deux pousse le contenu de la vue de deux pixels. à droite du bord gauche. Vous pouvez définir une marge intérieure à l'aide de la méthode setPadding(int, int, int, int) et l'interroger en appelant getPaddingLeft(), getPaddingTop(), getPaddingRight(), et getPaddingBottom()

Bien qu'une vue puisse définir une marge intérieure, elle ne prend pas en charge les marges. Toutefois, les groupes de vues prennent en charge les marges. Voir ViewGroup et ViewGroup.MarginLayoutParams pour en savoir plus.

Pour en savoir plus sur les dimensions, consultez Dimension :

En plus de définir des marges et des marges intérieures de manière programmatique, dans vos mises en page XML, comme illustré dans l'exemple suivant:

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
      <TextView android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>

L'exemple précédent montre une marge et une marge intérieure en cours d'application. La Des marges et des marges intérieures uniformes sont appliquées tout autour de TextView. Button vous montre comment les appliquer indépendamment .

<ph type="x-smartling-placeholder">

Mises en page courantes

Chaque sous-classe de la classe ViewGroup fournit un moyen unique de pour afficher les vues qu'il contient. Le type de mise en page le plus flexible, qui fournit les meilleurs outils pour garder une hiérarchie de mise en page superficielle, ConstraintLayout

Voici quelques-uns des types de mise en page courants intégrés dans Android Google Cloud.

<ph type="x-smartling-placeholder">
Créer une mise en page linéaire

organise ses enfants en une seule ligne horizontale ou verticale et crée une barre de défilement si la longueur de la fenêtre dépasse celle de l'écran.

Créer des applications Web dans WebView

Affiche les pages Web.

Créer des listes dynamiques

Lorsque le contenu de votre mise en page est dynamique ou non prédéterminé, vous pouvez utiliser RecyclerView ou une sous-classe de AdapterView RecyclerView est généralement la meilleure option, car elle utilise la mémoire plus efficacement que AdapterView.

Mises en page courantes possibles avec RecyclerView et Les AdapterView incluent les éléments suivants:

Liste

Affiche une liste déroulante à colonne unique.

Grille

Affiche une grille déroulante composée de colonnes et de lignes.

RecyclerView offre plus de possibilités et la possibilité de créer un gestionnaire de mises en page.

Remplir une vue d'adaptateur avec des données

Vous pouvez renseigner AdapterView par exemple ListView ou GridView par lier l'instance AdapterView à Adapter, qui récupère les données d'une source externe et crée un View qui représente chaque entrée de données.

Android fournit plusieurs sous-classes de Adapter utiles permettant d'extraire différents types de données et de créer des vues AdapterView Les deux adaptateurs les plus courants sont les suivants:

ArrayAdapter
Utilisez cet adaptateur lorsque votre source de données est un tableau. Par défaut, ArrayAdapter crée une vue pour chaque élément du tableau en appelant toString() sur chaque élément et en plaçant le contenu dans une TextView.

Par exemple, si vous disposez d'un tableau de chaînes à afficher dans une ListView, initialisez un nouveau ArrayAdapter à l'aide d'un pour spécifier la mise en page de chaque chaîne et le tableau de chaînes:

Kotlin

    val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

Java

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, myStringArray);

Les arguments de ce constructeur sont les suivants:

  • Votre application Context
  • La mise en page qui contient un TextView pour chaque chaîne dans tableau
  • Le tableau de chaînes

Appelez ensuite setAdapter() sur votre ListView:

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter

Java

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

Pour personnaliser l'apparence de chaque élément, vous pouvez remplacer le paramètre toString() pour les objets de votre tableau. Ou, pour créer une vue pour chaque élément autre qu'une TextView. Par exemple, si vous souhaitez qu'une ImageView pour chaque élément du tableau, étendez la classe ArrayAdapter et ignorer getView() pour renvoyer le type de vue souhaité pour chaque élément.

SimpleCursorAdapter
Utilisez cet adaptateur lorsque vos données proviennent d'un Cursor Lorsque vous utilisez SimpleCursorAdapter, spécifiez une mise en page à utiliser pour chaque ligne de la colonne Cursor et quelles colonnes du tableau Cursor à insérer dans les affichages de la mise en page souhaitée. Par exemple, si vous voulez créer une liste des noms et numéros de téléphone des personnes des nombres, vous pouvez effectuer une requête qui renvoie un Cursor contenant une ligne pour chaque personne et des colonnes pour les noms et les chiffres. Toi puis créer un tableau de chaînes spécifiant les colonnes du Cursor souhaité dans la mise en page pour chaque résultat, ainsi qu'un nombre entier tableau spécifiant les vues correspondantes dont chaque colonne doit être placé:

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

Java

    String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                            ContactsContract.CommonDataKinds.Phone.NUMBER};
    int[] toViews = {R.id.display_name, R.id.phone_number};

Lorsque vous instanciez SimpleCursorAdapter, transmettez la valeur mise en page à utiliser pour chaque résultat, le Cursor contenant le résultats, et ces deux tableaux:

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter

Java

    SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
    ListView listView = getListView();
    listView.setAdapter(adapter);

SimpleCursorAdapter crée ensuite une vue pour chaque ligne dans Cursor à l'aide de la mise en page fournie en insérant chaque fromColumns dans le toViews correspondant vue.

Si, au cours de la durée de vie de votre application, vous modifiez les données sous-jacentes est lu par votre adaptateur, appelez notifyDataSetChanged() Cela informe la vue associée que les données ont été modifiées et s'actualise lui-même.

Gérer les événements de clic

Vous pouvez répondre aux événements de clic sur chaque élément d'une AdapterView en implémentant le AdapterView.OnItemClickListener de commande. Exemple :

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

Ressources supplémentaires

Découvrez comment les mises en page sont utilisées dans le Tournesol application de démonstration sur GitHub.