Skip to content

Implémentation correcte de ViewPager2 dans Android

Lorenzo, membre de cette équipe de travail, nous a fait la faveur de créer cette chronique car il maîtrise parfaitement le sujet.

Solution :

UPDATE 7

Vérification : migration de ViewPager vers ViewPager2

Vérifier : Créer des vues glissantes avec des onglets en utilisant ViewPager2

UPDATE 6

Consultez ma réponse si vous voulez mettre en œuvre un carrousel en utilisant View Pager2.

UPDATE 5

Comment utiliser TabLayout avec ViewPager2

EXEMPLE DE CODE

Utiliser ci-dessous dependencies

implementation 'com.google.android.material:material:1.1.0-alpha08'
implementation 'androidx.viewpager2:viewpager2:1.0.0-beta02'

CODE EXEMPLE

Mise en page XMl




    

        

        
    

    


Activité

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import com.google.android.material.tabs.TabLayoutMediator

import com.google.android.material.tabs.TabLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

//        setSupportActionBar(toolbar)
        viewpager.adapter = AppViewPagerAdapter(supportFragmentManager, lifecycle)

        TabLayoutMediator(tabs, viewpager, object : TabLayoutMediator.OnConfigureTabCallback {
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
                // Styling each tab here
                tab.text = "Tab $position"
            }
        }).attach()

    }
}

SORTIE

TabLayout avec ViewPager2

A partir de Docs

ViewPager2

Nouvelles fonctionnalités

  • Prise en charge de la mise en page de droite à gauche (RTL).
  • Support de l'orientation verticale
  • notifyDataSetChanged entièrement fonctionnel

Modifications de l'API

  • FragmentStateAdapter remplace FragmentStatePagerAdapter
  • RecyclerView.Adapter remplace PagerAdapter
  • registerOnPageChangeCallback remplace addPageChangeListener

EXEMPLE DE CODE

ajoute le dernier dependencies pour ViewPager2

implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

mise en page




    


activité

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import java.util.ArrayList;

public class MyActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    MyAdapter MyAdapter;
    private ArrayList arrayList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        myViewPager2 = findViewById(R.id.view_pager);

        arrayList.add("Item 1");
        arrayList.add("Item 2");
        arrayList.add("Item 3");
        arrayList.add("Item 4");
        arrayList.add("Item 5");

        MyAdapter = new MyAdapter(this, arrayList);

        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(MyAdapter);
    }
}

MonAdaptateur

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter {

    private Context context;
    private ArrayList arrayList = new ArrayList<>();

    public MyAdapter(Context context, ArrayList arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.tvName.setText(arrayList.get(position));
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tvName;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.tvName);
        }
    }
}

Nouvelles fonctionnalités

maintenant nous devons utiliser ViewPager2.OnPageChangeCallback() pour obtenir l'événement Swipe de ViewPager2

EXEMPLE DE CODE

    myViewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }

        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);

            Log.e("Selected_Page", String.valueOf(position));
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            super.onPageScrollStateChanged(state);
        }
    });

nous pouvons définir l'orientation en utilisant myViewPager2.setOrientation()

CODE EXEMPLE

Pour HORIZONTAL Orientation utilisez

myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

Pour VERTICAL Orientation utiliser

myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

On peut utiliser notifyDataSetChanged comme nous l'utilisons dans RecyclerView.Adapter

EXEMPLE DE CODE pour ajouter un nouvel élément

    btnAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            arrayList.add("New ITEM ADDED");
            MyAdapter.notifyDataSetChanged();
        }
    });

EXEMPLE DE CODE pour supprimer un nouvel élément

    btnRemove.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            arrayList.remove(3);
            MyAdapter.notifyItemRemoved(3);
        }
    });

MISE A JOUR

Essayez ceci si vous voulez utiliser Fragment avec ViewPager2

Créez d'abord un ViewPagerFragmentAdapter qui étend FragmentStateAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList arrayList = new ArrayList<>();

    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }

    public void addFragment(Fragment fragment) {
        arrayList.add(fragment);
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }
}

