Android funciona con ViewPager2, TabLayout y transformadores de página

Como todos sabemos, el equipo de Android lanza constantemente nuevas actualizaciones y mejoras para Android Framework. Uno de los componentes que recibió actualizaciones críticas es ViewPager2. ViewPager2 es el reemplazo de ViewPager y ha recibido pocas mejoras de rendimiento y características adicionales. Usar ViewPager2deberías considerar usar androidx Artefactos en su proyecto.

En mi tutorial anterior, expliqué cómo crear controles deslizantes de introducción para su aplicación usando ViewPager. En este artículo, intentaremos lo mismo, pero usaremos ViewPager2. También repasaremos las características interesantes adicionales de ViewPager2.

MANIFESTACIÓN

¿Qué hay de nuevo en ViewPager2?

• ViewPager2 es una versión improvisada de ViewPager que proporciona funcionalidad adicional y corrige problemas comunes en ViewPager.
• ViewPager2 se basa en RecyclerView. Así que tiene las grandes ventajas que ofrece RecyclerView. Por ejemplo, puede utilizar DiffUtils para calcular de manera eficiente la diferencia entre conjuntos de datos y actualizar ViewPager con animaciones.
• Compatible con ViewPager2 orientación vertical. El deslizamiento vertical anterior se realiza ajustando ViewPager.
• ViewPager2 tiene De derecha a izquierda(RTL) y esto se activa automáticamente según la configuración regional de la aplicación.
• Si está trabajando con una colección de fragmentos, llámelos notificarDatasetChanged () actualiza correctamente la interfaz de usuario cuando un fragmento subyacente cambia su interfaz de usuario.
• Compatible con ViewPager2 Transformaciones de página es decir, puede proporcionar animación al cambiar de página. También puede escribir su propia transformación de página personalizada.
• Adaptador de buscapersonas es reemplazado por RecyclerView.Adapter ya que se basa en RecyclerView.
• FragmentStatePagerAdapter es reemplazado por FragmentStateAdapter.

En primer lugar ViewPager2, agrega la dependencia app / build.gradle.

implementation "androidx.viewpager2:viewpager2:1.0.0"

1. ViewPager con vistas estáticas

Por lo general, ViewPager se usa para crear una vista con pestañas combinando TabLayout y colección de Fragmentos. Sin embargo, si desea vistas estáticas sin la clase Fragmento, puede usarlas con RecyclerView Clase de adaptador.

A continuación se muestra un ejemplo de la implementación Diapositivas de introducción con ViewPager2. Los diseños son de mi ejemplo anterior de creación de un control deslizante de introducción para su aplicación. Sin embargo, la parte de implementación varía debido a cambios en ViewPager2 y en la clase de adaptador.

Agregue ViewPager2 a su archivo de diseño. Puede ver que el espacio de nombres usa el paquete AndroidX androidx.viewpager2.widget.ViewPager2.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto".../>

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

<RelativeLayout/>

public class ViewsSliderActivity extends AppCompatActivity 
    private ViewsSliderAdapter mAdapter;
    private TextView[] dots;
    private int[] layouts;
    private ActivityViewsSliderBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        binding = ActivityViewsSliderBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        init();
    

    private void init() 
        // layouts of all welcome sliders
        // add few more layouts if you want
        layouts = new int[]
                R.layout.slide_one,
                R.layout.slide_two,
                R.layout.slide_three,
                R.layout.slide_four;

        mAdapter = new ViewsSliderAdapter();
        binding.viewPager.setAdapter(mAdapter);
        binding.viewPager.registerOnPageChangeCallback(pageChangeCallback);

        binding.btnSkip.setOnClickListener(v -> launchHomeScreen());

        binding.btnNext.setOnClickListener(v -> 
            // checking for last page
            // if last page home screen will be launched
            int current = getItem(+1);
            if (current < layouts.length) 
                // move to next screen
                binding.viewPager.setCurrentItem(current);
             else 
                launchHomeScreen();
            
        );

        binding.iconMore.setOnClickListener(view -> 
            showMenu(view);
        );

        // adding bottom dots
        addBottomDots(0);
    

    /*
     * Adds bottom dots indicator
     * */
    private void addBottomDots(int currentPage) 
        dots = new TextView[layouts.length];

        int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
        int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

        binding.layoutDots.removeAllViews();
        for (int i = 0; i < dots.length; i++) 
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(colorsInactive[currentPage]);
            binding.layoutDots.addView(dots[i]);
        

        if (dots.length > 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    

    private int getItem(int i) 
        return binding.viewPager.getCurrentItem() + i;
    

    private void launchHomeScreen() 
        Toast.makeText(this, R.string.slides_ended, Toast.LENGTH_LONG).show();
        finish();
    

    private void showMenu(View view) 
        PopupMenu popup = new PopupMenu(this, view);
        MenuInflater inflater = popup.getMenuInflater();
        inflater.inflate(R.menu.pager_transformers, popup.getMenu());
        popup.setOnMenuItemClickListener(item -> 
            if (item.getItemId() == R.id.action_orientation) 
                binding.viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
             else 
                binding.viewPager.setPageTransformer(Utils.getTransformer(item.getItemId()));
                binding.viewPager.setCurrentItem(0);
                binding.viewPager.getAdapter().notifyDataSetChanged();
            
            return false;
        );
        popup.show();
    

    /*
     * ViewPager page change listener
     */
    ViewPager2.OnPageChangeCallback pageChangeCallback = new ViewPager2.OnPageChangeCallback() 
        @Override
        public void onPageSelected(int position) 
            super.onPageSelected(position);
            addBottomDots(position);

            // changing the next button text 'NEXT' / 'GOT IT'
            if (position == layouts.length - 1) 
                // last page. make button text to GOT IT
                binding.btnNext.setText(getString(R.string.start));
                binding.btnSkip.setVisibility(View.GONE);
             else 
                // still pages are left
                binding.btnNext.setText(getString(R.string.next));
                binding.btnSkip.setVisibility(View.VISIBLE);
            
        
    ;

    public class ViewsSliderAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> 

        public ViewsSliderAdapter() 
        

        @NonNull
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) 
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(viewType, parent, false);
            return new SliderViewHolder(view);
        

        @Override
        public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) 

        

        @Override
        public int getItemViewType(int position) 
            return layouts[position];
        

        @Override
        public int getItemCount() 
            return layouts.length;
        

        public class SliderViewHolder extends RecyclerView.ViewHolder 
            public TextView title, year, genre;

            public SliderViewHolder(View view) 
                super(view);
            
        
    

Esto crea vistas deslizables horizontalmente que se crean utilizando diseños XML estáticos. Puede encontrar el código completo de este ejemplo aquí.

2. ViewPager con pestañas y fragmentos

Si desea crear vistas de deslizamiento con pestañas, puede combinarlas ViewPager2, TabLayout y Fragmentos.

Usar TabLayoutAgregue componentes de material a su paquete. Esto hará que el material TabLayout esté disponible en su proyecto.

implementation 'com.google.android.material:material:1.2.0-alpha01'

Agregar TabLayout y ViewPage2 a su diseño.

Cree las clases de fragmentos de prueba necesarias MoviesFragment, EventosFragmento y Entradas Fragmento.

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

import androidx.fragment.app.Fragment;

import info.androidhive.viewpager2.R;

public class MoviesFragment extends Fragment 

    @Override
    public View onCreateView(
            LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState
    ) 
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_movies, container, false);
    

Finalmente, cree una clase de adaptador que exponga fragmentos a ViewPager. Aquí podemos ver ViewPagerFragmentAdapter expandido FragmentStateAdapter.

3. Alineación de ViewPager2

En algunos escenarios, es posible que desee proporcionar un barrido vertical en lugar de un barrido horizontal tradicional. Agregar para habilitar el deslizamiento vertical Android: orientación al elemento ViewPager2.

<androidx.viewpager2.widget.ViewPager2
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

La alineación vertical también se puede activar mediante programación invocándola setOrientation () Método.

viewPager.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

4. Transformadores de ViewPager

Otra gran característica de ViewPager2 es la transformación de página, que es la animación de la transición de una página a otra. Tradicionalmente vemos una animación deslizante entre dos pantallas. Esta animación se puede personalizar proporcionando transformadores laterales ViewPage2.

Úselo para establecer una transformación personalizada setPageTransformer () Método. El siguiente ejemplo crea Dar la vuelta Animación entre páginas.

package info.androidhive.viewpager2.transformers;

import android.view.View;

import androidx.viewpager2.widget.ViewPager2;

public class HorizontalFlipTransformation implements ViewPager2.PageTransformer 
    @Override
    public void transformPage(View page, float position) 

        page.setTranslationX(-position * page.getWidth());
        page.setCameraDistance(12000);

        if (position < 0.5 && position > -0.5) 
            page.setVisibility(View.VISIBLE);
         else 
            page.setVisibility(View.INVISIBLE);
        


        if (position < -1)      // [-Infinity,-1)
            page.setAlpha(0);

         else if (position <= 0)     // [-1,0]
            page.setAlpha(1);
            page.setRotationY(180 * (1 - Math.abs(position) + 1));

         else if (position <= 1)     // (0,1]
            page.setAlpha(1);
            page.setRotationY(-180 * (1 - Math.abs(position) + 1));

         else 
            page.setAlpha(0);
        
    

Esto crea una bonita animación de volteo vertical a medida que pasa las páginas.

A continuación se muestran una serie de transiciones de ViewPager que he recopilado de varias fuentes (Todos los créditos van a autores anteriores.).

1. Transformación anti-giro del reloj
2. Transformación de giro del reloj
3. Transformación de cubo en profundidad
4. Cubo en transformación de rotación
5. Cubo en transformación de escala
6. Transformación de profundidad de cubo
7. Transformación de rotación de cubo
8. Transformación de escalamiento de cubo hacia fuera
9. Transformador de lado profundo
10. Conversión de profundidad
11. Ocultar transformación
12. Transformación de fans
13. Molesta la transformación de giro
14. Transformación de puerta
15. Transformación de volteo horizontal
16. Transformación pop
17. Transformación giratoria
18. Transformación de lanzamiento
19. Transformación de volteo vertical
20. Transformación de cierre vertical
21. Reducir el tamaño del transformador lateral

Referencias de transformaciones:
Transformación de viewpager
Loginworks