Vistas en Android

guia-basica-programacion-android-4

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"
    android:orientation="vertical">
    <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>

vistas-en-android-1

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

vistas-en-android-2Una ScrollView se puede componer de forma muy fácil, sólo tiene que envolver al contenedor que debe escrolar:

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    <...>
</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>

vistas-en-android-3En 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 “android:onClick=”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”);
    }
});
Ofertas en móviles y smartwatches
¿Buscas móvil nuevo o un smartwatch? No te pierdas estas ofertas! Podrás escoger tu móvil según el precio, tamaño de pantalla o marca para que escojas el que mejor se adapta a tus necesidades.
Móviles libres de ofertaSmartwatches

Categorías

Tutoriales

Victor González

Un verdadero trotamundos, he vivido en más de seis ciudades diferentes pero me quedo con Barcelona. Escritor, gran aficionado a las maquetas,... Ver perfil ›

8 comentarios

  1.   CHIVA dijo

    Hola perras mi nombre es el chivo
    quiero cojer con el ivan

  2.   El cubano dijo

    Que bonita vecindad que bonita vecindad es la vecindad del nigga no valdra ni un centavo pero esta enlodada

  3.   PIOJO dijo

    Quiero cojer con el chuy

  4.   HAIDE dijo

    Como le ago para instalar un apk? Urgente!!

    1.    Francisco Ruiz dijo

      Coges el archivo apk y lo copias a la sdcard o memoria interna del terminal en qué decides instalar. Luego, con cualquier explorador de archivos entras en la ruta donde lo has pegado y clickando en él se ejecutará automáticamente. si te devuelve una ventanita con un botón que pone ajustes deberás clicar en él para activar los permisos para poder instalar aplicaciones de orígenes desconocidos.

  5.   ludovico dijo

    srs. Cual es el significado de la simbología de Android?
    L

  6.   TUGFA dijo

    TU GFA TIENE UN PITOTE DE 20 metros y LA CHIVA se la come a sentones

  7.   damian dijo

    la parte que dice
    public void onClick(View v) {
    DisplayToast(“Has pulsado el botón”);
    }
    deberia ser
    public void btnClicked(View v) {
    DisplayToast(“Has pulsado el botón”);
    }

Escribe un comentario