Layouts Android

Layouts en Android

Un layout en programación se refiere a la disposición o el diseño de un conjunto de elementos. En Android un layout representa un contenedor que ordena y gestiona el diseño de los elementos de la interfaz gráfica de un modo determinado. Estos contenedores pueden contener, a su vez, otros contenedores son configurados mediante un archivo xml (dentro del directorio layouts). Una de las características más importante es que permite organizar los elementos (botones, etiquetas, campos de texto...) manteniendo la misma apariencia en diferentes dispositivos y a distintas resoluciones.

LinearLayout

Es uno de los layouts más fáciles y utilizados, permite orientar los elementos en dirección horizontal o vertical. Dispone del atributo orientation que permite asignar el valor, en el caso de horizontal los elementos se muestran de izquierda a derecha, en el caso vertical se van apilando de arriba hacia abajo y siempre en el orden que aparecen.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="//schemas.android.com/apk/res/android"
  3. xmlns:app="//schemas.android.com/apk/res-auto"
  4. xmlns:tools="//schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:orientation="vertical"
  8. tools:context="com.xip.com.miAplicacion.MainActivity">
  9. <EditText
  10. android:id="@+id/texto"
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content"
  13. android:hint="dato a guardar"/>
  14. <Button
  15. android:id="@+id/shared"
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. android:text="Guardar"
  19. />
  20. </LinearLayout>

RelativeLayout

Este layout se caracteriza porque los elementos se posicionan en relación a otros elementos. Mediante atributos permite indicar la posición  respecto a otro elemento, ya sea, al mismo nivel o a un elemento padre. Este layout puede tener pequeñas variaciones en distintas resoluciones.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="//schemas.android.com/apk/res/android"
  3. xmlns:app="//schemas.android.com/apk/res-auto"
  4. xmlns:tools="//schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context="xip.recetapp.com.crudandroid.MainActivity">
  8. <Button
  9. android:id="@+id/botonCrearAlumnos"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_alignParentTop="true"
  13. android:layout_centerHorizontal="true"
  14. android:layout_marginTop="79dp"
  15. android:text="Crear Alumnos" />
  16. <TextView
  17. android:id="@+id/contador"
  18. android:layout_width="fill_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_alignParentLeft="true"
  21. android:layout_alignParentStart="true"
  22. android:layout_below="@+id/botonCrearAlumnos"
  23. android:layout_marginTop="19dp"
  24. android:gravity="center"
  25. android:text="En este momento no hay alumnos" />
  26. </RelativeLayout>

FrameLayout

Ubica siempre los elementos en la parte superior izquierda y aunque dispone de padding y permite contener otros layouts que permiten el atributo padding generalmente se recomienda su uso para un único elemento.

  1. <LinearLayout
  2. android:orientation="vertical"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:weightSum="10"
  6. >
  7. <include
  8. android:id="@+id/toolbar"
  9. layout="@layout/toolbar"/>
  10. <FrameLayout
  11. android:id="@+id/fragment"
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent" >
  14. </FrameLayout>
  15. </LinearLayout>

MATCH PARENT Y WRAP CONTENT

Existen dos atributos genéricos que permiten indicar el ancho y el alto (width y height) de casi todos los elementos. Estos atributos puede contener un valor específico de porcentajes o un valor genérico de los dos existentes: match_parent y wrap_content.

El valor match parent o fill parent en versiones anteriores de Android indica que hereda el ancho del elemento padre que en caso de ser el primer elemento se considera que hereda el ancho total del dispositivo.

El valor wrap content indica que el ancho es proporcional al contenido de dicho elemento.

ORIENTACIÓN

La orientación de pantalla en Android se divide en dos tipos: Portrait y Landscape, Portrait está representado por el dispositivo en forma vertical y Landscape en forma horizontal. Generalmente en los dispositivos móviles prevalece mayoritariamente el tipo de orientación portrait mientras que tablets y otros dispositivos no mantienen una orientación fija mayoritaria. 

Los dispositivos disponen de sensores que detectan la orientación en que se encuentran. Por defecto, Android  mantiene el uso de una orientación variable pero existe la opción de configurar una orientación fija

Para mantener una orientación fija es necesaria la configuración desde el archivo manifest del proyecto mediante el atributo screenOrientation. Puede ser recomendable la ayuda del atributo configChanges que permite ocultar el teclado al detectar un cambio de orientación del dispositivo.

  1. <activity
  2. android:name=".MainActivity"
  3. android:screenOrientation="portrait"
  4. android:configChanges="orientation|keyboardHidden"
  5. >
  6. <intent-filter>
  7. <action android:name="android.intent.action.MAIN" />
  8. <category android:name="android.intent.category.LAUNCHER" />
  9. </intent-filter>
  10. </activity

Además, Android también ofrece la posibilidad de mantener un mismo layout para los dos tipos de orientación o disponer de un layout independiente en cada caso.

La configuración de un layout independiente se realiza mediante la creación de un directorio con el nombre layout-land en el mismo nivel del directorio layout y en su interior los archivos xml correspondientes que no tienen porque mantener los mismos elementos, es decir, pueden ser totalmente distintos el layout de la orientación vertical (portrait) y el layout de la orientación horizontal(lanscape).

Comentarios: 0

Para poder comentar es necesario iniciar sesión



Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso