Cómo crear Swipe Navigation en una aplicación de Android

Cuando se habla de Apps Android , lo primero que se nos viene a la mente es la variedad. Hay tantas variedades de aplicaciones de Android que brindan al usuario una hermosa interfaz de usuario dinámica. Una de esas características es navegar en nuestras aplicaciones de Android deslizando el dedo hacia la izquierda y hacia la derecha en lugar de hacer clic en los botones. No solo se ve más simple y elegante, sino que también brinda facilidad de acceso al usuario. Hay muchas aplicaciones que utilizan esta función de deslizamiento para pasar por diferentes actividades en la aplicación. Por ejemplo, la popular aplicación de chat, Snapchat, la usa para pasar lentes, chats e historias. Aquí, aprenderemos cómo implementar vistas de deslizamiento en nuestra propia aplicación de Android.

Podemos implementar esto mediante el uso de dos características:

1. Fragmentos Un fragmento es solo una parte de una actividad. Podemos tener un fragmento que ocupe parte de una pantalla o una pantalla completa. O podemos mostrar varios fragmentos al mismo tiempo para formar una pantalla completa. Dentro de una actividad, también podemos intercambiar diferentes fragmentos entre sí. 
2. ViewPager ViewPager es una clase en Java que se usa junto con Fragmentos. Se utiliza principalmente para diseñar la interfaz de usuario de la aplicación.

¿Como funciona?
Primero necesitamos configurar un adaptador en el ViewPager usando el método setAdapter() . El adaptador que configuramos se llama FragmentPagerAdapter , que es una clase abstracta en Java. Por lo tanto, creamos nuestro propio SampleFragmentPagerAdapter que se extiende desde FragmentPagerAdapter y muestra nuestros Fragmentos en la pantalla. Cuando iniciamos la aplicación en nuestro dispositivo, ViewPager le pregunta a SampleFragmentPagerAdapter cuántas páginas hay para pasar. obtenerCuenta ()El método del adaptador devuelve esta respuesta al ViewPager. Luego, ViewPager solicita el Fragmento que está en la posición 0 y el adaptador devuelve ese fragmento en particular que luego ViewPager muestra en nuestra pantalla. Cuando deslizamos hacia la izquierda, ViewPager le pide al adaptador el Fragmento en la primera posición y, de manera similar, se muestra en la pantalla y continúa así.

Implementación paso a paso:
crearemos tres fragmentos, es decir, tres pantallas por las que el usuario puede pasar. Luego agregaremos estos fragmentos a nuestro FragmentPagerAdapter y finalmente lo configuraremos en ViewPager. 
Nota: para ejecutar estos códigos, debe copiarlos y pegarlos en Android Studio, ya que no se ejecutará en el IDE.

• Paso 1: creación de fragmentos: 
  para crear un fragmento, haga clic en aplicación > Java > com.example.android (clic derecho) > Nuevo > Fragmento > Fragmento (en blanco) 
   

  

  Podemos crear tantos Fragmentos como queramos, pero dado que solo mostraremos tres pantallas, crearemos tres Fragmentos. 
  Ahora abriremos nuestros Fragmentos y copiaremos este código allí:
   

  Java

  package com.example.android.gfg;    import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;    public class Fragment1 extends Fragment {        @Override     public View onCreateView(         LayoutInflater inflater,         ViewGroup container,         Bundle savedInstanceState)     {         return inflater             .inflate(                 R.layout.fragment_1,                 container, false);     } }

  Explicación: 
   

  • Estamos importando Fragmento v4 con BuildTools versión » 23.0.2 « . Si recibimos un error en nuestras importaciones, debemos asegurarnos de que nuestra versión de BuildTools y SDK corresponda a las bibliotecas que importamos.
  • Nombramos nuestro Fragmento como Fragment1.
  • Fragment1 muestra el diseño fragment_1.xml que haremos ahora.

• Paso 2: crear diseños para fragmentos: 
  cada fragmento debe mostrar un diseño. Podemos diseñar este diseño como queramos. Aquí está el código de cómo implementaríamos este diseño como:
   

  XML

  <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:padding="16dp">        <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/gfg"/>        <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, GeeksforGeeks is a one-stop solution. "         android:textSize="20sp"         android:textColor="#81c784"/> </LinearLayout>

  Esto parece: 
   

  

  Del mismo modo, crearemos dos Fragmentos más y un diseño respectivo para cada uno de ellos.

• Paso 3: Creación de nuestro FragmentPageAdapter: 
  Ahora que tenemos los tres Fragmentos y tres diseños asociados con cada uno de ellos, construiremos nuestro FragmentPageAdapter y lo llamaremos SimpleFragmentPageAdapter . Esto se puede hacer creando primero una nueva clase Java y nombrándola como SimpleFragmentPageAdapter. Aquí está el código que contendrá:
   

  Java

  package com.example.android.gfg;    import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter;    public class SimpleFragmentPagerAdapter     extends FragmentPagerAdapter {        public SimpleFragmentPagerAdapter(         FragmentManager fm)     {         super(fm);     }        @Override     public Fragment getItem(int position)     {         if (position == 0) {             return new Fragment1();         }         else if (position == 1) {             return new Fragment2();         }         else {             return new Fragmnet3();         }     }        @Override     public int getCount()     {         return 3;     } }

  Explicación: 
   

  • El método getItem() devuelve el Fragmento en la posición especificada. Entonces, primero será Fragment1 y al deslizar hacia la izquierda, obtendremos los otros Fragmentos en el mismo orden.
  • El método getCount() devuelve el número de fragmentos que se van a mostrar, que en este caso son tres.

• Paso 3: Creando MainActivity.Java y activity_main.xml: 
  Ahora que tenemos todo listo, el último paso es crear nuestros archivos MainActivity.Java y activity_main.xml. Pueden variar en gran medida según la aplicación que estemos creando, pero en este caso, los archivos son bastante simples y se ven así: 

  actividad_principal.xml

  <?xml version="1.0" encoding="utf-8"?>    <LinearLayout     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:orientation="vertical"     tools:context="com.example.android.viewpager.MainActivity">        <android.support.v4.view.ViewPager         android:id="@+id/viewpager"         android:layout_width="match_parent"         android:layout_height="match_parent" />    </LinearLayout>

  MainActivity.Java

  package com.example.android.gfg;    import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity;    public class MainActivity     extends AppCompatActivity {        @Override     protected void onCreate(         Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);            // Set the content of the activity         // to use the activity_main.xml         // layout file         setContentView(R.layout.activity_main);            // Find the view pager that will         // allow the user to swipe         // between fragments         ViewPager viewPager             = (ViewPager)findViewById(                 R.id.viewpager);            // Create an adapter that         // knows which fragment should         // be shown on each page         SimpleFragmentPagerAdapter             adapter             = new SimpleFragmentPagerAdapter(                 getSupportFragmentManager());            // Set the adapter onto         // the view pager         viewPager.setAdapter(adapter);     } }

  Producción: