Anuncios

Bienvenidos sean a este post, hoy vamos a ver como utilizar las pestañas, tambien conocidos como tabs, las cuales son muy utiles para mostrar varios elementos sin tener necesidad de cambiar por otras vistas, en este caso siempre van a ser dos elementos principales, FragmentTabHost y TabWidget, el primero sera la raiz de nuestra vista y contendra al segundo para poder visualizar un layout del tipo FrameLayout, para un mejor aprendizaje pasemos a un ejemplo para entenderlo un poco mejor, para ello vamos a generar un nuevo proyecto con la siguientes caracteristicas:

  • Dispositivos: Phone and Tablet
  • Actividad: Empty Activity
  • Nombre: Tabs
  • Nombre de paquete: org.example.tabs
  • API Minimo: API 14 (Android 4.0)

Una vez generado nuestro nuevo proyecto vamos a modificar el archivo activity_main.xml con el siguiente codigo:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentTabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabHost"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />
        <FrameLayout
            android:id="@+id/tabContent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</androidx.fragment.app.FragmentTabHost>
Anuncios

En este nuevo codigo usaremos como layout supremo FragmentTabHost, en este layout usaremos un LinearLayout para el formato interno, internamente en este layout usaremos primero un TabWidget para ubicar a nuestras pestañas (Tabs) y despues un FrameLayout para mostrar el contenido de cada una de las pestañas, esto que ven hecho por codigo se puede hacer a traves del diseñador pero no me parecio muy practico mostrarlo por aca, con esto ya tenemos hecho el contenedor para mostrar nuestras pestañas, para nuestro siguiente paso vamos a crear un nuevo recurso en el recurso layout.

Hacemos click con el boton derecho sobre el recurso layout y elegimos New -> Layout resource file

android21

Una vez seleccionado nos aparecera el siguiente cuadro

Anuncios

Aca le vamos a asignar en File Name el valor tab1, y el resto vamos a dejarlo como aparece y pulsamos Ok donde volveremos a la IDE, solamente nos resta agregar un elemento, en este caso el TextView, para ello vamos a modificar el codigo actual con el siguiente:

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/texto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:text="Pestaña 1" />

</LinearLayout>

Este es un layout simple donde tendremos un LinearLayout para el formato general y dentro un TextView, el cual tendra un id con el valor texto, usara una propiedad gravity, esta permite ubicar como queramos nuestro texto, en el centro horizontal (center_horizontal) y centro vertical (center_vertical), por ultimo tendra el texto Pestaña 1, nuestro siguiente paso sera crear una clase de Java para este layout, para eso haremos click con el boton derecho sobre el contenedor donde estan nuestras clases Java seleccionaremos New -> Java Class como se ve en la siguiente imagen

Anuncios

Nos aparecera el siguiente cuadro

Anuncios

Aca unicamente modificaremos un campo, Name y le asignaremos el valor Tab1, para crear nuestras clase con ese nombre, una vez dejado como en la imagen, pulsamos Ok y se creara un nueva clase de Java, y debera quedar de la siguiente forma

Con nuestro archivo modificaremos el codigo creado automaticamente por el siguiente:

Tab1.java

package org.example.tabs;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class Tab1 extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflador,
                             ViewGroup contenedor,
                             Bundle savedInstanceState){
        return inflador.inflate(R.layout.tab1,
                contenedor,false);
    }
}
Anuncios

Las lineas import pueden agregarlas a mano u omitirlas y que se vayan agregando a medida que vamos escribiendo el codigo y apretar Alt+Enter cuando el editor de Android Studio nos lo sugiere, en cualquiera de los dos casos es valido siempre y cuando no se olviden ningun paquete, el codigo se encargara de mositrar el contenido del archivo XML asociado, en este caso tab1.xml, en el momento que esta clase de java sea invocada por el codigo de MainActivity.java pero eso lo veremos mas adelante, ahora vamos a hacer un procedimiento para copiar nuestros archivos, primero vamos al recurso layout, presionamos Ctrl + C sobre el archivo tab1.xml o hacemos click con el boton derecho y elegimos Copy sobre el mismo como se ve en la siguiente imagen

android32

Y luego sobre el recurso layout presionamos Ctrl+V o hacen click con el boton derecho y eligen Paste como se ve en la siguiente imagen

android33
Anuncios

En cualquiera de los dos casos si esta hecho correctamente debera aparecer el siguiente cuadro

android34

Modifiquen el campo New Name a tab2.xml y pulsen Ok para copiar el archivo tab1.xml con el nuevo nombre quedando como se ve en la siguiente imagen

android35
Anuncios

Ahora veamos el codigo fuente del nuevo archivo tab2.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/texto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:text="Pestaña 3" />

</LinearLayout>

Como pueden ver mantuvo todas las propiedades y modificaciones realizadas en el archivo tab1.xml, ahora podemos modificar el texto por medio de las propiedades del elemento o por medio del codigo fuente y les recomiendo modificarlo a Pestaña 2, es decir si lo modifican por codigo la linea quedara asi:

android:text="Pestaña 2"

Quedandonos el codigo de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">

    <TextView
         android:id="@+id/texto"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center_vertical|center_horizontal"
         android:text="Pestaña 2"
         android:textAppearance="@android:style/TextAppearance.Medium" />
</LinearLayout>
Anuncios

Ahora vamos a hacer el mismo procedimiento para la clase Java, primero volvemos al recuro java y ahi elegimos el archivo Tab1.java y podemos presionar Ctrl + C o click con el boton derecho y elegimos Copy como se ve en la siguiente imagen

android36

Y sobre el recurso de java podes presionar Ctrl+V o click con el boton derecho y elegir Paste

Anuncios
android37

En cualquiera de los dos casos, despues aparecera el siguiente cuadro

android38
Anuncios

Donde en New Name pondremos Tab2 y luego pulsaremos Ok, esto generara una nueva clase con el siguiente codigo:

package org.example.tabs;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class Tab2 extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflador,
                             ViewGroup contenedor,
                             Bundle savedInstanceState){
        return inflador.inflate(R.layout.tab1,
                contenedor,false);
    }
}
Anuncios

Como pueden ver el codigo se replico exactamente del primer ejemplo y tambien modifico la public class para que apunte al nuevo nombre de la clase pero debemos hacer una sola modificacion en la siguiente linea:

return inflater.inflate(R.layout.tab1, container, false);

La modificaremos por esta:

return inflater.inflate(R.layout.tab2, container, false);

Entonces el codigo nos quedara de la siguiente manera:

package org.example.tabs;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab2 extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState){
        return inflater.inflate(R.layout.tab2, container, false);
    }
}
Anuncios

Con esta modificacion hecha deberiamos hacerlo lo mismo con tab2.xml y Tab2.java, copiandolo y pegandolo de nuevo pero modificandole el nombre a tab3.xml y Tab3.java, Despues deberiamos hacer las modificaciones hechas anteriormente, es decir en el archivo tab3.xml cambiemos esta linea:

android:text="Pestaña 2"

por la siguiente linea:

android:text="Pestaña 3"

Y en el archivo Tab3.java debemos modificar la siguiente linea:

return inflater.inflate(R.layout.tab2, container, false);

por esta otra:

return inflater.inflate(R.layout.tab3, container, false);

Con estos seis archivos creados ahora procederemos a modificar el archivo MainActivity.java para dejar nuestra app completamente funcional, si siguieron bien todos los pasos debera quedar algo asi:

Anuncios

Ahora si, procederemos a modificar el archivo MainActivity.java con el siguiente codigo:

package org.example.tabs;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTabHost;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost tabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost = (FragmentTabHost) findViewById(R.id.tabHost);
        tabHost.setup(this,
                getSupportFragmentManager(),
                android.R.id.tabcontent);
        tabHost.addTab(
                tabHost.newTabSpec("tab1").setIndicator("Pestaña 1"),
                Tab1.class,
                null);
        tabHost.addTab(
                tabHost.newTabSpec("tab2").setIndicator("Pestaña 2"),
                Tab2.class,
                null);
        tabHost.addTab(
                tabHost.newTabSpec("tab3").setIndicator("Pestaña 3"),
                Tab3.class,
                null);
    }
}
Anuncios

Analicemos el codigo fuente, en este caso vamos a crear un objeto llamado tabHost, al cual en el metodo onCreate() le asignaremos el elemento tabhost por medio del metodo findViewById(), una vez hecho esto utilizaremos el metodo setup(), para que sea el contenedor por medio del layout tabcontent, y luego solamente agregaremos las pestañas (tabs) correspondientes, por medio del metodo addTab(), primero le diremos que cree un nueva pestaña con la etiqueta tabX, donde X correspondera al numero de pestaña (p.e. tab1), seguido del metodo setIndicator() donde pondremos el titulo identificador de la misma, para luego indicarle cual clase de java debe utilizar, por ejemplo Tab1.class correspondera a la primera pestaña identificada por medio de tab1 y el ultimo campo es para pasar informacion a la pestaña pero como nosotros no queremos hacerlo en este momento los dejamos como null, con todo esto realizado procederemos a ejecutar nuestra app para ver como queda finalmente

Si lograron lo mismo que se ve en el video, Felicitaciones!!! Han logrado crear su primera app con la opcion de pestañas, tabuladores, tabs o como quieran llamarlo, lo cual es de gran ayuda para tener algunas opciones sin necesidad de cambiar de vistas.

Anuncios

En resumen, hoy hemos aprendido sobre las pestañas (tabs), hemos visto como se debe crear una estructura principal para utilizarla por medio de FragmentTabHost, luego hemos visto que para cada pestaña se puede crear un archivo XML donde contendra una informacion X y a su vez debera ir acompañada de una clase de Java, en este caso para mostrar la informacion del archivo XML, y por ultimo hemos visto como se realiza por medio de java la creacion de nuestro contenedor, y como se le asignan las pestañas deseadas. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00