1. Disposition linéaire LinearLayout
Disposition linéaire, c'est-à-dire que chaque module est disposé horizontalement ou verticalement. Après avoir étudié les chapitres précédents, tout le monde est à peu près familier avec la disposition linéaire. Je pense que tout le monde peut comprendre le code suivant. La disposition linéaire la plus externe contient deux dispositions linéaires.
layout_width et layout_height représentent la largeur et la hauteur de la disposition linéaire ;
match_parent et wrap_content indiquent respectivement la correspondance de la largeur et de la hauteur de la mise en page supérieure et la correspondance de la largeur et de la hauteur du contenu dans le module, c'est-à-dire que le contenu peut être affiché complètement.
L'orientation représente la méthode de distribution de la disposition linéaire, la verticale représente la disposition verticale et l'horizontale représente l'horizontale. Si cet attribut n'est pas écrit, la valeur par défaut est le mode de disposition horizontale.
<?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="150dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="horizontal one!"
android:textSize="20sp"
android:layout_margin="7dp"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="horizontal two!"
android:textSize="20sp"
android:layout_margin="7dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="vertical one!"
android:textSize="20sp"
android:layout_margin="7dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:text="vertical two!"
android:textSize="20sp"
android:layout_margin="7dp"/>
</LinearLayout>
</LinearLayout>La disposition linéaire verticale la plus à l’extérieur contient deux dispositions linéaires, une disposée horizontalement et une disposée verticalement, avec deux contenus d’affichage TextView définis à l’intérieur. Dans la disposition horizontale, définissez la largeur des deux TextViews sur 0dp, puis définissez le poids layout_weight sur 1, de sorte que les deux TextViews allouent la largeur en fonction du poids, c'est-à-dire 1/(1+1) =1/2, de L'effet est également visible car la largeur est répartie également entre les deux modules. Dans la disposition verticale, la hauteur des deux TextViews est définie comme étant 0dp, et les poids de l'un sont 1 et l'autre 2, de sorte qu'ils seront répartis selon les poids 1/(1+2) et 2/ (1+2) élevé. Le rendu est présenté ci-dessous.
2. Disposition relative de RelativeLayout
La disposition relative représente la position relative entre les modules, telle que l'alignement à gauche, l'alignement à droite, le milieu, etc. d'un module par rapport au niveau précédent ; ou l'alignement à gauche, l'alignement à droite, le haut ou la position d'un module par rapport à un autre module. sur.
Il existe de nombreux attributs, je vais simplement en énumérer quelques-uns ici, et vous pouvez entraîner le reste par vous-même.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:id="@+id/centerinparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centerinparent"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centerhorizontal"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centervertical"
android:layout_centerVertical="true"/>
</RelativeLayout>Dans le code ci-dessus, une mise en page relative (RelativeLayout) est définie et trois TextViews sont définies dans la mise en page, qui sont situées au centre, au centre horizontal et au centre vertical du niveau précédent (c'est-à-dire la mise en page relative). L'effet est illustré ci-dessous. Par conséquent, pour définir une certaine position relative d'un module par rapport à la vue de niveau supérieur, définissez cet attribut comme vrai.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:id="@+id/centerinparent"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:gravity="center"
android:text="centerinparent"
android:layout_margin="7dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/centerinparent"
android:text="right" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/centerinparent"
android:layout_toRightOf="@id/centerinparent"
android:text="right_top" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/centerinparent"
android:layout_toLeftOf="@id/centerinparent"
android:text="left_bottom" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="above_left"
android:layout_above="@id/centerinparent"
android:layout_alignLeft="@id/centerinparent"/>
</RelativeLayout>Comme le montre le code ci-dessus, la position relative d'un module par rapport à un autre module est affichée. Tout d'abord, un module (centerinparent) est défini pour être situé au centre de la disposition relative, tandis que les autres modules sont positionnés par rapport au module central. , par exemple à sa droite. Côté, alignement en haut à droite, alignement en bas à gauche, alignement en haut à gauche. L'effet est illustré ci-dessous. Parmi eux, pour définir la position relative par rapport à un certain module, attribuez l'attribut correspondant à l'identifiant d'un certain module, tel que ("@id/centerinparent").
Pour référencer un module, utilisez @id/ et pour ajouter un identifiant, utilisez @+id/
3. Disposition de la grille GridLayout
La disposition en grille, tout comme la grille Excel, définit quelques lignes et colonnes, et le contenu est organisé selon la grille. Le code est le suivant, définissant la disposition de la grille et définissant le nombre de lignes de la grille (rowCount) et le numéro de colonne (rowCountcolumnCount). N'oubliez pas : la répartition de la grille se fait de gauche à droite et de haut en bas.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2">
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="50dp"
android:text="one_one"
android:textSize="20dp"
android:background="#ff0000"
android:gravity="center"/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="50dp"
android:text="one_two"
android:textSize="20dp"
android:background="#00ff00"
android:gravity="center"/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="50dp"
android:text="two_one"
android:textSize="20dp"
android:background="#f0f0f0"
android:gravity="center"/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="50dp"
android:text="two_two"
android:textSize="20dp"
android:background="#f0aa00"
android:gravity="center"/>
</GridLayout>Nous avons défini 4 modules TextView dans la distribution de la grille et défini les poids des colonnes de manière à ce que les modules de chaque ligne se voient attribuer une largeur en fonction du poids. De plus, l'alignement de son contenu subordonné est défini (gravity="center"). L'effet est le suivant
Vous pourriez être curieux de savoir ce qui se passera si vous continuez à ajouter des modules, alors ajoutons un autre module, comme indiqué ci-dessous. Par conséquent, lorsque le nombre de modules dépasse le nombre défini, le nombre de lignes augmentera automatiquement en fonction du nombre de colonnes.
4. Vue de défilement ScrollView
Lorsque le contenu que nous souhaitons afficher ne peut pas être entièrement affiché dans la zone d'affichage du téléphone mobile, nous pouvons envisager d'utiliser la vue par défilement. Je pense que tout le monde rencontre souvent la vue par défilement lorsqu'il utilise un téléphone mobile. Le code est le suivant : La vue de défilement est divisée en défilement horizontal (HorizontalScrollView) et défilement vertical (ScrollView).
Lors de l'utilisation du défilement horizontal, son attribut width est défini sur wrap_content, de sorte que davantage d'éléments qui doivent être affichés puissent être placés dans la direction horizontale et que le contenu puisse être visualisé par défilement. Une disposition linéaire est ajoutée à la vue de défilement horizontal, qui doit lui correspondre, et la direction est horizontale (l'attribut d'orientation n'est pas écrit, la valeur par défaut est horizontale). Deux TextViews sont ajoutés à la disposition linéaire et la largeur est définie sur 300 dp. Cela fait que les deux modules distribués horizontalement dépassent la portée de l'écran, afin qu'ils puissent être affichés en faisant défiler la vue.
Lors de l'utilisation du défilement vertical, sa hauteur est définie sur wrap_content, afin que davantage d'éléments à afficher puissent être placés dans la direction verticale. Notez que la disposition linéaire doit définir sa direction de disposition sur verticale.
<?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">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="200dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#ff00ff"/>
<TextView
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#ffff00" />
</LinearLayout>
</HorizontalScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ff0000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#0000ff"/>
</LinearLayout>
</ScrollView>
</LinearLayout>5. Résumé
Grâce à l'étude de ce chapitre, nous avons maîtrisé trois mises en page couramment utilisées et une vue de défilement : la disposition linéaire LinearLayout, la disposition relative RelativeLayout, la disposition de grille GridLayout, la vue de défilement ScrollView.