Maintenant, utilisez comme ceci dans votre activité

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myViewPager2 = findViewById(R.id.view_pager);

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);

    }

}

pour plus d'informations, vérifiez ceci

  • ViewPager2
  • ViewPager2 sous le capot
  • Les mains sur ViewPager2

UPDATE 2

Version 1.0.0-alpha02

Nouvelles fonctionnalités

  • Possibilité de désactiver la saisie utilisateur (setUserInputEnabled, isUserInputEnabled)

Modifications de l'API

  • ViewPager2 classe finale

Correction de bogues

  • FragmentStateAdapter corrections de stabilité

CODE EXEMPLE pour désactiver le swiping dans le viewpager2.

myViewPager2.setUserInputEnabled(false);// SAMPLE CODE to disable swiping in viewpager2

myViewPager2.setUserInputEnabled(true);//SAMPLE CODE to enable swiping in viewpager2

MISE A JOUR 3

Version 1.0.0-alpha03

Nouvelles fonctionnalités

  • Possibilité de faire défiler programmatiquement le ViewPager2 : fakeDragBy(offsetPx).

Modifications de l'API

  • FragmentStateAdapter nécessite maintenant un Lifecycle . Deux constructeurs utilitaires ont été ajoutés pour l'obtenir de l'hôte. FragmentActivity ou du fragment d'hôte

CODE EXEMPLE

ViewPagerFragmentAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList arrayList = new ArrayList<>();

    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }

    public void addFragment(Fragment fragment) {
        arrayList.add(fragment);
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }
}

Code de l'activité principale

import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myViewPager2=findViewById(R.id.view_pager);
        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);
    }
}

UPDATE 4

Version 1.0.0-alpha05
Nouvelles fonctionnalités

  • ItemDecorator introduites avec un comportement cohérent avec RecyclerView.
  • MarginPageTransformer introduit pour fournir une capacité de créer un espace entre les pages (en dehors de l'insertion de page).
  • CompositePageTransformer introduit pour fournir une capacité à combiner plusieurs PageTransformers

Modifications de l'API

  • FragmentStateAdapter#getItem méthode renommée en FragmentStateAdapter#createFragment - le nom de méthode précédent s'est avéré être une source de bugs dans le passé.
  • OFFSCREEN_PAGE_LIMIT_DEFAULT valeur changée de 0 à -1. Il n'est pas nécessaire de modifier le code client si la valeur OFFSCREEN_PAGE_LIMIT_DEFAULTconstant utilisé.

CODE SAMPLE

Code d'activité

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.MarginPageTransformer;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;
    private ArrayList arrayList = new ArrayList<>();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myViewPager2 = findViewById(R.id.myViewPager2);

        // add Fragments in your ViewPagerFragmentAdapter class
        arrayList.add(new FragmentOne());
        arrayList.add(new Fragmenttwo());
        arrayList.add(new FragmentThree());

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());
        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        myViewPager2.setAdapter(myAdapter);

        myViewPager2.setPageTransformer(new MarginPageTransformer(1500));

    }
}

ViewPagerFragmentAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList arrayList = new ArrayList<>();

    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new FragmentOne();
            case 1:
                return new Fragmenttwo();
            case 2:
                return new FragmentThree();

        }
        return null;
    }

    @Override
    public int getItemCount() {
        return 3;
    }
}

En fait, il existe maintenant un repo officiel de samples pour ViewPager2 (lien ci-dessous).

  • https://github.com/android/views-widgets-samples/tree/master/ViewPager2

Le repo contient les échantillons suivants (Citation du readme du repo ci-dessous).

