Diseño de la interfaz de usuario¶

Los dispositivos móviles tienen recursos limitados (memoria, batería, CPU).
El sistema puede cerrar procesos en cualquier momento para liberar recursos.
Los componentes pueden iniciarse de forma individual y en desorden.

No almacenar estado crítico dentro de los componentes

- Usa `ViewModel`, almacenamiento persistente o `onSaveInstanceState`.  
- Los componentes deben ser lo más **independientes** posible.

Vistas¶

Un diseño (layout) define la estructura de la IU en Android, por ejemplo, dentro de una Activity.

Los elementos del diseño se crean en una jerarquía de Views:
- View: elemento visual interactivo (ej. botón, texto).
- ViewGroup: contenedor invisible que organiza otras Views o ViewGroups.

Los objetos View se denominan "widgets" y pueden ser una de muchas subclases, como Button o TextView. Los objetos ViewGroup se denominan "diseños" y pueden ser uno de los muchos tipos que proporcionan una estructura de diseño diferente, como LinearLayout o ConstraintLayout .

Diseños en XML¶

Los diseños se declaran en archivos .xml dentro de res/layout/.
Los atributos layout_* definen cómo se coloca una vista dentro de su contenedor.
Cada ViewGroup implementa una clase anidada LayoutParams que determina:
- Ancho y alto (layout_width, layout_height) → obligatorios.
- Márgenes y bordes → opcionales.

<?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>

Después de declarar tu diseño en XML, guarda el archivo con el .xml en el archivo res/layout/ de tu proyecto de Android para que se compile correctamente. Cuando compilas tu aplicación, cada archivo XML de diseño se compila en un recurso View. Carga el recurso de diseño en el archivo Activity.onCreate() implementación de devolución de llamada. Para ello, llama al setContentView(), y pasarle la referencia a tu recurso de diseño de la siguiente forma: R.layout.layout_file_name Por ejemplo, si tu archivo XML el diseño se guardó como main_layout.xml, cárgalo para tu Activity de la siguiente manera:

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Para obtener más información sobre la sintaxis de un archivo en formato XML de diseño, consulta la sección Recurso de diseño.

Buenas prácticas¶

Cada vista debe definir al menos layout_width y layout_height.
Mantener la jerarquía de vistas simple y poco profunda:
- Mejor una jerarquía ancha que una jerarquía muy profunda.
- Mejora el rendimiento en el renderizado.

Recomendaciones

Se recomienda usar paddingStart, paddingEnd, layout_marginStart y layout_marginEnd en lugar de paddingLeft, paddingRight, layout_marginLeft y layout_marginRight, ya que se comportan mejor con ambos de escritura de izquierda a derecha y de derecha a izquierda.

Tipos comunes de ViewGroup¶

LinearLayout → organiza elementos en filas o columnas.
RelativeLayout → organiza elementos en relación unos con otros o con el contenedor.
WebView → muestra contenido web dentro de la aplicación.

Actividades¶

AC 203 (RA1 / CE1a / IC1 / 1p) Crea y analiza diferentes jerarquías de vistas en Android usando el editor XML y realiza las siguientes acciones:
1. En Android Studio, crea un nuevo proyecto vacío.
2. Diseña en activity_main.xml un layout con 5 botones colocados uno debajo del otro. Hazlo de dos maneras distintas:
  - Opción A: anidando varios LinearLayout verticales.
  - Opción B: con un único LinearLayout vertical que contenga directamente los 5 botones.
    1. Ejecuta la app en el emulador y observa el resultado (visual, no hace falta programar la lógica).
    2. Responde:
  - ¿Qué diferencias hay en el archivo XML entre la opción A y la B?
  - ¿Cuál crees que se renderiza más rápido y por qué?
AC 204 (RA1 / CE1a / IC1 / 1p) Diseña un formulario simple en Android con distintos tipos de vistas para ello:
1. En Android Studio, crea un nuevo layout activity_login.xml.
2. Diseña un formulario de inicio de sesión que contenga:
  - Un TextView como título: "Iniciar sesión".
  - Un EditText para el nombre de usuario.
  - Un EditText para la contraseña.
  - Un Button para enviar.
3. Organiza el formulario con un LinearLayout vertical y usa layout_width, layout_height y layout_margin para espaciar los elementos.
4. Ejecuta el diseño en el emulador y ajusta propiedades básicas (ej. hint en los campos de texto).