Comment implémenter un ViewPager avec différents Fragments / Layouts

Lorsque je lance une activité qui implémente viewpager, le visualiseur a créé divers fragments. Je souhaite utiliser des mises en page différentes pour chaque fragment, mais le problème est que le viewpager ne montre que deux mises en page au maximum (deuxième disposition sur tous les fragments restants après 1).

Voici le code de SwipeActivity qui implémente le viewpager:

public class SwipeActivity extends FragmentActivity { MyPageAdapter pageAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_swipe); pageAdapter = new MyPageAdapter(getSupportFragmentManager()); ViewPager pager=(ViewPager)findViewById(R.id.pager); pager.setAdapter(pageAdapter); ActionBar bar = getActionBar(); bar.setDisplayHomeAsUpEnabled(true); } /** * Custom Page adapter */ private class MyPageAdapter extends FragmentPagerAdapter { public MyPageAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return 5; } @Override public Fragment getItem(int position) { switch(position) { case 0: return new MyFragment(); case 1: return SecondFragment.newInstance("asdasd"); default : return RamFragment.newInstance("s"); } } } } 

Voici le code pour les fragments

 public class MyFragment extends Fragment { @Override public View onCreateView(LayoutInflater paramLayoutInflater, ViewGroup paramViewGroup, Bundle paramBundle) { return paramLayoutInflater.inflate(R.layout.processorlayout, paramViewGroup, false); } } 

J’ai utilisé 5 fragments comme celui-ci, tous ayant des configurations différentes, mais le viewpager n’en montre que 2 au maximum.

EDIT : code pour SecondFragment

 public class SecondFragment extends Fragment { public static final Ssortingng EXTRA_MESSAGE = "EXTRA_MESSAGE"; public static final SecondFragment newInstance(Ssortingng paramSsortingng) { SecondFragment f = new SecondFragment(); Bundle localBundle = new Bundle(1); localBundle.putSsortingng("EXTRA_MESSAGE", paramSsortingng); f.setArguments(localBundle); return f; } @Override public View onCreateView(LayoutInflater paramLayoutInflater, ViewGroup paramViewGroup, Bundle paramBundle) { return paramLayoutInflater.inflate(R.layout.motherboardlayout, paramViewGroup, false); } } 

Comme il s’agit d’une question très fréquemment posée, je voulais prendre le temps d’expliquer le ViewPager avec plusieurs fragments et mises en page en détail. Voici.

ViewPager avec plusieurs fragments et fichiers de disposition – Comment faire

Vous trouverez ci-dessous un exemple complet d’implémentation d’un ViewPager avec différents types de fragments et différents fichiers de disposition.

Dans ce cas, j’ai 3 classes de fragment et un fichier de mise en page différent pour chaque classe. Afin de garder les choses simples, la disposition des fragments ne diffère que par leur couleur de fond . Bien entendu, tout fichier de mise en page peut être utilisé pour les fragments.

FirstFragment.java a une disposition de fond orange , SecondFragment.java a une disposition de fond verte et ThirdFragment.java a une disposition de fond rouge . De plus, chaque fragment affiche un texte différent, en fonction de la classe dont il provient et de l’instance dans laquelle il se trouve.

Sachez également que j’utilise le fragment Fragment de la bibliothèque de support: android.support.v4.app.Fragment

MainActivity.java (Initialise le Viewpager et dispose de l’adaptateur en tant que classe interne). Encore une fois, regardez les importations . J’utilise le package android.support.v4 .

 import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager pager = (ViewPager) findViewById(R.id.viewPager); pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); } private class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int pos) { switch(pos) { case 0: return FirstFragment.newInstance("FirstFragment, Instance 1"); case 1: return SecondFragment.newInstance("SecondFragment, Instance 1"); case 2: return ThirdFragment.newInstance("ThirdFragment, Instance 1"); case 3: return ThirdFragment.newInstance("ThirdFragment, Instance 2"); case 4: return ThirdFragment.newInstance("ThirdFragment, Instance 3"); default: return ThirdFragment.newInstance("ThirdFragment, Default"); } } @Override public int getCount() { return 5; } } } 

