Desarrollando aplicaciones - Definiendo tu pantalla con XML

Documento original: Designing Your Screen in XML

Definiendo tu pantalla con XML

[Título original: Designing Your Screen in XML]

Debido a que el diseño de una pantalla a través de código puede resultar muy engorroso, Android soporta una sintaxis XML para diseñar pantallas. Android define un gran número de elementos especialmente hechos para la plataforma, cada uno de ellos representando una subclase específica de Android View. Tú puedes diseñar tu pantalla de la misma forma en la que tú crear archivos HTML, es decir, como una serie de etiquetas anidades y guardadas en un archivo XML dentro del directorio "res/layout/" de tu aplicación. Para aprender qué elementos son expuestos y el formato del archivo XML lee el documento "Available Resource Types" y en especial la sección "Layout Resources". Cada etiqueta describe un único elemento "android.view.View", pero este elemento puede ser un simple elemento visual o un elemento de esquema que contiene una colección de objetos hijos (una pantalla o una porción de ella). Cuando Android compila tu aplicación, compila cada archivo en un "android.view.View" recurso que tú puedes cargar en tu código llamando al método "setContentView(R.layout.layout_file_name)" dentro de la implementación que hagas del método "onCreate()" de tu "Activity".

Cada archivo XML esta formado por etiquetas que corresponden a clases GUI de Android. Estas etiquetas tienen atributos que en su mayoría corresponden a métodos en esa clase (por ejemplo, la etiqueta "EditText" tiene un atributo de texto que corresponde al método "setText()" de la clase "EditText").

NOTA: No existe una correspondencia exacta entre nombres de clase/métodos y nombres de etiquetas/atributos. Son parecidos por no 1:1

NOTA: Android tiende a dibujar los elementos en el orden en el cual aparecen en el documento XML. Por lo tanto, if hay elementos que se sobreponen, el último en el archivo será probablemente el que aparezca sobre cualquier otro que esté previamente declarado en su mismo espacio.

Cada archivo XML es compilado dentro de un árbol que tiene como raíz un objeto "View" o "ViewGroup", por lo tanto debe tener una sola etiqueta raíz.

Los atributos llamados "layout_algo" modifican el miembro "algo" del objeto "LayoutParams". El documento "Layout Resources" también describe cómo aprender la sintaxis para algunas propiedades específicas de "LayoutParams".

Los siguientes valores son soportados para dimensiones (descritos en "TypedValue").

dip (pixeles independientes del dispositivo)

sp (pixeles escalados - mejor opción para tamaño de texto)

pt (puntos)

in (pulgadas)

mm (milimetros)

px (pixeles)

Ejemplo: android:layout_width="25px"

Para más información sobre estas dimensiones, ver "Dimension Values".

El siguiente archivo XML crea la pantalla que es mostrada debajo de él. El texto en el borde superior fue dibujado llamando al método "setTitle()" de la clase "Activity". Los atributos que se refieren elementos relativos ("layout_toLeft") hacen uso del ID del elemento usando la sintaxis de recursos relativos ("@id/id_number").

<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstrates using a relative layout to create a form -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content"
 android:background="@drawable/blue"
 android:padding="10px">

    <TextView id="@+id/label" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  android:text="Type here:"/>

    <EditText id="@+id/entry" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  android:background="@android:drawable/editbox_background"
  android:layout_below="@id/label"/>
  
    <Button id="@+id/ok" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_below="@id/entry"
  android:layout_alignParentRight="true"
  android:layout_marginLeft="10px"
  android:text="OK" />

    <Button android:layout_width="wrap_content" 
  android:layout_height="wrap_content"
  android:layout_toLeft="@id/ok"
  android:layout_alignTop="@id/ok"
  android:text="Cancel" />
</RelativeLayout>

Figura:http://code.google.com/android/images/designing_ui_layout_example.png

Cargando los recursos XML

[Título original: Loading the XML Resource]

Cargar y compilar los recursos del esquema de tu pantalla es muy sencillo y es hecho en un simple llamado dentro método "onCreate()", tal como se muestra a continuación:

protected void onCreate(Bundle savedValues)
{
   // Be sure to call the super class.
   super.onCreate(savedValues);

   // Load the compiled layout resource into the window's
   // default ViewGroup.
   // The source file is res/layout/hello_activity.xml
    setContentView(R.layout.hello_activity);
  
   // Retrieve any important stored values.
   restoreValues(savedValues);
}