Mucho Android: abril 2012

lunes, 30 de abril de 2012

Introduccion a Actionbar Sherlock

En esta entrada veremos una introducción sobre la librería ActionBarSherlock. Para saber en qué consiste esta fantástica librería que mejor que ver la definición de su autor:

“ActionBarSherlock es una extensión de la librería de compatibilidad diseñada para facilitar el uso del patrón de diseño action bar en una única API a través de todas las versiones de Android.

La librería utilizará el action bar nativo cuando esté disponible o utilizará una implementación propia sobre vuestros layouts de una forma automática. Esto nos permite desarrollar de una forma fácil una aplicación con un action bar para todas las versiones de Android desde la 2.x para adelante”.

Las aplicaciones GitHub Gaug.es, Mentions y SeriesGuide Show Manager hacen uso de esta librería y pueden darnos una idea del resultado final

Paso 0 – Importar la librería (sólo si nuestro proyecto no es un proyecto Maven)

Lo primero que tenemos que hacer es descargar la librería desde la página oficial y descomprimir el fichero. Dentro de la carpeta descomprimida tendremos dos subcarpetas:

· library: Es el proyecto librería

· samples: Proyecto eclipse en el que podremos ver distintos usos de la librería

Lo que debemos hacer es importar el proyecto library en nuestro entorno de desarrollo. Desde eclipse podemos hacerlo creando un nuevo proyecto android y seleccionando la opción “Create project from existing source“, seleccionando la carpeta library como localización del código existente. Hay veces en el que el propio eclipse nos crea el proyecto pero no copia los ficheros, en este caso lo que debemos hacer es copiar el contenido de la carpeta library en la carpeta del proyecto recién creado y luego actualizar el proyecto (botón derecho sobre el mismo y “Refresh“).

Por último añadimos la librería de compatibilidad. Lo más fácil es buscar dentro de la carpeta libs del proyecto el jar android-support-v4.jar, pulsar con el botón derecho sobre el fichero y seleccionar “Build Path -> Add to Build Path“.

Paso 1 – Añadir a nuestro proyecto ActionBarSherlock

Lo siguiente es añadir la librería ActionBarSherlock a nuestro proyecto. Para ello tenemos dos alternativas:

Si estamos utilizando Eclipse con el plugin de ADT versión 0.9.7 o superior podemos incluir ActioBarSherlock como un proyecto de librería. Para ello simplemente accedemos a las propiedades del proyecto, vamos a la sección “Android” y añadimos el proyecto librería creado en el paso anterior en la sección “Libreries”.

Si nuestro proyecto es un proyecto Maven la cosa se simplifica. Simplemente añadimos la siguiente dependencia:

<groupId>com.actionbarsherlock</groupId>

<artifactId>library</artifactId>

<type>apklib</type>

</dependency>

Y nos aseguramos de que incluimos el repositorio http://r.jakewharton.com/maven/release/ en la sección “repositories” de nuestro pom.xml.

Recuerda que nuestro proyecto debe estar compilado contra la versión 4 de android, para verificarlo accede a las propiedades del proyecto y dentro de la sección “Android” verifica que esté marcado el checkbox de Android 4.0.

Paso 2 – Proyecto de Ejemplo

En este tutorial vamos a trabajar sobre un proyecto que tendrá el siguiente aspecto.

Para poder hacer uso del ActionBar de Sherlock debemos cumplir dos requisitos:

· Hacer que nuestras Activity extiendan de alguna de las clases activity de ‘Sherlock’ (por ejemplo SherlockActivity o SherlockFragmentActivity).
La interacción con el action bar la tendremos que hacer con el método getSupportActionBar() (en lugar de getActionBar()).
La API del ActionBar es un duplicado exacto del action bar nativo. Por tanto, la documentación y los artículos oficiales son totalmente válidos. Puedes consultar la API oficial aquí.

· Hacer uso de los temas de Sherlock como Theme.Sherlock, Theme.Sherlock.Light, Theme.Sherlock.Light.DarkActionBar o extender alguno de estos.

En nuestro ejemplo, hemos optado por la opción más sencilla que es la de extender decom.actionbarsherlock.app.SherlockActivity.

package es.androdoce.introactionbar;

import android.os.Bundle;

import com.actionbarsherlock.app.SherlockActivity;

public class MainActivity extends SherlockActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

Por otro lado, se ha creado un fichero background.xml en res/drawable que se usará para el fondo del Action Bar y un fichero themes.xml en res/values para crear nuestro propio tema que extienda deTheme.Sherlock.Light.DarkActionBar.

background.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:angle="90"

android:endColor="#769327"

android:startColor="#a3ca3a" />

</shape>

themes.xml

<?xml version="1.0" encoding="utf-8"?>

parent="Theme.Sherlock.Light.DarkActionBar">

<item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>

<item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>

</style>

parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">

<item name="background">@drawable/background</item>

<item name="android:background">@drawable/background</item>

</style>

</resources>

Por último configuramos el AndroidManifest.xml para que utilice nuestro tema

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="es.androdoce.introactionbar"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk android:minSdkVersion="7" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/Theme.Styled" >

<activity

android:name=".MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Si ejecutamos tal cual el proyecto ya tendremos una aplicación, muy simple eso sí, con nuestro Action Bar.