activity_main.xml (le fichier .xml de MainActivity) – un fichier de mise en page simple, contenant uniquement le ViewPager qui remplit tout l’écran.

  

Les classes de fragment, FirstFragment.java import android.support.v4.app.Fragment;

 public class FirstFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.first_frag, container, false); TextView tv = (TextView) v.findViewById(R.id.tvFragFirst); tv.setText(getArguments().getSsortingng("msg")); return v; } public static FirstFragment newInstance(Ssortingng text) { FirstFragment f = new FirstFragment(); Bundle b = new Bundle(); b.putSsortingng("msg", text); f.setArguments(b); return f; } } 

first_frag.xml

 < ?xml version="1.0" encoding="utf-8"?>    

SecondFragment.java

 public class SecondFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.second_frag, container, false); TextView tv = (TextView) v.findViewById(R.id.tvFragSecond); tv.setText(getArguments().getSsortingng("msg")); return v; } public static SecondFragment newInstance(Ssortingng text) { SecondFragment f = new SecondFragment(); Bundle b = new Bundle(); b.putSsortingng("msg", text); f.setArguments(b); return f; } } 

second_frag.xml

 < ?xml version="1.0" encoding="utf-8"?>    

ThirdFragment.java

 public class ThirdFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.third_frag, container, false); TextView tv = (TextView) v.findViewById(R.id.tvFragThird); tv.setText(getArguments().getSsortingng("msg")); return v; } public static ThirdFragment newInstance(Ssortingng text) { ThirdFragment f = new ThirdFragment(); Bundle b = new Bundle(); b.putSsortingng("msg", text); f.setArguments(b); return f; } } 

third_frag.xml

 < ?xml version="1.0" encoding="utf-8"?>    

Le résultat final est le suivant:

Le Viewpager contient 5 Fragments, Fragments 1 est de type FirstFragment et affiche la disposition first_frag.xml, Fragment 2 de type SecondFragment et affiche les second_frag.xml et Fragment 3-5 de type ThirdFragment et tous affichent third_frag.xml .

entrer la description de l'image ici

Vous pouvez voir ci-dessus les 5 fragments entre lesquels vous pouvez passer par un balayage vers la gauche ou vers la droite. Un seul fragment peut bien sûr être affiché en même temps.

Enfin et surtout:

Je vous recommande d’utiliser un constructeur vide dans chacune de vos classes de fragment.

Au lieu de transférer les parameters potentiels via le constructeur, utilisez la newInstance(...) et le Bundle pour transférer les parameters.

De cette façon, s’il est détaché et attaché de nouveau, l’état de l’object peut être stocké via les arguments. Tout comme les Bundles attachés aux Intents .

Créez un tableau de vues et appliquez-le à: container.addView(viewarr[position]);

 public class Layoutes extends PagerAdapter { private Context context; private LayoutInflater layoutInflater; Layoutes(Context context){ this.context=context; } int layoutes[]={R.layout.one,R.layout.two,R.layout.three}; @Override public int getCount() { return layoutes.length; } @Override public boolean isViewFromObject(View view, Object object) { return (view==(LinearLayout)object); } @Override public Object instantiateItem(ViewGroup container, int position){ layoutInflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View one=layoutInflater.inflate(R.layout.one,container,false); View two=layoutInflater.inflate(R.layout.two,container,false); View three=layoutInflater.inflate(R.layout.three,container,false); View viewarr[]={one,two,three}; container.addView(viewarr[position]); return viewarr[position]; } @Override public void destroyItem(ViewGroup container, int position, Object object){ container.removeView((LinearLayout) object); } } 

Code pour append un fragment

 public Fragment getItem(int position) { switch (position){ case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); case 3: return new Fragment4(); default: break; } return null; } 

Créez un fichier xml pour chaque fragment dit Fragment1, utilisez fragment_one.xml comme fichier de mise en page, utilisez le code ci-dessous dans le fichier java Fragment1.

 public class Fragment1 extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_one, container, false); return view; } } 

Plus tard, vous pourrez apporter les corrections nécessaires. Cela a fonctionné pour moi.

