Esta vez con un poco más de retraso, pero por fin damos comienzo a este nuevo artículo sobre creación de una App en Android. Para este artículo, voy a cambiar el método de trabajo. Abajo tenéis el código fuente del proyecto, que os recomiendo que  lo bajéis y lo aprovechéis para ir siguiendo las explicaciones. La forma de importarlo a Eclipse, es la misma que como hacíamos con las librerías, con la única diferencia, que ahora no hace falta marcar la casilla de Is Library.
En este artículo haremos lo siguiente:

• Creación de una actividad que nos sirva de base.
• Uso de la Card Interface para crear una lista de productos.

Este será el aspecto de nuestra App al terminar:

Vamos a empezar creando una nueva clase que llamaré ActividadBase y le pondré el siguiente código:

package com.example.mitiendaandroid;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Display;
import android.view.View;
import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;




public abstract class ActividadBase extends SherlockActivity {

	SlidingMenu menu;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(getLayoutResourceId());
		
		Display display = getWindowManager().getDefaultDisplay();
		@SuppressWarnings("deprecation")
		int width = display.getWidth();
		
		
		
		
		menu = new SlidingMenu(this);
		    menu.setMode(SlidingMenu.LEFT);
		    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
		   
		    menu.setShadowWidth(20);
		    menu.setBehindOffset(30);
		    menu.setFadeDegree(0.25f);
		    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
		    menu.setBehindWidth(width-60);
		    menu.setMenu(R.layout.menulateral);
		
	    
	    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
  
	}	
	
	 protected abstract int getLayoutResourceId();

	@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getSupportMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return true;
    }
	@Override
	public boolean onOptionsItemSelected(MenuItem item) 
	{    
	   switch (item.getItemId()) 
	   {        
	      case android.R.id.home:            
	    	  if(!menu.isMenuShowing()){menu.toggle();
	    	  getSupportActionBar().setDisplayHomeAsUpEnabled(false);
	    	  
			  }
			else {menu.toggle();
			  getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
			}
			     
	      default:            
	         return super.onOptionsItemSelected(item);    
	   }

	
	}
	
	
	
	@Override
	public void onBackPressed() {
		if(menu.isMenuShowing()){menu.toggle();
		 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
		  }
		else {
			
			finish();
			
			
		}
		
		
		
		
		}
		
	
	
	
	
	
	
	public void Inicio (View view){
		Intent i = new Intent(this, MainActivity.class );
        startActivity(i);
	}
	
	public void Ofertas (View view){
		Intent i = new Intent(this, Ofertas.class );
		finish();
        startActivity(i);
	}
	
	public void Productos (View view){
		Intent i = new Intent(this, Productos.class );
		finish();
        startActivity(i);
	}
	
	public void Contacto (View view){
		Intent i = new Intent(this, Contacto.class );
		finish();
        startActivity(i);
	}

	
	
	
}

Este tipo de actividades suelen ser muy útiles. Nos permiten escribir código que necesito en muchas de mis otras actividades, sin tenerlo que repetir en cada una. Vamos a desglosarlo un poco.

Al principio creamos la clase onCreate. Esta clase es la primera que se ejecuta al abrirse una nueva Actividad en Android. Os recomiendo leer algo más sobre el «Ciclo de vida» de las actividades en Android.  Dentro de esta clase hemos añadido tres elementos. El primero es el setContentView, que indica qué layout deberá mostrar esta actividad. Recordad que en Android cada «pantalla» equivale a una Actividad y que a su vez, ésta lleva asociada un Layout, un archivo XML con el diseño. En este caso el setContentView hace referencia a esto: getLayoutResourceId(). Esto nos permite que luego podamos pasarle desde cada una de las actividades, el layout que queremos. Más tarde explicaré esto mejor.  Posteriormente añadimos el menú lateral, como ya hicimos en el artículo anterior.  Ya fuera del onCreate destacamos el onCreateOptionsMenu, que nos permitirá más tarde añadir botones a la ActionBar, el onOptionsItemSelected, que nos permite definir, qué se ejecutará al pulsar el icono de la ActionBar y el onBackPressed() que nos permitirá definir, qué hacer cuando se pulse el botón atrás de nuestro móvil. Analicemos más a fondo estas clases.  Dentro de onOptionsItemSelected podemos ver un If-else. Este código comprueba  si el menú está, o no abierto. En caso afirmativo, cierra el menú,  y activa el pequeño triángulo que podéis ver junto al icono de la ActionBar.  Si nuestro menú está cerrado, lo que hace es abrirlo, y desactivar el triángulo del que hablaba antes.

