App – Stepper

Buenas tardes, en esta entrada haremos una aplicación muy sencilla, en la cual incluiremos un evento más, y usaremos LinearLayout como botones mediante un atributo.

---

• Problema

  Queremos hacer una aplicación que cuente las veces que pulsamos un botón, y si queremos, poder reiniciar el contador

• Solución

  Con el evento OnClickListener lograremos que el contador aumente, y con el evento OnLongClickListener podemos lograr que mediante un AlertDialog nos genere una pregunta para poder reiniciar el contador.

• Discusión

  Para la aplicación, haremos una GUI básica, con un LinearLayout principal, y luego otros 2 LinearLayout que van a contener un TextView para mostrar las veces que hemos pulsado el botón, y luego el LinearLayout que contiene 2 TextView con las instrucciones de las pulsaciones.

• Para esta aplicación, vamos a crear un proyecto, en el cual asignaremos como siempre un Nombre de Aplicación, un Nombre de Proyecto y el paquete.

  
  
  
  

• A continuación tenemos ya creado el proyecto, y podemos empezar a crear la GUI. Para ello comenzamos poniendo el primer LinearLayout:

  					 <LinearLayout
  					    android:id="@+id/id_visualizacion"
  					    android:layout_width="fill_parent"
  					    android:layout_height="wrap_content"
  					    android:gravity="center"
  					    android:orientation="horizontal"
  					    android:paddingBottom="10dp"
  					    android:paddingTop="10dp" >
  				
  					    <TextView
  					        android:id="@+id/id_contador"
  					        android:layout_width="wrap_content"
  					        android:layout_height="wrap_content"
  					        android:text="@string/string_cont_inicio"
  					        android:textSize="25sp"
  					        android:textStyle="bold" />
  					</LinearLayout>
  					

  Este LinearLayout contiene bastantes atributos, como android:gravity, que define como va a estar alineado lo que se encuentre dentro de el, en este caso, en el centro.

  Con android:layout_height hacemos que el layout ocupe de alto tanto como el contenido necesite, y con andriod:layout_width, hacemos que rellene al Layout padre, es decir, de ancho ocupará toda la pantalla.

  El TextView tiene como atributos nuevos que he usado el android:textSize y android:textStyle. El primero nos ofrece la posibilidad de cambiar el tamaño de la fuente, y el segundo, de darle estilo, ya sea “bold”, “italic” o “bold-italic”.

• Ahora, despues del anterior LinearLayout vamos a introducir otro, el cual actuará como un Botón, gracias a algunos atributos que ahora explicaré.

  					<LinearLayout
  				        android:id="@+id/btn_Pulsar"
  				        android:layout_width="fill_parent"
  				        android:layout_height="wrap_content"
  				        android:clickable="true"
  				        android:gravity="center"
  				        android:longClickable="true"
  				        android:orientation="vertical"
  				        android:paddingBottom="10dp"
  				        android:paddingTop="10dp" >
  				
  				        <TextView
  				            android:id="@+id/id_mensaje"
  				            android:layout_width="wrap_content"
  				            android:layout_height="wrap_content"
  				            android:text="@string/string_mensaje" />
  				        
  				        <TextView 
  				            android:id="@+id/id_mensaje_mantener"
  				            android:layout_width="wrap_content"
  				            android:layout_height="wrap_content"
  				            android:text="@string/string_boton_largo"/>
  				    </LinearLayout>
  					

  Aquí podemos observar, que el LinearLayout tiene unas propiedades que no habíamos usado antes, como son android:clickable, android:longClickable. Estos atributos nos permite hacer de este LinearLayout como si fuera un botón.

  Los TextView contienen las instrucciones para hacer funcionar la aplicación.

  Una vez montado todo el xml con la interfaz gráfica, debería quedarnos algo como esto

  

• Ahora saltamos al código Java, así que abriremos el MainActivity.java (en mi caso).

  

• Eliminamos lo que no nos sirva, y lo primero que haremos es crear los atributos de la actividad:

  			   		public class MainActivity extends Activity {
  
  					private int cont=0;
  					private TextView tvCont;
  					private LinearLayout btnIncrementar;
  					
  					...
  					
  					}
  			   		

  La variable cont será la que usemos para llevar la cuenta interna de las veces que pulsamos el botón. La variable tvCont es el TextView que cambiará cada vez que pulsemos el botón, y la variable de tipo LinearLayout es la encargada de hacer las funciones de botón.