C’est aussi bien:

  
 public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); ViewPager pager = (ViewPager) findViewById(R.id.viewPager); pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); } } public class FragmentTab1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragmenttab1, container, false); return rootView; } } class MyPagerAdapter extends FragmentPagerAdapter{ public MyPagerAdapter(FragmentManager fragmentManager){ super(fragmentManager); } @Override public android.support.v4.app.Fragment getItem(int position) { switch(position){ case 0: FragmentTab1 fm = new FragmentTab1(); return fm; case 1: return new FragmentTab2(); case 2: return new FragmentTab3(); } return null; } @Override public int getCount() { return 3; } } 
    

Exemple de base de ViewPager

Cette réponse simplifie la documentation , ce tutoriel et la réponse acceptée . Son but est d’obtenir un ViewPager opérationnel aussi rapidement que possible. D’autres modifications peuvent être apscopes après cela.

entrer la description de l'image ici

XML

Ajoutez les dispositions XML pour l’activité principale et pour chaque page (fragment). Dans notre cas, nous utilisons uniquement une disposition de fragment, mais si vous avez différentes dispositions sur les différentes pages, créez-en une pour chacune d’entre elles.

activity_main.xml

 < ?xml version="1.0" encoding="utf-8"?>    

fragment_one.xml

 < ?xml version="1.0" encoding="utf-8"?>    

Code

C’est le code de l’activité principale. Il inclut le PagerAdapter et le FragmentOne tant que classes internes. Si ceux-ci deviennent trop volumineux ou que vous les réutilisez à d’autres endroits, vous pouvez les déplacer dans leurs propres classes.

 import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; public class MainActivity extends AppCompatActivity { static final int NUMBER_OF_PAGES = 2; MyAdapter mAdapter; ViewPager mPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mAdapter = new MyAdapter(getSupportFragmentManager()); mPager = findViewById(R.id.viewpager); mPager.setAdapter(mAdapter); } public static class MyAdapter extends FragmentPagerAdapter { public MyAdapter(FragmentManager fm) { super(fm); } @Override public int getCount() { return NUMBER_OF_PAGES; } @Override public Fragment getItem(int position) { switch (position) { case 0: return FragmentOne.newInstance(0, Color.WHITE); case 1: // return a different Fragment class here // if you want want a completely different layout return FragmentOne.newInstance(1, Color.CYAN); default: return null; } } } public static class FragmentOne extends Fragment { private static final Ssortingng MY_NUM_KEY = "num"; private static final Ssortingng MY_COLOR_KEY = "color"; private int mNum; private int mColor; // You can modify the parameters to pass in whatever you want static FragmentOne newInstance(int num, int color) { FragmentOne f = new FragmentOne(); Bundle args = new Bundle(); args.putInt(MY_NUM_KEY, num); args.putInt(MY_COLOR_KEY, color); f.setArguments(args); return f; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mNum = getArguments() != null ? getArguments().getInt(MY_NUM_KEY) : 0; mColor = getArguments() != null ? getArguments().getInt(MY_COLOR_KEY) : Color.BLACK; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_one, container, false); v.setBackgroundColor(mColor); TextView textView = v.findViewById(R.id.textview); textView.setText("Page " + mNum); return v; } } } 

Fini

Si vous avez copié et collé les trois fichiers ci-dessus dans votre projet, vous devriez pouvoir exécuter l’application et voir le résultat dans l’animation ci-dessus.

Continuer

Vous pouvez faire beaucoup de choses avec ViewPagers. Voir les liens suivants pour commencer:

  • Création de vues de balayage avec des tabs
  • ViewPager avec FragmentPagerAdapter (les tutoriels CodePath sont toujours bons)

Créez de nouvelles instances dans vos fragments et faites comme dans votre activité

  private class SlidePagerAdapter extends FragmentStatePagerAdapter { public SlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch(position){ case 0: return Fragment1.newInstance(); case 1: return Fragment2.newInstance(); case 2: return Fragment3.newInstance(); case 3: return Fragment4.newInstance(); default: break; } return null; }