El onBackPressed tiene un funcionamiento parecido al anterior, con la diferencia de que si el menú no está desplegado, lo que hace es finalizar la actividad.

Por último en esta actividad, hemos creado las clases Inicio, Ofertas,  Productos y Contacto. Recordar que cuando creamos el layout del menú lateral, le añadimos varios atributos onClick, que definían la clase que se ejecutaría al pinchar en ese elemento. Estas clases las hemos definido aquí, y lo que hacen es abrir las diferentes  Actividades,  que deberemos crear de la misma forma que hemos hecho anteriormente. De momento no les añadiremos código.

Ahora vamos a tener que añadir lo siguiente al AndroidManifest.

Cada una de las Actividades que correspondan a lo que venimos llamando una «pantalla de la aplicación» deberán siempre ser definidas en el Android Manifest.

Lo siguiente que vamos a hacer es añadir una lista de productos disponibles. Para comenzar añadiremos este código al archivo styles:
 

 
Después, en la carpeta res, crearemos la carpeta anim. Dentro de ella crearemos los archivos slide_up_left y slide_up_right. Que tendrán respectivamente el siguiente código:
 

Estos archivos definen la animación de nuestro layout.

Crearemos también una nueva clase llamada NowLayout con este código:
 

package com.example.mitiendaandroid;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;

public class NowLayout extends LinearLayout implements OnGlobalLayoutListener {

	public NowLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		initLayoutObserver();

	}

	public NowLayout(Context context) {
		super(context);
		initLayoutObserver();
	}

	private void initLayoutObserver() {
		setOrientation(LinearLayout.VERTICAL);
		getViewTreeObserver().addOnGlobalLayoutListener(this);
	}

	@Override
	public void onGlobalLayout() {
		getViewTreeObserver().removeGlobalOnLayoutListener(this);

		final int heightPx = getContext().getResources().getDisplayMetrics().heightPixels;

		boolean inversed = false;
		final int childCount = getChildCount();

		for (int i = 0; i < childCount; i++) {
			View child = getChildAt(i);

			int[] location = new int[2];

			child.getLocationOnScreen(location);

			if (location[1] > heightPx) {
				break;
			}

			if (!inversed) {
				child.startAnimation(AnimationUtils.loadAnimation(getContext(),
						R.anim.slide_up_left));
			} else {
				child.startAnimation(AnimationUtils.loadAnimation(getContext(),
						R.anim.slide_up_right));
			}

			inversed = !inversed;
		}

	}

}

De esta no explicaré nada porque se complica bastante, y no es necesario modificarla para modificar nuestros prodcutos. Posteriormente añadiremos el archivo productos.xml, en la carpeta layout, con este código:
 

Cada producto va en un Relative Layout, que contiene una imagen, el título, precio y descripción. Por cierto,  si veis la nueva app de Youtube se basa en este tipo de diseño, cada vez más utilizado por Google.

Por último solo nos queda añadir este código a la clase Productos:
 

package com.example.mitiendaandroid;

import android.os.Bundle;

public class Productos extends ActividadBase {
	
	
	 @Override
	    protected int getLayoutResourceId() {
	        return R.layout.productos;
	    }
	 
	 

}

 
Vemos que extiende de BaseActivity. Por lo tanto, hace uso de todo lo que hemos comentado anteriormente sobre ella. Además le decimos que en nuestro caso, el layout que vamos a usar es el llamado «productos«. Solo nos faltaría ahora añadir este código a MainActivity:
 

package com.example.mitiendaandroid;

import android.os.Bundle;
 
import android.view.Display;
import android.view.View;
import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;





public  class MainActivity extends ActividadBase {

	SlidingMenu menu;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);


	    
	    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
  
	}
	 @Override
	    protected int getLayoutResourceId() {
	        return R.layout.activity_main;
	 }
}

 
Por último, decir que para la interfaz de los productos me he inspirado en este artículo:

Google Now Cards Layout

Y como siempre recordad, que tenéis varias vías de comunicación  (Twitter, Comentarios, web) conmigo para preguntarme todo lo que queráis. Además, en mi web: unmonoqueteclea.es tenéis un sericio de chat con el que contactar conmigo. Aquí tenéis el código fuente del proyecto. Pinchad en la imagen para ir al repositorio