1. LinearLayout lineares Layout
Lineares Layout, d. h. jedes Modul ist horizontal oder vertikal angeordnet. Nach dem Studium der vorherigen Kapitel ist jeder mit dem linearen Layout ungefähr vertraut, und ich denke, jeder kann den folgenden Code verstehen. Das äußerste lineare Layout enthält zwei lineare Layouts.
layout_width und layout_height stellen die Breite und Höhe des linearen Layouts dar;
match_parent und wrap_content geben an, dass die Breite und Höhe des übergeordneten Layouts bzw. die Breite und Höhe des Inhalts im Modul übereinstimmen, dh der Inhalt kann vollständig angezeigt werden.
Die Ausrichtung stellt die Verteilungsmethode des linearen Layouts dar, vertikal stellt die vertikale Anordnung dar und horizontal stellt die horizontale Anordnung dar. Wenn dieses Attribut nicht geschrieben ist, ist der Standardwert der horizontale Anordnungsmodus.
<?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>Das äußerste vertikale lineare Layout enthält zwei lineare Layouts, eines horizontal und eines vertikal angeordnet, mit zwei darin definierten TextView-Anzeigeinhalten. Definieren Sie im horizontalen Layout die Breite der beiden TextViews auf 0 dp und definieren Sie dann das Gewicht von layout_weight auf 1, sodass die beiden TextViews die Breite entsprechend dem Gewicht zuweisen, dh 1/(1 + 1). =1/2, von Der Effekt ist auch daran zu erkennen, dass die Breite gleichmäßig auf die beiden Module aufgeteilt wird. Im vertikalen Layout ist die Höhe der beiden TextViews auf 0 dp definiert, und die Gewichte der einen sind 1 und die der anderen sind 2, sodass sie entsprechend den Gewichten 1/(1+2) und 2/ verteilt werden. (1+2) hoch. Das Rendering ist unten dargestellt.
2. RelativeLayout relatives Layout
Das relative Layout stellt die relative Position zwischen Modulen dar, z. B. die linke Ausrichtung eines Moduls, die rechte Ausrichtung, die Mitte usw. relativ zur vorherigen Ebene; oder die linke Ausrichtung eines Moduls, die rechte Ausrichtung, die Oberseite oder die Position relativ zu einem anderen Modul. Unten usw An.
Es gibt viele Attribute, ich werde hier nur einige auflisten, den Rest können Sie selbst trainieren.
<?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>Im obigen Code wird ein relatives Layout (RelativeLayout) definiert und im Layout werden drei TextViews definiert, die sich in der Mitte, in der horizontalen Mitte und in der vertikalen Mitte der vorherigen Ebene befinden (dh relatives Layout). Der Effekt ist unten dargestellt. Um daher eine bestimmte relative Position eines Moduls relativ zur Ansicht der oberen Ebene zu definieren, definieren Sie dieses Attribut als „true“.
<?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>Wie im obigen Code gezeigt, wird die relative Position eines Moduls relativ zu einem anderen Modul angezeigt. Zunächst wird ein Modul (centerinparent) so definiert, dass es sich in der Mitte des relativen Layouts befindet, während andere Module relativ zum mittleren Modul positioniert werden B. rechts davon. Seite, rechte obere Ausrichtung, linke untere Ausrichtung, obere linke Ausrichtung. Der Effekt ist unten dargestellt. Um unter anderem die relative Position relativ zu einem bestimmten Modul zu definieren, weisen Sie der ID eines bestimmten Moduls das entsprechende Attribut zu, z. B. („@id/centerinparent“).
Um auf ein Modul zu verweisen, verwenden Sie @id/ und um eine ID hinzuzufügen, verwenden Sie @+id/
3. GridLayout-Rasterlayout
Das Rasterlayout definiert, genau wie das Excel-Raster, einige Zeilen und Spalten, und der Inhalt wird entsprechend dem Raster angeordnet. Der Code lautet wie folgt: Er definiert das Rasterlayout und legt die Anzahl der Rasterzeilen (rowCount) und die Spaltennummer (rowCountcolumnCount) fest. Denken Sie daran: Die Rasterverteilung erfolgt von links nach rechts und von oben nach unten.
<?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>Wir haben 4 TextView-Module in der Rasterverteilung definiert und die Spaltengewichte so festgelegt, dass den Modulen in jeder Zeile entsprechend der Gewichtung eine Breite zugewiesen wird. Zusätzlich wird die Ausrichtung seines untergeordneten Inhalts festgelegt (Schwerkraft="Mitte"). Der Effekt ist wie folgt
Sie sind vielleicht neugierig, was passiert, wenn Sie weitere Module hinzufügen. Fügen wir also ein weiteres Modul hinzu, wie unten gezeigt. Wenn daher die Anzahl der Module die definierte Anzahl überschreitet, wird die Anzahl der Zeilen automatisch entsprechend der Anzahl der Spalten erhöht.
4. ScrollView-Bildlaufansicht
Wenn der Inhalt, den wir anzeigen möchten, nicht vollständig im Anzeigebereich des Mobiltelefons angezeigt werden kann, können wir die Verwendung der Scroll-Ansicht in Betracht ziehen. Ich glaube, dass jeder bei der Verwendung von Mobiltelefonen häufig auf die Scroll-Ansicht stößt. Der Code lautet wie folgt: Die Bildlaufansicht ist in horizontales Scrollen (HorizontalScrollView) und vertikales Scrollen (ScrollView) unterteilt.
Bei Verwendung des horizontalen Bildlaufs wird das Attribut width auf wrap_content gesetzt, sodass mehr anzuzeigende Dinge in horizontaler Richtung platziert werden können und der Inhalt durch Bildlauf angezeigt werden kann. Der horizontalen Bildlaufansicht wird ein lineares Layout hinzugefügt, das dieser entsprechen sollte, und die Richtung ist horizontal (das Ausrichtungsattribut wird nicht geschrieben, der Standardwert ist horizontal). Dem linearen Layout werden zwei TextViews hinzugefügt und die Breite auf 300 dp eingestellt. Dies führt dazu, dass die beiden horizontal verteilten Module den Umfang des Bildschirms überschreiten, sodass sie durch Scrollen der Ansicht angezeigt werden können.
Beim vertikalen Scrollen wird die Höhe auf „wrap_content“ festgelegt, sodass mehr anzuzeigende Dinge in vertikaler Richtung platziert werden können. Beachten Sie, dass das darin enthaltene lineare Layout seine Anordnungsrichtung auf vertikal einstellen muss.
<?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. Zusammenfassung
Durch das Studium dieses Kapitels haben wir drei häufig verwendete Layouts und eine Bildlaufansicht gemeistert: lineares Layout von LinearLayout, relatives Layout von RelativeLayout, Rasterlayout von GridLayout und Bildlaufansicht von ScrollView.