Noticia Vistas en Android

Todos los elementos que aparecen en la pantalla de una aplicación de Android son vistas. Desde los elementos sueltos como textos o botones, a los contenedores como los grupos de vistas. Este tema es bastante complejo por la cantidad de detalles que intervienen, y para explorar las posibilidades disponibles más a fondo, es muy recomendable acudir a la documentación oficial. En este tutorial analizaremos los elementos más socorridos, incluyendo grupos de vistas y algunos elementos básicos.

Grupos de vistas

• LinearLayout
  • Agrupa los elementos en una sola línea, que puede ser vertical u horizontal.
• RelativeLayout
  • Los elementos se disponen en relación entre ellos y los márgenes. Es la más flexible, y la más utilizada.
• ScrollView
  • Se utiliza para vistas que no caben en pantalla. Sólo puede contener una vista o grupo de vistas, y añade automáticamente las barras de desplazamiento.
• TableLayout
  • Agrupa los elementos en filas y columnas. Contiene elementos TableRow, que a su vez contienen los elementos de cada celda.
• FrameLayout
  • Está pensada para contener una sola vista. Si se añaden más, todas se alinean en la esquina superior izquierda, solapándose.
• AbsoluteLayout
  • Está desaprobado desde la versión 1.5 de Android. En este contenedor, los elementos se referencian con coordenadas absolutas partiendo de la esquina superior izquierda. Se ha desaprobado porque no se adapta a pantallas de diferentes tamaños, que se popularizaron justamente a partir de Android 1.5.

Para una aplicación sencilla, los grupos más interesantes para ver en detalle son LinearLayout, RelativeLayout, y ScrollView. Por ejemplo, podemos hacer una LinearLayout vertical conteniendo textos, y otra horizontal con botones:

<?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" <strong>androidrientation="vertical"</strong> > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Texto 1" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Texto 2" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Texto 3" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Texto 4" /> </LinearLayout>


<?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”
androidrientation=”horizontal” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Botón 1″ />
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Botón 2″ />
<Button
android:id=”@+id/button3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Botón 3″ />

</LinearLayout> Una ScrollView se puede componer de forma muy fácil, sólo tiene que envolver al contenedor que debe escrolar: <ScrollView


Por último, una RelativeLayout es el contenedor más versátil y poderoso, aunque también uno de los más complicados de manejar. No tocaremos aquí todas las opciones porque son demasiadas. Para una referencia más detallada acudiremos a la documentación oficial. Un ejemplo sencillo sería el siguiente: dos botones en la misma horizontal, uno con el tamaño del texto que contiene, y el otro se expande para ocupar el resto de la fila:

<?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="match_parent" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Botón 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/button1" android:text="Botón 2" /> </RelativeLayout>

En este ejemplo, el primer botón se alinea con el margen izquierdo y superior del contenedor, y el botón 2 se alinea con el margen superior, el derecho, y a la derecha del botón 1.

Vistas

• TextView
  • Muestra un texto fijo.
• EditText
  • Contiene un texto editable.
• Button
  • Botón simple.
• ImageButton
  • Este botón permite mostrar una imagen en vez de un texto
• ToggleButton
  • Botón que puede mantener su estado de pulsado hasta que se pulsa otra vez.
• CheckBox
  • Botón similar a ToggleButton que funciona como una caja de verificación.

Ya hemos visto antes cómo funciona un TextView, ya que sólo debe incluir un texto. En la documentación oficial podemos encontrar opciones más avanzadas como variar la fuente, el tamaño del texto, el color, y muchas más.

Más interés tienen los botones, ya que de alguna forma tenemos que asociarles una acción. Vamos a ver dos formas. En una, asociamos directamente la acción en el código de nuestra actividad:


Button button = (Button) findViewById(R.id.button1); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { DisplayToast(“Has pulsado el botón”); } });

Aquí la clave es el id que le hemos dado al elemento en el fichero XML, lo necesitamos para localizarlo en el código. Con él, podemos asociarle la acción que necesitemos. Otra alternativa sería incluir en el XML del botón el elemento “androidnClick=”btnClicked” , y luego añadir directamente en el código de la actividad el método con el nombre indicado:

public void onClick(View v) { DisplayToast(“Has pulsado el botón”); }

Para un CheckBox o un ToggleButton podemos hacer algo similar al primer método. Obtenemos la referencia a través de findViewById, y aplicamos el siguiente fragmento:

button.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) DisplayToast(“Has activado el botón”); else DisplayToast(“Has desactivado el botón”); } });

El artículo Vistas en Android ha sido originalmente publicado en Androidsis.











Continúar leyendo...