Paso 3 – Añadiendo botones y modificando comportamiento

Una de las formas más sencillas de añadir botones a nuestro action bar es crear un menú estándar de android. Si especificamos que el menú debe mostrarse siempre como un action, los elementos del menú aparecerán en la barra. Para hacer el menú, lo primero es crear un fichero XML en res/menu. En nuestro caso lo hemos llamado main.xml y el contenido es el siguiente:

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/favoritos"

android:icon="@drawable/ic_menu_star"

android:showAsAction="always"

android:title="@string/favoritos"/>

<item

android:id="@+id/configuracion"

android:icon="@drawable/ic_menu_preferences"

android:showAsAction="always"

android:title="@string/configuracion"/>

</menu>

Aquí hay varias cuestiones importantes:

1. Los iconos se han copiado del SDK de android (android-sdk-/platforms/android-15/data/res/drawable) a nuestro proyecto

2. Se ha incluido el atributo showAsAction con valor always para que los elementos aparezcan en el Action Bar

3. Se han definido los strings ‘favoritos’ y ‘configuracion’ en res/values.xml

Una vez creado el fichero del menú, veamos como quedaría finalmente la clase MainActivity, que muestra las opciones en el action bar

package es.androdoce.introactionbar;

import android.content.Intent;

import android.os.Bundle;

import android.widget.Toast;

import com.actionbarsherlock.app.SherlockActivity;

import com.actionbarsherlock.view.Menu;

import com.actionbarsherlock.view.MenuInflater;

import com.actionbarsherlock.view.MenuItem;

public class MainActivity extends SherlockActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getSupportMenuInflater();

inflater.inflate(R.menu.main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == R.id.favoritos) {

startActivity(new Intent(this, FavoritosActivity.class));

} else if (item.getItemId() == R.id.configuracion) {

Toast.makeText(this, "configuración pulsado", Toast.LENGTH_SHORT).show();

}

return true;

}

Vamos a repasar los puntos conflictivos de este código:

1. Los imports deben ser los de sherlock, por ejemplo se ha utilizado com.actionbarsherlock.view.Menu en lugar de android.view.Menu

2. Se crea el menú a partir del fichero XML de la forma estándar, con la salvedad de que recuperamos el objeto MenuInflater con el método getSupportMenuInflater()

3. Si se pulsa en favoritos iniciamos la actividad FavoritosActivity que veremos a continuación. Si se pulsa configuración se muestra un mensaje emergente que puede ser fácilmente sustituido por una acción cualquiera (iniciar una activity, ejecutar otro método, etc.)

El aspecto ahora sería el siguiente:

Ahora vamos a ver la clase FavoritosActivity:

package es.androdoce.introactionbar;

import android.content.Intent;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import com.actionbarsherlock.app.ActionBar;

import com.actionbarsherlock.app.SherlockListActivity;

import com.actionbarsherlock.view.MenuItem;

public class FavoritosActivity extends SherlockListActivity {

private static final int NUM_FAVORITOS = 30;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ActionBar ab = getSupportActionBar();

ab.setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE|ActionBar.DISPLAY_SHOW_HOME|ActionBar.DISPLAY_HOME_AS_UP);

ab.setTitle(getString(R.string.favoritos));

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, android.R.id.text1, valores());

setListAdapter(adapter);

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == android.R.id.home) {

Intent intent = new Intent(this, MainActivity.class);

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP|Intent.FLAG_ACTIVITY_NEW_TASK);

startActivity(intent);

return true;

}

return true;

}

private String[] valores() {

String[] valores = new String[NUM_FAVORITOS];

for (int i = 1 ; i <= NUM_FAVORITOS ; i++) {

valores[i-1] = "Favorito " + i;

}

return valores;

}

En esta clase se ha optado por no incluir ninguna acción. Por el contrario se muestra cómo modificar las opciones del ActionBar a través del menú setDisplayOptions y especificar un título a nuestra elección. Podemos pasar al método el número de opciones que queramos, siempre separadas por el símbolo |. En el ejemplo se han pasado las siguientes:

1. ActionBar.DISPLAY_SHOW_TITLE -> Para que muestre el título en el action bar

2. ActionBar.DISPLAY_SHOW_HOME -> Para que muestre el botón del icono

3. ActionBar.DISPLAY_HOME_AS_UP -> Para que muestre la flecha junto al icono

Puedes ver las opciones aceptadas en la API oficial del Action Bar.

El método onOptionsItemSelected se sobreescribe para capturar la pulsación sobre el icono y así volver a ejecutar la actividad principal.

Ahora sólo nos queda añadir la actividad FavoritosActivity al fichero AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="es.androdoce.introactionbar"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk android:minSdkVersion="7" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/Theme.Styled" >

<activity

android:name=".MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

<activity

android:name=".FavoritosActivity" />

</application>

</manifest>

Y aquí acaba nuestra introducción a la ActionBar de Sherlock. Si quieres más información puedes visitar la página oficial en la que encontrarás muchos recursos, soporte y cómo apoyar a este gran proyecto.

FUENTE: http://androcode.es/2012/03/introduccion-a-actionbarsherlock/

Agradezco el comentario sobre la fuente.

Mucho Android

lunes, 30 de abril de 2012

Introduccion a Actionbar Sherlock

Archivo del blog

Seguidores

blogs de referencia