Guía práctica del layout LinearLayout para aplicaciones Android

Introducción a LinearLayout en el desarrollo móvil

El layout LinearLayout representa una herramienta fundamental para organizar componentes de interfaz en aplicaciones Android, permitiendo la disposición secuencial de vistas en direcciones específicas. Su implementación sencilla facilita la creación de diseños básicos tanto para desarrolladores novatos como experimentados, aunque es importante considerar alternativas como ConstraintLayout para estructuras más complejas que requieran mayor rendimiento.

Características esenciales del LinearLayout

Este tipo de layout opera bajo el principio de organización lineal, donde los elementos hijos se disponen en secuencia sin considerar relaciones posicionales relativas entre ellos, a diferencia de otros layouts como RelativeLayout.

Propiedades clave de configuración

Dirección de disposición: La propiedad android:orientation determina si los elementos se alinean horizontal o verticalmente.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!-- componentes hijos -->
</LinearLayout>

Alineación de contenido: Mediante android:gravity se controla la posición de los elementos hijos dentro del contenedor, habilitando opciones como center para centrado o start para alineación inicial.

Distribución proporcional: La combinación de layout_width o layout_height con valor 0dp junto a layout_weight permite asignar espacios proporcionales a las vistas. En el siguiente ejemplo, dos componentes de texto comparten equitativamente el ancho disponible:

<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="Elemento 1"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Elemento 2"/>
</LinearLayout>

Ejemplos de implementación

Disposición vertical básica

Este esquema muestra una estructura simple con elemnetos alineados verticalmente y centrados en pantalla:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/contenedor_principal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <Button
        android:id="@+id/boton_accion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Acción Principal"
        android:layout_marginBottom="12dp"/>

    <Button
        android:id="@+id/boton_secundario"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Acción Secundaria"
        android:layout_marginBottom="12dp"/>

    <TextView
        android:id="@+id/etiqueta_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bienvenido al sistema"/>
</LinearLayout>

Distribución equitativa de espacio

Utilizando pesos para la asignación proporcional, este layout horizontal divide el ancho disponible entre tres botones:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/contenedor_botones"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center">

    <Button
        android:id="@+id/opcion_alfa"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Alfa"
        android:layout_marginEnd="4dp"/>

    <Button
        android:id="@+id/opcion_beta"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Beta"
        android:layout_marginStart="4dp"
        android:layout_marginEnd="4dp"/>

    <Button
        android:id="@+id/opcion_gamma"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Gamma"
        android:layout_marginStart="4dp"/>
</LinearLayout>

Combinación de layouts anidados

Para crear interfaces más complejas, es posible anidar múltiples LinearLayout con diferentes orientaciones:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/contenedor_mezclado"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn_superior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Superior"
            android:layout_marginBottom="6dp"/>
        <Button
            android:id="@+id/btn_inferior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Inferior"/>
    </LinearLayout>

    <Button
        android:id="@+id/btn_lateral"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Lateral"/>
</LinearLayout>

Este diseño presenta un panel vertical con dos botones apilados junto a un botón horizontal, demostrando la flexibilidad de los layouts aindados.

Etiquetas: Android LinearLayout XML layout interfaz de usuario móvil disposición de vistas

Publicado el 5-30 08:30