• A continuación en el método onCreate enlazamos las variables privadas con los elementos que hicimos en el xml:

  			   		@Override
  				    public void onCreate(Bundle savedInstanceState) {
  				        super.onCreate(savedInstanceState);
  				        setContentView(R.layout.activity_main);
  				        
  				        tvCont=(TextView)findViewById(R.id.id_contador);
  				        btnIncrementar=(LinearLayout)findViewById(R.id.btn_Pulsar);
  				        
  				        ...
  				        
  			       	}
  			   		

  Con esto ya tenemos enlazado los atributos privados de la clase con los elementos del XML gracias al ID que proporcionamos y al método findViewById().

• Ahora vamos con lo que realmente nos puede ser mas complicado, la creación de los listener para darle la funcionalidad de botón al LinearLayout.

  Comenzamos aplicando el evento de click

  			   		 btnIncrementar.setOnClickListener(new OnClickListener(){
  
  						@Override
  						public void onClick(View arg0) {
  							// TODO Auto-generated method stub
  							update_cont();
  						}
  			        	
  			        });
  			   		

  Como vemos, cuando pulsemos con un click corto el LinearLayout, se llama al método update_cont():

  			   		private void update_cont(){
  				    	cont++;
  				    	String contador=String.valueOf(cont);
  				    	tvCont.setText(contador);
  				    }
  			   		

  Este método lo único que hace es incrementar el contador, introducirlo dentro de una variable y asignar al TextView el valor de cont.

• Lo siguiente es el evento que surgirá cuando mantengamos pulsado un tiempo el botón.

  			   		btnIncrementar.setOnLongClickListener(new OnLongClickListener(){
  
  						@Override
  						public boolean onLongClick(View v) {
  							// TODO Auto-generated method stub
  							crear_dialogo().show();
  							return false;
  						}
  			        	
  			        });
  			   		

  Como vemos, la asignación del evento setOnLongClickListener no es muy diferente al de un click normal, solo que retorna un valor booleano, que será true si se ha consumido la llamada de la pulsación larga, y false en el caso contrario.

  Se llama al método crear_dialogo():

  			   		private Dialog crear_dialogo(){
  				    	AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
  				    	builder.setCancelable(false);
  						builder.setMessage("¿Desea reiniciar el contador?");
  						builder.setPositiveButton("Aceptar",	new DialogInterface.OnClickListener() {
  							
  							@Override
  							public void onClick(DialogInterface dialog, int which) {
  								// TODO Auto-generated method stub
  								reiniciar();
  								
  							}
  						});
  						
  						builder.setNegativeButton("Cancelar",new DialogInterface.OnClickListener() {
  							
  							@Override
  							public void onClick(DialogInterface dialog, int which) {
  								// TODO Auto-generated method stub
  								dialog.cancel();
  							}
  						});
  						
  						return builder.create();
  				    }
  			   		

  Este método crea una clase AlertDialog.Builder para crear un AlertDialog, un pequeño mensaje que nos ofrecerá un pequeño texto con 2 botones, uno afirmativo y otro de cancelar.

  • builder.setCancelable(false)

    Esto hace que cuando salga el AlertDialog no podamos salir de el pulsando el botón de retroceso en el terminal.

  • builder.setMessage()

    Sirve para establecer el mensaje que aparecerá cuando aparezca el AlertDialog.

  • builder.setPositiveButton()

    Le pasamos como argumentos el texto del botón que genera, y un OnClickListener, el cual será encargado de realizar la función que le asignemos. En este caso llama al método reiniciar():

    							private void reiniciar(){
    						    	this.cont=0;
    						    	String contador = String.valueOf(cont);
    						    	tvCont.setText(contador);
    						    }
    							

  • builder.setNegativeButton()

    Algo parecido al anterior, le pasamos el texto que contendrá el botón, y el evento OnClickListener para que realice al función especificada, que en este caso, es cancelar el AlertDialog.

  Una vez hecho esto, con el método a continuación show() se lanza el AlertDialog, dandonos a elegir entre Reiniciar o Cancelar

Con esto estaría finalizado nuestra pequeña aplicación, y debería resultar algo así:

Sin mas, cualquier corrección o aporte es bienvenido.

Saludos!!!