1. Diseño lineal LinearLayout
Disposición lineal, es decir, cada módulo se dispone de forma horizontal o vertical. Después de estudiar los capítulos anteriores, todos están más o menos familiarizados con el diseño lineal y creo que todos pueden entender el siguiente código. El diseño lineal más externo contiene dos diseños lineales.
layout_width y layout_height representan el ancho y el alto del diseño lineal;
match_parent y wrap_content indican respectivamente que coinciden con el ancho y el alto del diseño superior y que coinciden con el ancho y el alto del contenido en el módulo, es decir, el contenido se puede mostrar por completo.
La orientación representa el método de distribución del diseño lineal, la vertical representa la disposición vertical y la horizontal representa la horizontal. Si este atributo no está escrito, el valor predeterminado es el modo de disposición horizontal.
<?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>El diseño lineal vertical más externo contiene dos diseños lineales, uno dispuesto horizontalmente y otro verticalmente, con dos contenidos de visualización TextView definidos dentro de ellos. En el diseño horizontal, defina el ancho de los dos TextView como 0dp y luego defina el peso diseño_peso como 1, de modo que los dos TextView asigne el ancho de acuerdo con el peso, es decir, 1/(1+1) =1/2, de El efecto también se puede ver ya que el ancho se divide equitativamente entre los dos módulos. En el diseño vertical, la altura de los dos TextView se define como 0dp, y los pesos de uno son 1 y el otro son 2, por lo que se distribuirán según los pesos 1/(1+2) y 2/ (1+2) alto. La representación se muestra a continuación.
2. Diseño relativo de RelativeLayout
El diseño relativo representa la posición relativa entre módulos, como la alineación izquierda, la alineación derecha, el medio, etc. de un módulo en relación con el nivel anterior, o la alineación izquierda, la alineación derecha, la parte superior o la posición relativa de un módulo con respecto a otro módulo. en.
Hay muchos atributos, simplemente enumeraré algunos aquí y usted mismo podrá entrenar el resto.
<?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>En el código anterior, se define un diseño relativo (RelativeLayout) y se definen tres TextViews en el diseño, que están ubicados en el centro, el centro horizontal y el centro vertical del nivel anterior (es decir, diseño relativo). El efecto se muestra a continuación. Por lo tanto, para definir una determinada posición relativa de un módulo con respecto a la vista de nivel superior, defina este atributo como verdadero.
<?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>Como se muestra en el código anterior, se muestra la posición relativa de un módulo con respecto a otro módulo. Primero, se define un módulo (centroinparente) para que esté ubicado en el centro del diseño relativo, mientras que otros módulos se ubican con respecto al módulo central. , como por ejemplo a su lado derecho, alineación superior derecha, alineación inferior izquierda, alineación superior izquierda. El efecto se muestra a continuación. Entre ellos, para definir la posición relativa de un determinado módulo, asigne el atributo correspondiente a la identificación de un determinado módulo, como ("@id/centerinparent").
Para hacer referencia a un módulo, use @id/ y para agregar una identificación, use @+id/
3. Diseño de cuadrícula GridLayout
El diseño de cuadrícula, al igual que la cuadrícula de Excel, define algunas filas y columnas, y el contenido se organiza de acuerdo con la cuadrícula. El código es el siguiente, define el diseño de la cuadrícula y establece el número de filas de la cuadrícula (rowCount) y el número de columnas (rowCountcolumnCount). Recuerde: la distribución de la cuadrícula es de izquierda a derecha y de arriba a abajo.
<?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>Definimos 4 módulos TextView en la distribución de la cuadrícula y configuramos los pesos de las columnas para que a los módulos de cada fila se les asigne el ancho de acuerdo con el peso. Además, se establece la alineación de su contenido subordinado (gravedad="centro"). El efecto es el siguiente
Es posible que tenga curiosidad sobre qué sucederá si continúa agregando módulos, así que agreguemos otro módulo, como se muestra a continuación. Por lo tanto, cuando el número de módulos excede el número definido, automáticamente aumentará el número de filas de acuerdo con el número de columnas.
4. Vista de desplazamiento ScrollView
Cuando el contenido que queremos mostrar no se puede mostrar completamente dentro del área de visualización del teléfono móvil, podemos considerar usar la vista de desplazamiento. Creo que todos a menudo encuentran la vista de desplazamiento cuando usan teléfonos móviles. El código es el siguiente: la vista de desplazamiento se divide en desplazamiento horizontal (HorizontalScrollView) y desplazamiento vertical (ScrollView).
Cuando se utiliza el desplazamiento horizontal, su atributo de ancho se establece en wrap_content, de modo que se puedan colocar más cosas que deben mostrarse en la dirección horizontal y el contenido se pueda ver desplazándose. Se agrega un diseño lineal a la vista de desplazamiento horizontal, que debe corresponderle y la dirección es horizontal (el atributo de orientación no está escrito, el valor predeterminado es horizontal). Se agregan dos TextView al diseño lineal y el ancho se establece en 300 dp, lo que hace que los dos módulos distribuidos horizontalmente excedan el alcance de la pantalla, por lo que se pueden mostrar desplazándose por la vista.
Cuando se utiliza el desplazamiento vertical, su altura se establece en wrap_content, de modo que más cosas que deben mostrarse se puedan colocar en la dirección vertical. Tenga en cuenta que el diseño lineal debe establecer su dirección de disposición en vertical.
<?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. Resumen
A través del estudio de este capítulo, hemos dominado tres diseños de uso común y una vista de desplazamiento: diseño lineal LinearLayout, diseño relativo RelativeLayout, diseño de cuadrícula GridLayout y vista de desplazamiento ScrollView.