Mises en page dans les vues
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.
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
etViewGroup
, 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:
- 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"/>
- 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.
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
.
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">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 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:
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 appelanttoString()
sur chaque élément et en plaçant le contenu dans uneTextView
.Par exemple, si vous disposez d'un tableau de chaînes à afficher dans une
ListView
, initialisez un nouveauArrayAdapter
à 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 votreListView
: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'uneTextView
. Par exemple, si vous souhaitez qu'uneImageView
pour chaque élément du tableau, étendez la classeArrayAdapter
et ignorergetView()
pour renvoyer le type de vue souhaité pour chaque élément. - Votre application
SimpleCursorAdapter
- Utilisez cet adaptateur lorsque vos données proviennent d'un
Cursor
Lorsque vous utilisezSimpleCursorAdapter
, spécifiez une mise en page à utiliser pour chaque ligne de la colonneCursor
et quelles colonnes du tableauCursor
à 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 unCursor
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 duCursor
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, leCursor
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 dansCursor
à l'aide de la mise en page fournie en insérant chaquefromColumns
dans letoViews
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.