domingo, 18 de marzo de 2012

Comenzando con TabLayout #Android

Como vemos en multitud de aplicaciones Android y como nos dice Google en su página de diseñadores (aquí), las aplicaciones son mucho mas intuitivas cuando usamos pestañas, llamadas en Android TabLayout. Eso es lo que nos disponemos a hacer ahora mismo, explicar el funcionamiento de las pestañas en Android. 
Para empezar, hacemos un nuevo proyecto Android y tenemos que crear 4 nuevas Activity además de la que nos crea por defecto. Cada una de ellas la usaremos cuando pulsemos en cada una de las pestañas. Le podéis dar el nombre que os apetezca, en mi caso esta pestaña se llama ActividadActivity. Tienen que ser del estilo a como son mostradas a continuación:

public class ActividadActivity extends Activity {
   
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Actividad tab");
        setContentView(textview);
    }
}


Una vez creadas las 4 Activity se tiene que crear cada uno de los conjuntos de iconos. Es decir, para cada una de las Activity se necesita el icono base y el icono cuando está seleccionado. Los iconos se tiene que guardar en la carpeta res/drawable con la resolución apropiada para cada una de las pantallas hdpi, lpi o mdpi.
Una vez creados los iconos dentro de todas las carpetas tenemos que gestionarlos mediante un selector. Como ejemplo, para manejar los iconos de la pestaña ActividadActivity que los tenemos guardados como ic_tab_actividad.png y ic_s_tab_actividad.png hacemos un archivo llamado ic_tab_actividad_xml.xml donde metemos lo siguiente:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_s_tab_actividad"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_tab_actividad" />
</selector>
Esto tenemos que repetirlo para los iconos de las 4 pestañas. Haremos un selector para cada uno que nos maneje los iconos correspondientes. Una vez montado esto ya podemos modificarnos el main.xml que nos crea Eclipse por defecto y poner el gestor de las pestañas. Este archivo quedaría como sigue:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>
Y con esto ya tenemos nuestro gestor de pestañas. Ahora ya solo nos queda en nuestro Activity principal decirle que es un TabActivity y ponerle las 4 Activity que creamos al principio como pestañas. Si nuestra clase se llama Testingtab quedaría algo como sigue:
public class TestingtabActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost();  // The activity TabHost
        TabHost.TabSpec spec;  // Resusable TabSpec for each tab
        Intent intent;  // Reusable Intent for each tab

        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, ActividadActivity.class);

        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost.newTabSpec("actividad").setIndicator("Actividad",
                          res.getDrawable(R.drawable.ic_tab_actividad_xml))
                      .setContent(intent);
        tabHost.addTab(spec);

        // Do the same for the other tabs
        intent = new Intent().setClass(this, SecondActivity.class);
        spec = tabHost.newTabSpec("second").setIndicator("Second",
                          res.getDrawable(R.drawable.ic_tab_second_xml))
                      .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, ThirdActivity.class);
        spec = tabHost.newTabSpec("third").setIndicator("Third",
                          res.getDrawable(R.drawable.ic_tab_third_xml))
                      .setContent(intent);
        tabHost.addTab(spec);
       
        intent = new Intent().setClass(this, InfoActivity.class);
        spec = tabHost.newTabSpec("info").setIndicator("Info",
                          res.getDrawable(R.drawable.ic_tab_info_xml))
                      .setContent(intent);
        tabHost.addTab(spec);
    }
}
Y listo, ya tenemos el esqueleto de nuestra aplicación montado. Así es como podría quedar:


La documentación oficial sobre TabLayout la podéis encontrar en (aqui) y para bajarse el código de la aplicación aquí.
Espero que os sirva!


LIBRO RECOMENDADO PARA APRENDER ANDROID

Uno de los libros fundamientales y que recomiendo para aprender Android y llegar a hacer aplicaciones profesionales es: Android 2 Application Developement de Reto Meier




No hay comentarios :

Publicar un comentario