Componentes / Controles en Android (GUI Widgets)

En este post explicaremos algunos componentes de la interfaz llamados también GUI Widgets o controles. Componentes de este tipo serían por ejemplo: cajas de texto, botones, calendarios... Los widgests se pueden insertar en los diferentes layouts que explicamos en el post anterior.

Los componentes estarán disponibles en la barra de herramientas del diseñador de Eclipse. Cada componente estará asociado a una clase Java disponible en la documentación JavaDoc.

Entre los más usados se encuentran los siguientes controles:

• Botón: android.widget.Button
• Calendario: android.widget.CalendarView
• CheckBox: android.widget.CheckBox
• Selección de fechas: android.widget.DatePicker.
• Caja de texto: android.widget.EditText
• Botón con imagen: android.widget.ImageButton
• Image: android.widget.ImageView
• Información de progreso: android.widget.ProgressBar
• RadioButton: android.widget.RadioButton
• Menú desplegable: android.widget.Spinner
• Etiqueta de texto: android.widget.TextView

Cada widget contiene sus propios atributos y eventos, por ejemplo, el widget botón tiene, entre otras, una propiedad para establecer el texto del botón así como un evento de pulsación mientras que el widget caja de texto puede establecer mediante la propiedad inputType el tipo de entrada que permite introducir (numérico, fecha, email...).

Un ejemplo común de un widget en marcación xml sería por ejemplo:

<Button
                android:id="@+id/dummy_button"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Enviar" />

Layouts en android o cómo organizar los componentes en la pantalla

Existen multitud de tipos de layouts para ordenar los componentes en una pantalla. A continuación explicaremos algunos de los más comunes:

• LinearLayout: consiste en agrupar los elementos uno detrás de otro de forma horizontal o vertical.
• TableLayout: este layout permite agrupar los elementos en una tabla que contiene filas y columnas.
• RelativeLayout: los elementos se ubican dada una posición relativa de otro elemento del mismo layout.
• FrameLayout: ubica todos los elementos alineados sobre la esquina superior izquierda de manera que unos controles quedarán encima de otros.
• ScrollView: se puede utilizar cuando el número de componentes de una pantalla se desborda y es necesario un scroll vertical.

Todas estas clases heredan de la clase View o ViewGroup. De esta manera heredarán a su vez una serie de propiedades comunes:

• layout_width: anchura
• layout_height: altura
• layout_marginTop: margen superior
• layout_marginBottom: margen inferior
• layout_marginLeft: margen izquierdo
• layout_marginRight: margen derecho
• layout_gravity: orientaciones vertical y horizontal del elemento
• layout_weight: peso
• layout_x: coordenada x donde ubicar el elemento
• layout_y: coordenada y donde ubicar el elemento

La manera de utilizar estos layouts será mediante marcación XML en el fichero layout correspondiente a cada actividad. Por ejemplo:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".FullscreenActivity" >

    <!--
         The primary full-screen view. This can be replaced with whatever view
         is needed to present your content, e.g. VideoView, SurfaceView,
         TextureView, etc.
    -->

    <TextView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:keepScreenOn="true"
        android:text="@string/dummy_content"
        android:textColor="#33b5e5"
        android:textSize="50sp"
        android:textStyle="bold" />

    <!--
         This FrameLayout insets its children based on system windows using
         android:fitsSystemWindows.
    -->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true" >

        <LinearLayout
            android:id="@+id/fullscreen_content_controls"
            style="?buttonBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:background="@color/black_overlay"
            android:orientation="horizontal"
            tools:ignore="UselessParent" >

            <Button
                android:id="@+id/dummy_button"
                style="?buttonBarButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/dummy_button" />
        </LinearLayout>
    </FrameLayout>

</FrameLayout>

Qué son las actividades en el desarrollo de aplicaciones en android

Una actividad es una pantalla que en algún momento podrá ser visualizada por el usuario. Una aplicación en android tendrá entre 1 a N actividades.

Es en una actividad (pantalla) donde se colocarán los diferentes componentes como son los controles: caja de texto, botón, cuadros de selección (checkbox), listas desplegables...

Cuando creamos un nuevo proyecto android desde eclipse entre otras cosas tendremos la opción de indicarle cual será el nombre de la actividad principal (pantalla de inicio) desde la cual se arrancará nuestra aplicación.

Cada una de las pantallas que creemos deberán extender a la clase Activity. Si nos fijamos al extender esta clase también podremos sobreescribir algunos de sus métodos entre ellos está el siguiente:

• OnCreate, se ejecutará al iniciar la aplicación. En este método se suele iniciar el layout o clase que contiene el diseño de la pantalla.

 setContentView(R.layout.mi_actividad);

 En posteriores posts hablaremos del ciclo de vida de las actividades.