Android
3.BOTONES
Página 4 de 25
3. BOTONES
En Android los botones permiten interaccionar con las aplicaciones para realizar acciones.
3.1. Definición de un botón en el layout
Lo más simple es definir un botón dentro de un layout mediante:
<Button
android:id="@+id/myButton"
android:text="Boton"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
Este botón lo añadimos al fichero main.xml del ejemplo "Hola Android’’ que se modifica así:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myLinearLayout"
android:background="#ffffff"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/myTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
android:text="Hola Android"
/>
<Button
android:id="@+id/myButton"
android:text="Boton"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
Figura 3.1. Un botón simple.
La actividad principal “inflará” este botón junto con el layout. Por ejemplo:
public class Hello extends Activity implements
onClickListener {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView myTextView=
(TextView) findViewById(R.id.myTextView);
myTextView.setText("Ejemplo de botón");
}
El resultado se muestra en la figura 3.1. Nótese que en la primera linea hemos añadido a la clase Hello la propiedad:
implements OnClickListener
Esto es necesario para que la actividad "escuche los clicks’’ y responda al pulsar sobre el botón. Para que el botón responda a una acción primero debemos definir el botón como un objeto de tipo View asociado a su ID:
View boton=findViewById(R.id.myButton);
y luego definir a este botón como un "oyente’’ de clicks en nuestra actividad:
boton.setOnClickListener(this);
Para finalizar la implementación de la interfaz OnClickListener, debemos definir el método onClick()que contiene las instrucciones a seguir cuando se pulse el botón:
public void onClick(View v) {
myTextView.setText("Has pulsado el botón");
}
El ejemplo final quedaría así:
package prueba.android.hello;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
public class Hello extends Activity implements
OnClickListener{
/** Called when the activity is first created. */
TextView myTextView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myTextView=(TextView)findViewById(R.id.myTextView);
myTextView.setText("Ejemplo de botón");
View boton=findViewById(R.id.myButton);
boton.setOnClickListener(this);
}
public void onClick(View v) {
myTextView.setText("Has pulsado el botón");
}
Nótese que en el encabezamiento hemos incluido también las importaciones necesarias para que el programa funcione. Estas líneas generalmente las obviamos en nuestros ejemplos, porque el programa Eclipse nos informa y hace las importaciones necesarias, pulsando con el botón derecho del ratón sobre los nombres de los objetos que quedan subrayados en rojo en Eclipse.
Lo que hace el método onClick()es modificar el texto de myTextView, que hemos tenido que declarar fuera del método onCreate()como campo de la clase Hello para que esté definido en toda actividad, también en onClick()
TextView myTextView;
Al pulsar el botón se ejecuta el método onClick()que redefine el texto de myTextView, "has pulsado el botón", como se ve en la figura 3.2.
Figura 3.2. El texto cambia tras pulsar el botón.
3.2. Caso de dos botones
Para añadir un segundo botón basta definirlo en main.xml a continuación del primero.
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/myTextView"
android:textColor="#000000"
android:textSize="12sp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hola Android"
/>
<Button
android:text="Boton 1"
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
<Button
android:text="Boton 2"
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
Igual que en el caso de un botón, hay que definir cada uno de los dos botones como "escuchador" mediante setOnClickListener().
View boton1=findViewById(R.id.button1);
boton1.setOnClickListener(this);
View boton2=findViewById(R.id.button2);
boton2.setOnClickListener(this);
Finalmente, se debe definir una acción dependiendo de cuál de los botones se ha pulsado en el método onClick(View v), donde v corresponderá a uno de los dos botones. Basta entonces comprobar su "ID" mediante v.getId() para definir la acción. En el siguiente ejemplo haremos que se escriba un texto indicando qué botón se ha pulsado.
public class HolaAndroid2 extends Activity implements
OnClickListener{
TextView myTextView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View v=findViewById(R.id.myTextView);
myTextView=(TextView) v;
myTextView.setText("Ejemplo de boton");
View boton1=findViewById(R.id.button1);
boton1.setOnClickListener(this);
View boton2=findViewById(R.id.button2);
boton2.setOnClickListener(this);
}
public void onClick(View v){
if(v.getId()==R.id.button1) {
myTextView.setText("Has pulsado el boton 1");
}
else if(v.getId()==R.id.button2){
myTextView.setText("Has pulsado el boton 2");
}
}
}
El resultado de pulsar el botón 2 se muestra en la figura 3.3.
3.3. Uso de Toast para mostrar un mensaje emergente
Se puede usar el método Toast.makeText()para crear un objeto Toast que permite mostrar un texto en una pantalla emergente durante unos segundos
Toast.makeText(this, mensaje, duracion).show();
donde mensaje es un objeto de tipo String y duración es un número entero, que se puede especificar mediante las constantes Toast.LENGTH_SHORT (0) y Toast.LENGTH_LONG (1). Ilustraremos el funcionamiento de un Toast usando los dos botones del ejemplo anterior. Basta modificar el método onClick()de la siguiente forma:
Figura 3.3. El texto cambia según el botón que se ha pulsado.
public void onClick(View v){
String mensaje="";
int duracion=1;
if(v.getId()==R.id.button1) {
mensaje="Has pulsado el boton 1";
duracion=Toast.LENGTH_SHORT;
}
else if(v.getId()==R.id.button2){
mensaje="Has pulsado el boton 2";
duracion=Toast.LENGTH_LONG;
}
mensaje=mensaje+" duracion = "+duracion;
Toast.makeText(this, mensaje, duracion).show();
}
El resultado después de pulsar el botón 2 se muestra en la figura 3.4.
Figura 3.4. Un texto emergente con Toast tras pulsar el botón 2.
3.4. Cambiar el texto de un botón
La clase Button es una extensión de la clase TextView. Por tanto, se pueden usar todo sus métodos, por ejemplo setTex(), de la siguiente forma: ((TextView) boton).setText("texto del boton"); nótese que para usar el método hay que convertir el botón a tipo TextView mediante un cast.
En la siguiente aplicación, modificamos el ejemplo anterior para que cada botón muestre el número de veces que se ha pulsado. Basta sustituir el método onClick() por lo siguiente:
int i1=0;
int i2=0;
public void onClick(View v){
String mensaje="";
int duracion=1;
if(v.getId()==R.id.button1) {
i1++;
((TextView)v).setText("Pulsado "+i1+" veces");
}
else if(v.getId()==R.id.button2){
i2++;
((TextView)v).setText("Pulsado "+i2+" veces");
}
}
El resultado se muestra en la figura 3.5.
Figura 3.5. Cada botón muestra el número de pulsaciones usando setText.
3.5. Cambiar el color de los botones
Para cambiar el color de un botón se utiliza el método:
boton.setBackgroundColor(Color.rgb(red,green,blue))
Como ilustración del uso de este método, en el ejemplo anterior añadiremos un tercer botón y definiremos el método onClick() para que, al pulsar sobre el primer botón, cambie la componente red, el segundo la green y el tercero la blue. Pulsando sobre los distintos botones estos cambian de color. El programa permite explorar la gama de colores avanzando de cinco en cinco. Este es el código que sustituye a onClick():
int i1=0;
int i2=0;
int i3=0;
int dcolor=5;
int cmax=255;
int red=cmax;
int green=cmax;
int blue=cmax;
public void onClick(View v){
if(v.getId()==R.id.button1) {
i1++;
red=dcolor*i1%cmax;
}
else if(v.getId()==R.id.button2){
i2++;
green=dcolor*i2%cmax;
}
else if(v.getId()==R.id.button3){
i3++;
blue=dcolor*i3%cmax;
}
((TextView)v).setText("color "+red+","+green+","+blue);
v.setBackgroundColor(Color.rgb(red,green,blue));
}
El resultado se ve en la figura 3.6.
Figura 3.6. Pulsando los botones, cambian de color
con setBackgroundColor().
3.6. Calculadora
Para ilustrar el uso de botones en Android presentamos una sencilla aplicación, una calculadora con botones para números y operaciones. Esto nos permitirá también introducir el uso de tablas en Android. Primero definimos los botones en main.xml dispuestos en una tabla, usando un TableLayout. Cada fila se especifica con TableRow. Las dos primeras filas incluyen sólo texto. La primera fila es un título. La segunda fila mostrará los números que vamos introduciendo. La tercera fila es un texto para el resultado de los cálculos, que expande tres columnas, y el botón "=". Las siguientes filas contienen botones para las teclas numéricas, las operaciones aritméticas, el punto decimal y la tecla de borrado.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:background="#ffffff"
android:stretchColumns="*"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:textColor="#000000"
android:background="#ffaa33"
android:textSize="24sp"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Android Calculator"
/>
<TextView
android:id="@+id/myTextView"
android:textColor="#000000"
android:textSize="24sp"
android:layout_gravity="left"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Pulse para empezar a calcular"
/>
<TableRow>
<TextView
android:layout_span="3"
android:id="@+id/myTextView2"
android:background="#ffaa33"
android:textColor="#000000"
android:textSize="24sp"
android:layout_gravity="left"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Resultado"
/>
<Button
android:text="="
android:textSize="24sp"
android:layout_span="1"
android:id="@+id/buttonIgual" />
</TableRow>
<TableRow>
<Button
android:text="1"
android:textSize="24sp"
android:id="@+id/button1" />
<Button
android:text="2"
android:textSize="24sp"
android:id="@+id/button2" />
<Button
android:text="3"
android:textSize="24sp"
android:id="@+id/button3" />
<Button
android:text="+"
android:textSize="24sp"
android:id="@+id/buttonSuma" />
</TableRow>
<TableRow>
<Button
android:text="4"
android:textSize="24sp"
android:id="@+id/button4" />
<Button
android:text="5"
android:textSize="24sp"
android:id="@+id/button5" />
<Button
android:text="6"
android:textSize="24sp"
android:id="@+id/button6" />
<Button
android:text="-"
android:textSize="24sp"
android:id="@+id/buttonResta" />
</TableRow>
<TableRow>
<Button
android:text="7"
android:textSize="24sp"
android:id="@+id/button7" />
<Button
android:text="8"
android:textSize="24sp"
android:id="@+id/button8" />
<Button
android:text="9"
android:textSize="24sp"
android:id="@+id/button9"/>
<Button
android:text="x"
android:textSize="24sp"
android:id="@+id/buttonMultiplica" />
</TableRow>
<TableRow>
<Button
android:text="0"
android:textSize="24sp"
android:id="@+id/button0" />
<Button
android:text="."
android:textSize="24sp"
android:id="@+id/buttonPunto" />
<Button
android:text="C"
android:textSize="24sp"
android:id="@+id/buttonBorra" />
<Button
android:text="/"
android:textSize="24sp"
android:id="@+id/buttonDivide" />
</TableRow>
</TableLayout>
Este layout se muestra en la figura 3.7.
Figura 3.7. Diseño de una calculadora con TableLayout.
La actividad Calculadora.java primero define todos los botones en onCreate(). Seguidamente se define la acción de cada botón en el método onClick(). Para los botones numéricos, esta consiste en añadir la cifra correspondiente al número que se va almacenando en myTextView. Al pulsar un operador, "+,-,x,/,=", se invoca el método calcula() que realiza la operación anterior y actualiza las variables. Los números que se van introduciendo se almacenan en las variables de clase m1, m2. El operador anterior introducido se guarda en la variable char op1. He aquí el listado. La calculadora es muy rudimentaria, pero realiza perfectamente las operaciones indicadas.
public class Calculadora extends Activity implements
OnClickListener{
TextView myTextView,myTextView2;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View v1=findViewById(R.id.myTextView);
myTextView=(TextView) v1;
myTextView.setText("");
View v2=findViewById(R.id.myTextView2);
myTextView2=(TextView) v2;
myTextView2.setText("");
View boton1=findViewById(R.id.button1);
boton1.setOnClickListener(this);
View boton2=findViewById(R.id.button2);
boton2.setOnClickListener(this);
View boton3=findViewById(R.id.button3);
boton3.setOnClickListener(this);
View boton4=findViewById(R.id.button4);
boton4.setOnClickListener(this);
View boton5=findViewById(R.id.button5);
boton5.setOnClickListener(this);
View boton6=findViewById(R.id.button6);
boton6.setOnClickListener(this);
View boton7=findViewById(R.id.button7);
boton7.setOnClickListener(this);
View boton8=findViewById(R.id.button8);
boton8.setOnClickListener(this);
View boton9=findViewById(R.id.button9);
boton9.setOnClickListener(this);
View boton0=findViewById(R.id.button0);
boton0.setOnClickListener(this);
View botonSuma=findViewById(R.id.buttonSuma);
botonSuma.setOnClickListener(this);
View botonResta=findViewById(R.id.buttonResta);
botonResta.setOnClickListener(this);
View botonMultiplica=
findViewById(R.id.buttonMultiplica);
botonMultiplica.setOnClickListener(this);
View botonDivide=findViewById(R.id.buttonDivide);
botonDivide.setOnClickListener(this);
View botonPunto=findViewById(R.id.buttonPunto);
botonPunto.setOnClickListener(this);
View botonBorra=findViewById(R.id.buttonBorra);
botonBorra.setOnClickListener(this);
View botonIgual=findViewById(R.id.buttonIgual);
botonIgual.setOnClickListener(this);
}
double result,m1=0,m2=0;
char op1=‘+’;
public void onClick(View v){
if(v.getId()==R.id.button1)
myTextView.append("1");
else if(v.getId()==R.id.button2)
myTextView.append("2");
else if(v.getId()==R.id.button3)
myTextView.append("3");
else if(v.getId()==R.id.button4)
myTextView.append("4");
else if(v.getId()==R.id.button5)
myTextView.append("5");
else if(v.getId()==R.id.button6)
myTextView.append("6");
else if(v.getId()==R.id.button7)
myTextView.append("7");
else if(v.getId()==R.id.button8)
myTextView.append("8");
else if(v.getId()==R.id.button9)
myTextView.append("9");
else if(v.getId()==R.id.button0)
myTextView.append("0");
else if(v.getId()==R.id.buttonPunto)
myTextView.append(".");
else if(v.getId()==R.id.buttonBorra){
myTextView.setText("");
myTextView2.setText("");
m1=0;
op1=‘+’;
}
else if(v.getId()==R.id.buttonSuma) calcula(‘+’);
else if(v.getId()==R.id.buttonResta) calcula(‘-’);
else if(v.getId()==R.id.buttonMultiplica) calcula(‘*’);
else if(v.getId()==R.id.buttonDivide) calcula(‘/’);
else if(v.getId()==R.id.buttonIgual) calcula(‘=‘);
}
public void calcula(char op){
double result=m1;
String cadena= myTextView.getText().toString();
try{
m2=Double.parseDouble(cadena);
if(op1==‘+’) result=m1+m2;
else if(op1==‘-’) result=m1-m2;
else if(op1==‘*’) result=m1*m2;
else if(op1==‘/’) result=m1/m2;
m1=result;
op1=op;
if(op == ‘=‘){
myTextView.setText(""+m1);
myTextView2.setText(""+m1);
}else{
myTextView.setText("");
myTextView2.setText(""+m1+op1);
}
} catch(NumberFormatException nfe){
Toast.makeText(this,"numero incorrecto",1).show();
}
}
}
La calculadora en funcionamiento se muestra en la figura 3.8.
Figura 3.8. Resultado de una operación con la calculadora.
Hemos previsto que se puedan cometer errores al introducir los datos (por ejemplo, pulsar varios operadores seguidos). Para evitar que la aplicación Android se aborte en caso de error, Java permite realizar el cálculo dentro de un bloque try – catch.
Si se produce un error sería una excepción de tipo NumberFormatException al tratar de transformar en un número la cadena introducida. En caso de error, se muestra un mensaje en la pantalla mediante un Toast, pero se puede seguir calculando. Un ejemplo de mensaje de error se muestra en la figura 3.9.
Figura 3.9. Mensaje de error tras una operación inválida con la calculadora.