¿Puede ViewPager tener varias vistas en cada página?

Descubrí que tal vez una solución aún más simple a través de la especificación de un margen negativo para el ViewPager. He creado el proyecto MultiViewPager en GitHub, que puede que desee echar un vistazo a:

https://github.com/Pixplicity/MultiViewPager

Aunque MultiViewPager espera una vista secundaria para especificar la dimensión, el principio gira en torno a establecer el margen de página:

 ViewPager.setPageMargin( getResources().getDimensionPixelOffset(R.dimen.viewpager_margin)); 

A continuación, especificó esta dimensión en mi dimens.xml :

 <dimen name="viewpager_margin">-64dp</dimen> 

Para compensar las páginas superpuestas, la vista de contenido de cada página tiene el margen opuesto:

 android:layout_marginLeft="@dimen/viewpager_margin_fix" android:layout_marginRight="@dimen/viewpager_margin_fix" 

Nuevamente en dimens.xml :

 <dimen name="viewpager_margin_fix">32dp</dimen> 

(Tenga en cuenta que la dimensión viewpager_margin_fix es la mitad de la dimensión absoluta viewpager_margin .)

Lo implementamos en la aplicación de prensa holandesa De Telegraaf Krant :

Mark Murphy tiene una interesante entrada en el blog que trata precisamente este problema . Aunque acabé usando mi propia solución en este hilo , vale la pena mirar el código de Dave Smith, que Mark hace referencia en la entrada del blog:

https://gist.github.com/8cbe094bb7a783e37ad1/

¡Advertencia! Antes de tomar este enfoque, tenga cuidado con algunos problemas muy graves con este enfoque, mencionado tanto al final de este post como en los comentarios a continuación.

Usted terminará con esto:

Funciona de manera efectiva al envolver un ViewPager en una subclase de FrameLayout , estableciéndola en un tamaño específico y llamando a setClipChildren(false) . Esto inhibe a Android de recortar las vistas que exceden más allá de los límites de ViewPager y realiza visualmente lo que desea.

En XML, es muy simple:

 <com.example.pagercontainer.PagerContainer android:id="@+id/pager_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#CCC"> <android.support.v4.view.ViewPager android:layout_width="150dp" android:layout_height="100dp" android:layout_gravity="center_horizontal" /> </com.example.pagercontainer.PagerContainer> 

Agregue un pequeño código para manejar eventos táctiles desde fuera del ViewPager e invalidar la pantalla al desplazarse, y ya está.

Dicho esto, y mientras esto funciona muy bien en general, me di cuenta de que hay un caso de borde que no se resuelve con esta construcción bastante simple: al llamar setCurrentPage() en el ViewPager . La única manera que pude encontrar para resolver esto fue subclasificar ViewPager y tener su función invalidate() también invalidan el PagerContainer .

Es posible mostrar más de una página en la misma pantalla. Una de las maneras es reemplazando el método getPageWidth () en el PAgerAdapter. GetPageWidth () devuelve un número de flotador entre 0 y 1 que indica cuánto ancho del Viewpager debería ocupar la página. Por defecto se establece en 1. Por lo tanto, puede cambiar esto a la anchura que desee. Puede leer más sobre este proyecto aquí y github .

Así es como lo conseguí:

 <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="center" android:layout_marginBottom="8dp" android:clipToPadding="false" android:gravity="center" android:paddingLeft="36dp" android:paddingRight="36dp"/> 

Y en actividad, uso esto:

 markPager.setPageMargin(64); 

¡Espero eso ayude!

Tuve el mismo problema con la única diferencia que necesitaba mostrar 3 páginas a la vez (páginas anterior, actual y siguiente). Después de una investigación muy larga para la mejor solución creo que lo encontré. La solución es una mezcla de algunas de las respuestas aquí:

Como explicó la respuesta de @Paul Lammertsma – el código de Dave Smith en el blog de Mark Murphy es la base de la solución. El único problema para mí fue que el ViewPager sólo estaba en la parte superior de la pantalla debido al tamaño que le dan en el archivo xml:

  android:layout_width="150dp" android:layout_height="100dp" 

Lo que no era bueno para mi propósito ya que estaba buscando algo que se extenderá por toda la pantalla. Así que lo cambié para envolver el contenido como se puede ver aquí:

  <com.example.nutrino_assignment.PagerContainer android:id="@+id/pager_container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#CCC"> <android.support.v4.view.ViewPager android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> </com.example.nutrino_assignment.PagerContainer> 

Ahora he perdido todo el efecto de lo que el tutorial estaba tratando de hacer. Utilizando la respuesta de @ andro pude mostrar más de una página a la vez: exactamente 2! La actual y la siguiente. Lo hizo por sobreescribir como sigue:

  @Override public float getPageWidth(int position) { return(0.9f); } 

Eso era casi lo que necesitaba … (aunque creo que es suficiente para lo que estaba pidiendo), pero para otros que podrían necesitar algo como lo que se necesitaba: Para la última parte de la solución he utilizado la idea en esta respuesta , Nuevamente por @Paul Lammertsma. En el código de Dave Smith encontrarás en el método onCreate esta línea:

  //A little space between pages pager.setPageMargin(15); 

Que reemplazé con:

  //A little space between pages pager.setPageMargin(-64); 

Ahora en la primera página se ve:

 |view 1|view 2|view 3| |screen | 

Mientras que en el 2 se parece a:

 |view 1|view 2|view 3| |screen | 

Espero que ayude a alguien! He perdido como 2 días en él … Buena suerte.

 viewPager.setPageMargin(-18);// adjust accordingly ,-means less gap 

En imageadapter

 private class ImagePagerAdapter2 extends PagerAdapter { private int[] mImages = new int[] { R.drawable.add1, R.drawable.add3, R.drawable.add4, R.drawable.add2, }; @Override public float getPageWidth(int position) { return .3f; } 

Ajustar valor de retorno … menor significa más imagen …… 0.3 significa al menos 3 imágenes a la vez.

 LayoutParams lp = new LayoutParams(width,height); viewpager.setLayoutParams(lp);