domingo, 25 de septiembre de 2011

Primeros pasos con GreenDroid, ActionBar y QuickActions



Actualmente me encuentro empezando un nuevo proyecto en Android  y como en otros muchos que ya existen en el mercado me he visto en la necesidad de incluir la ActionBar, elemento que dará un aspecto mucho mas profesional a nuestras aplicaciones y hará nuestras interfaces muchos mas usables. Despues de pedir consejo y ojear el blog de javielinux me decidi a usar la libreria GreenDroid ya que facilita bastante nuestra labor. Si aun no sabeis de que hablo os dejo una captura:





Para empezar nos bajamos la libreria y añadirla a nuestro workspace para poder usarla en nuestros proyectos. Para ello accedemos a la siguiente direccion https://github.com/cyrilmottier/GreenDroid y pulsamos en Downloads:





Una vez descargado el archivo ZIP lo descomprimimos en nuestro workspace y comprobaremos como existen tres carpetas en su interior:

  • GreenDroid, la libreria en cuestion.
  • GreenDroid-GoogleAPIS, GreenDroid con funcionalidades añadidas para trabajar con Google Maps.
  • GDCatalog, el codigo fuente de la aplicacion de demostracion disponible en el market.
Para poder usarlas en nuestros proyecto deberemos importarla como proyecto dentro de eclipse, en nuestro caso usaremos GreenDroid sin las funcionalidades añadidas. En e l caso de querer usar la segunda habria que importar tambien la primera puesto que depende de ella.



Una vez hecho esto deberemos indicar a nuestro proyecto que vamos a usar esta libreria. Para ello accedemos a las propiedades de nuestro proyecto a la seccion Android y se lo indicamos:





Con esto ya tendriamos el proyecto preparado para su uso y pasariamos al codigo. Antes que nada deberemos crear un objeto application, para ser mas precisos que herede de GDApplication y que implemente el metodo getHomeActivityClass() que servirá a la aplicacion para ver cuando tiene que mostrar el boton de home:





import greendroid.app.GDApplication;

public class NomadApplication extends GDApplication {
    
    @Override
    public Class<?> getHomeActivityClass() {
        return MainActivity.class;
    }
}

MainActivity será la Activity que elegiremos como Main y a la que volveremos pulsando la casita. Para que nuestra aplicacion use esta clase deberemos indicarselo en el AndroidManifest.xml. anañadiendo la propiedad name a la etiqueta application.



Tendremos que indicar a nuestras actividades que usen el style Theme.GreenDroid para que la ActionBar aparezca en ellas. Si hacemos esto la ActionBar aparecerá con un estilo predeterminado y es por eso que si queremos modificar el aspecto nos crearemos nuestro propio Theme sobreescrbiendo las caracteristicas a modificar. A continuacion os dejo un ejemplo en el que modificamos cosas como los colores, el separador, añadirmos un drawable de titulo para la pantalla de main o cambiamos el icono de home. Si quereis modificar mas cosas bastará con ir al codigo fuente de la libreria y comprobar cuales son las propiedades disponibles.


Pasando a la clase Java para que nuestras clases operen con ActionBar deberan heredar de GDActivity y desde aqui bastara con usar el metodo addActionBarItem(type, itemId); para añadir elementos a la barra. GreenDroid cuenta con una libreria de tipos de botones para la barra con lo cual no nos tendremos que preocupar ni por los iconos, tan solo tendremos que seleccionar uno de estos tipos de la clase Type y el lo hara todo solo. Hay que tener en cuenta que la barra no admite mas de tres iconos, si necesitamos mas deberemos recurrir a las QuickActions que explicaremos mas adelante. A continuacion os dejo un ejemplo:


public class NomadActivity extends GDActivity {
    private final int CHECKING = 0;
    private final int TIMELINE = 1;
    
    private QuickActionWidget quickActions;
        
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setActionBarContentView(R.layout.main);

		initActionBar();
	}
	
	
	private void initActionBar() {
        	addActionBarItem(Type.Edit, CHECKING);
        	addActionBarItem(Type.List, TIMELINE);
	}

	@Override
	public boolean onHandleActionBarItemClick(ActionBarItem item, int pos) {
		switch (pos) {
			case CHECKING:
				Toast.makeText(getApplicationContext(), "Has pulsado el boton CHECKING", Toast.LENGTH_SHORT).show();
				break;
			default:
				break;
		}
		return super.onHandleActionBarItemClick(item, pos);
	}
	
    }

Como vemos en el ejemplo de codigo luego deberemos de implementar el metodo onHandleActionBarItemClick para añadir funcionalidad a nuestros botones. Con esto ya seriamos capaces de usar la ActionBar en nuestras primeras aplicaciones pero ¿y si queremos añadir mas de tres botones?, la solucion es QuickActions que paso a explicar.

Para crearnos las QuickAction lo primero que haremos es declarar una variable que las almacenara y luego desde el onCreate del Activity las inicializamos a nuestro gusto, añadiendo mas o menos elementos. Como podemos ver hay dos tipos de manera de presentar las QuickAction, una barra con scroll horizontal (QuickActionBar) o mediante un grid (QuickActionGrid). Para mostrar una u otra bastara con crear un objeto de un tipo u otro respectivamente como veremos en el ejemplo:


//quickActions = new QuickActionBar(this);
	    quickActions = new QuickActionGrid(this);
		
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 1"));
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 2"));
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 3"));
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 4"));
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 5"));
	    quickActions.addQuickAction(new QuickAction(this, R.drawable.ic_quickaction, "Opcion 6"));
	    
	    quickActions.setOnQuickActionClickListener(new OnQuickActionClickListener() {
	    	public void onQuickActionClicked(QuickActionWidget widget, int position) {
	    		Toast.makeText(NomadActivity.this, "Item " + position + " pulsado", Toast.LENGTH_SHORT).show();
	        }
	    });


Como vemos cada vez que añadimos un elemento podemos indicar el icono que usara y el nombre que llevara y luego mediante setOnQuickActionListener daremos funcionalidad al elemento en la posicion position.

Y con esto hemos terminado, espero que os sirva de ayuda.

No hay comentarios:

Publicar un comentario