Cómo implementar un ViewPager con diferentes Fragmentos / Diseños

Cuando comienzo una actividad que implementa viewpager, el viewpager creó varios fragmentos. Quiero usar diferentes diseños para cada fragmento, pero el problema es que viewpager muestra solo dos diseños al máximo (segundo diseño en todos los fragmentos restantes después de 1).

Aquí está el código para SwipeActivity que implementa el 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"); } } } } 

Aquí está el código para los fragmentos

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

Utilicé 5 fragmentos como este, todos con diferentes diseños, pero el visor muestra solo 2 al máximo.

EDIT : código para SecondFragment

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

Como esta es una pregunta muy frecuente, quise tomarme el tiempo y el esfuerzo para explicar ViewPager con múltiples Fragmentos y Diseños en detalle. Aqui tienes.

ViewPager con múltiples Fragmentos y archivos de diseño – Cómo

El siguiente es un ejemplo completo de cómo implementar un ViewPager con diferentes tipos de fragmentos y diferentes archivos de diseño.

En este caso, tengo 3 clases de fragmentos y un archivo de diseño diferente para cada clase. Para mantener las cosas simples, los diseños de fragmentos solo difieren en el color de fondo . Por supuesto, cualquier archivo de diseño se puede usar para los Fragmentos.

FirstFragment.java tiene un diseño de fondo naranja , SecondFragment.java tiene un diseño de fondo verde y ThirdFragment.java tiene un diseño de fondo rojo . Además, cada Fragmento muestra un texto diferente, dependiendo de qué clase es y de qué instancia es.

También tenga en cuenta que estoy usando el Fragmento de la biblioteca de soporte: android.support.v4.app.Fragment

MainActivity.java (Inicializa el Viewpager y tiene el adaptador para él como una clase interna). Nuevamente eche un vistazo a las importaciones . Estoy usando el paquete 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 (archivo MainActivitys .xml): un archivo de diseño simple, que solo contiene la ViewPager que llena toda la pantalla.

  

Las clases 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().getString("msg")); return v; } public static FirstFragment newInstance(String text) { FirstFragment f = new FirstFragment(); Bundle b = new Bundle(); b.putString("msg", text); f.setArguments(b); return f; } } 

first_frag.xml

     

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().getString("msg")); return v; } public static SecondFragment newInstance(String text) { SecondFragment f = new SecondFragment(); Bundle b = new Bundle(); b.putString("msg", text); f.setArguments(b); return f; } } 

second_frag.xml

     

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().getString("msg")); return v; } public static ThirdFragment newInstance(String text) { ThirdFragment f = new ThirdFragment(); Bundle b = new Bundle(); b.putString("msg", text); f.setArguments(b); return f; } } 

third_frag.xml

     

El resultado final es el siguiente:

Viewpager contiene 5 fragmentos, Fragmentos 1 es de tipo FirstFragment y muestra el diseño first_frag.xml, Fragment 2 es de tipo SecondFragment y muestra second_frag.xml, y Fragment 3-5 son de tipo ThirdFragment y todos muestran el third_frag.xml .

enter image description here

Arriba puede ver los 5 fragmentos entre los cuales se puede cambiar deslizando el dedo hacia la izquierda o hacia la derecha. Solo se puede mostrar un Fragmento al mismo tiempo, por supuesto.

Por último, si bien no menos importante:

Le recomendaría que use un constructor vacío en cada una de las clases de Fragment.

En lugar de entregar parámetros potenciales a través del constructor, use el newInstance(...) y el Bundle para la entrega de parámetros.

De esta forma, si se separa y se vuelve a unir el estado del objeto se puede almacenar a través de los argumentos. Muy parecido a los Bundles adjuntos a Intents .

Cree una matriz de Vistas y aplique a: 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); } } 

Código para agregar fragmento

 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; } 

Cree un archivo xml para cada fragmento, digamos para Fragment1, use fragment_one.xml como archivo de diseño, use el siguiente código en el archivo de Fragment1 java.

 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; } } 

Más tarde puedes hacer las correcciones necesarias. Me funcionó.

Esto también está 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; } } 
    

Ejemplo básico de ViewPager

Esta respuesta es una simplificación de la documentación , este tutorial y la respuesta aceptada . Su objective es poner en funcionamiento y ejecutar ViewPager más rápido posible. Se pueden realizar más ediciones después de eso.

enter image description here

XML

Agregue los diseños xml para la actividad principal y para cada página (fragmento). En nuestro caso, solo estamos usando un diseño de fragmento, pero si tiene diseños diferentes en las diferentes páginas, solo haga uno para cada uno de ellos.

activity_main.xml

     

fragment_one.xml

     

Código

Este es el código para la actividad principal. Incluye el PagerAdapter y FragmentOne como clases internas. Si estos se vuelven demasiado grandes o los reutiliza en otros lugares, puede moverlos a sus propias clases separadas.

 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 String MY_NUM_KEY = "num"; private static final String 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; } } } 

Terminado

Si copió y pegó los tres archivos anteriores en su proyecto, debería poder ejecutar la aplicación y ver el resultado en la animación anterior.

Continuando

Hay algunas cosas que puedes hacer con ViewPagers. Vea los siguientes enlaces para comenzar:

  • Crear vistas de deslizamiento con tabs
  • ViewPager con FragmentPagerAdapter (los tutoriales de CodePath siempre son buenos)

Crea nuevas instancias en tus fragmentos y haz eso en tu Actividad

  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; }