Diseño de Interfaz de Usuario Android: Botones Básicos

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Este tip rápido le muestra los pasos para crear un simple Botón o control ImageButton en su aplicación Android. Primero aprenderá cómo añadir controles de botones a la composición de sus archivos. Después, aprenderá a cómo controlar los clic de los botones de parte de los usuarios en dos formas diferentes. Finalmente, discutiremos algunas de las otras funciones disponibles de controles de botones en Android.

Paso 1: Crear una Aplicación Android

Comience por crear un proyecto Android. Implemente su aplicación Android como normal. Una vez que tenga configurado un proyecto y ejecutando la aplicación, decide bajo cual pantalla quiere añadir los controles de Botones. Quizás simplemente haya creado un nuevo proyecto Android con su Activity por defecto y su composición (main.xml). Este funcionará para este tutorial. Una vez que tenga su proyecto Android configurado, usted está listo para proceder con éste tip rápido.

Puede seguir junto con nuestro proyecto: BasicButtons, el cual está disponible como un proyecto de acceso abierto.

Paso 2: Trabajar con Controles de Botones

Android SDK incluye dos simples controles de botones para usar dentro de sus layouts: Button (android.widget.Button) y ImageButton (android.widget.ImageButton). Estos controles funcionan de forma similar así que podemos discutirlos prácticamente de forma intercambiable. La mayor diferencia entre los controles es visual, el control Botton tiene una etiqueta de texto, mientras que ImageButton usa un recurso de imagen en su lugar. Un buen ejemplo del uso de Button sería un botón con una etiqueta de texto "Guardar". Por otro lado, un buen ejemplo del uso de ImageButton sería un conjunto de botones musicalmente inspirado con los símbolos de Play(),Pause(),y Stop ().

Aquí está un ejemplo de una pantalla con los dos, el control Button (izquierda) y el control ImageButton (a la derecha).

Android SDK, también incluye varios botones menos conocidos como son los controles derivados de parte de estos dos tipos de controles básicos, incluyendo: CompoundButton, RadioButton, ToggleButton y ZoomButton. Para más información sobre estos controles, vea la documentación Android. Además, puede crear controles personalizados usted mismo encontrando la clase apropiada e implementando las funciones de los controles.

Paso 3: Añadiendo un Control Button a un Layout

Los controles Buttons, por lo general, están incluidos como parte de su archivo layout resource del Activity. Por ejemplo, para añadir un control Button al archivo layout resource: main.xml, asociado con su aplicación, entonces debe editar el archivo layout. Puede hacer esto dentro de Eclipse usando el diseñador Layout Resource o mediante XML directamente. Los controles tales como los botones, también pueden ser creados por medio de programación y añadiendo a sus pantalla en tiempo de ejecución. Sencillamente, genere el control apropiado desde su clase y añadalo a su layout dentro de su Activity.

Para añadir un control Button a su archivo layout resource, abra el archivo layout: /res/layout/main.xml, que es parte de su proyecto Android. Haga clic sobre el LinearLayout (o el control parent layout, tal como un RelativeLayout o FrameLayout) que usted desee agregar el control Button. En Eclipse, puede hacer clic en el parent layout dentro de la pestaña Outline y luego, añadir un nuevo control usando el botón verde con el signo más. Seleccione el control que desea agregar —en este caso, un control Button.

Para configurar como se ve el control Button, ajuste las propiedades del control seleccionando el control (ya sea en la pestaña Outline o en la ventana Preview) y cambie sus propiedades en la pestaña Properties. Especifique las propiedades que desearía tener en cuenta.

De al control Button o ImageButton un nombre único usando la propiedad ID.
Ajuste el texto mostrado en el control Button usando la propiedad de texto, ajuste la imagen mostrada en el control ImageButton usando la propiedad src.
Ajuste las propiedades altura del layout y la anchura del control para wrap_content.
Ajuste cualquier otra característica que desee para ajustar la apariencia del control. Por ejemplo, ajuste la fuente del Button usando el color de Texto, el tamaño de texto, y las propiedades de estilo.

Aquí está el contenido del archivo layout resource usado para generar la pantalla mostrada en la sección anterior. Contiene tres controles. RelativeLayout organiza los controles en la pantalla, es decir, los dos controles child, un Button y un ImageButton, como se muestra aquí:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center">
    <Button
        android:id="@+id/Button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello"
        android:minHeight="92dp"
        android:textSize="22dp"
        android:onClick="onMyButtonClick"></Button>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/skater"
        android:id="@+id/ImageButton01"
        android:layout_toRightOf="@+id/Button01"></ImageButton>
</RelativeLayout>

Paso 4: Controlando los Clics — La formas más fácil

Por ahora, si ejecuta esta aplicación, los controles de botones están mostrados, pero nada ocurre si hace clic sobre ellos. Ahora es el momento de manejar los clic sobre los controles. Hay varias maneras de hacer esto.

Empecemos con una manera fácil. Los controles Button e ImageButton tiene una propiedad llamada onClicks (mostrada como "On Click" en el panel propiedades). Usted ajusta el nombre del método que manejará el clic con esta propiedad y, después implementará ese método dentro de su Activity. Por ejemplo, usted podría ajustar la propiedad de su control Button a onMyButtonClick. En XML, esta propiedad aparecería como:

1
2	android:onClick="onMyButtonClick"

Después, en su clase Activity, usted necesitaría implementar este método. Debería ser un método: plublic void, con un solo parámetro; un objeto View. Por ejemplo, la siguiente implementación de botón clic genera un mensaje Toast en la pantalla cuando el control Button es pulsado:


public void onMyButtonClick(View view)
{
    Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();
}

Cuando usted hace clic sobre el Button, el método onMyButtonClick() es llamado, mostrando el mensaje Toas en la pantalla. Los detalles de lo que hará su control Button, dependen de usted. Aquí está como ser vería el mensaje Toast cuando usted presiona el control Button.

Paso 5: Manejando los Clics — Implementando un OnClickListener

La otra forma de implementar su manejo de clic es a través de resgistrar un nuevo: View.onClickListener con su control Button usando el método setOnClickListener(). En lugar de ajustar la propiedad On Click de su control Button en su layout resource para un método que usted debe implementar, usted hace esto por medio de la programación dentro de su Activity. Aunque esto podría parecer como un código extra a escribir, es importante entender al menos, que los clics no son los únicos eventos que valen manejar en ciertos controles. El método de programación que vamos a mostrarle se emplea en otros eventos tal como con clics largos.

Para usar este método, usted debe registrar su clase Activity para registrar los controles clics. Esto, por lo general, se hace dentro del método onCreate() de su Activity. Extraiga el control usando el método findViewById() y luego uselo en sus métodos setOnClickListener() para definir el funcionamiento del control que fue presionado. Necesitará implementar usted mismo el método onClick() de la interfaz. Por ejemplo, el siguiente código (colocado en el método onCreate() del Activity) registra un controlador clic para nuestro control ImageButton.


ImageButton myImageButton = (ImageButton) findViewById(R.id.ImageButton01);
myImageButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
                    Toast.makeText(BasicButtonActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show(); 
            }
});

De manera similar, usted puede usar esta técnica para implementar clic alejados usando el método setOnLongClickListener().

En conclusión

Los controles de Buttons son utilizados comúnmente en aplicaciones de interfaz de usuario Android. En este consejo rápido aprendió a cómo crear dos tipos diferentes de controles de botones Android: el Button y el ImageButton. Además, aprendió varias formas de implementar controladores de clic en botones para éstos tipos de controles.

Acerca de los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.