Echantillons

  • ViewPager2 with Views - montre comment configurer un ViewPager2 avec des Views comme pages.
  • ViewPager2 with Fragments - montre comment configurer un ViewPager2 avec des fragments en tant que pages.
  • ViewPager2 avec une collection mutable (Views) - montre l'utilisation de ViewPager2 avec des Views comme pages et des mutations dans un adaptateur de page.
  • ViewPager2 with a Mutable Collection (Fragments) - Démonstration de l'utilisation de ViewPager2 avec des fragments en tant que pages, et des mutations dans un
    adaptateur de page
  • ViewPager2 avec un TabLayout (Views) - montre comment configurer un ViewPager2 avec des Views comme pages, et le lier à un TabLayout.

Exemple simple de ViewPager2 avec des fragments en Kotlin.

activité_main.xml




    


Activité principale.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPager2 = findViewById(R.id.pager2_container)

        val fragmentList = arrayListOf(
            FirstFragment.newInstance(),
            SecondFragment.newInstance(),
            ThirdFragment.newInstance()
        )
        viewPager2.adapter = ViewPagerAdapter(this, fragmentList)
   }
}

FirstFragment.kt (SecondFragment.kt et ThirdFragment.kt ressemble à FirstFragment.kt)

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    companion object{
        fun newInstance() = FirstFragment()
    }
}

ViewPagerAdapter.kt

class ViewPagerAdapter(fa:FragmentActivity, private val fragments:ArrayList): FragmentStateAdapter(fa) {

    override fun getItemCount(): Int = fragments.size

    override fun createFragment(position: Int): Fragment = fragments[position]

}

Quelques autres ressources utiles :

  • Référence de l'API :
    https://developer.android.com/reference/androidx/viewpager2/widget/ViewPager2
  • Formation : https://developer.android.com/training/animation/screen-slide-2

  • Notes de version : https://developer.android.com/jetpack/androidx/releases/viewpager2

  • Article Medium par un GDE : Exploration du ViewPager2

Utilisation de ViewPager2 dans Android

Comme mentionné sur le site des développeurs

Modifications de l'API

FragmentStateAdapter remplace FragmentStatePagerAdapter

RecyclerView.Adapter remplace PagerAdapter

registerOnPageChangeCallback remplace addPageChangeListener

En mots simples, ils font fonctionner l'adaptateur View Pager comme l'adaptateur RecycleView.

Note:- Nous n'avons pas besoin d'utiliser le fragment dans le View Pager 2. Il est entièrement dépendant de RecyclerView.Adapter inflate layout.

Voici un exemple de lien de repo gitHub

Exemple:-

MainActivity.class

public class MainActivity extends AppCompatActivity {

    private ViewPager2 mPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setTitle("View Pager 2");
        mPager = findViewById(R.id.pager);
        mPager.setAdapter(new MyViewPagerAdapter(this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (R.id.change == item.getItemId()) {
            mPager.setOrientation(mPager.getOrientation() != ViewPager2.ORIENTATION_VERTICAL ? ViewPager2.ORIENTATION_VERTICAL : ViewPager2.ORIENTATION_HORIZONTAL);
        }
        return super.onOptionsItemSelected(item);
    }
}

activité_main.xml




    


MyViewPagerAdapter.class

public class MyViewPagerAdapter extends RecyclerView.Adapter {

    private Context context;

    public MyViewPagerAdapter(Context context) {
        this.context=context;
    }

    @NonNull
    @Override
    public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new MyHolder(LayoutInflater.from(context).inflate(R.layout.cell_item, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull MyHolder holder, int position) {
      holder.mText.setText("Page "+(position+1));
    }

    @Override
    public int getItemCount() {
        return 10;
    }
}

cell_item.xml




    


MyHolder.class

class MyHolder extends RecyclerView.ViewHolder {

    public TextView mText;

    public MyHolder(@NonNull View itemView) {
        super(itemView);
        mText = itemView.findViewById(R.id.text);
    }
}

sortie :

enter image description here

Notes et avis

N'oubliez pas que vous avez la possibilité de revoir votre expérience si elle vous a été utile.



Utilisez notre moteur de recherche

Ricerca
Generic filters

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.