android - studio - ¿Puede ViewPager tener múltiples vistas en cada página?
viewpager android studio (7)
Después de probar la Galería y la Vista de desplazamiento horizontal, descubrí que el Buscador de vistas hace lo que necesito, pero con una pequeña falta. ¿Puede el Buscador de vistas tener múltiples vistas por página?
Sé que View Pager muestra solo 1 vista / página por deslizamiento. Me preguntaba si puedo limitar el ancho de mis vistas para que se muestre mi segunda vista siguiente.
Por ejemplo: tengo 3 vistas y quiero que la pantalla muestre la vista 1 y parte de la vista 2 para que el usuario sepa que hay más contenido para poder deslizar y ver 2.
|view 1|view 2|view 3|
|screen |
Así es como lo obtuve:
<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!
Descubrí que tal vez una solución aún más simple mediante la especificación de un margen negativo para ViewPager. Creé el proyecto MultiViewPager en GitHub, que es posible que desee ver:
Aunque MultiViewPager espera una vista secundaria para especificar la dimensión, el principio gira en torno a establecer el margen de la página:
ViewPager.setPageMargin(
getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));
Luego especifiqué 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 ).
Implementamos esto en la aplicación de periódico holandesa De Telegraaf Krant :
Es posible mostrar más de una página en la misma pantalla. Una de las formas es anulando el método getPageWidth () en el PAgerAdapter. getPageWidth () devuelve un número flotante entre 0 y 1 que indica cuánto ancho de Viewpager debe ocupar la página. Por defecto está configurado en 1. Entonces, puede cambiar esto al ancho que desee. Puede leer más sobre este proyecto aquí y github .
Mark Murphy tiene una entrada de blog interesante que aborda precisamente este problema . Aunque terminé usando mi propia solución en este hilo , vale la pena mirar el código de Dave Smith, al que Mark hace referencia en la publicación del blog:
¡Advertencia! Antes de adoptar este enfoque, tenga cuidado con algunos problemas muy serios con este enfoque, mencionados al final de esta publicación y en los comentarios a continuación.
Terminarás con esto:
Funciona de manera efectiva envolviendo un ViewPager en una subclase de FrameLayout , configurándolo en un tamaño específico y llamando a setClipChildren(false) . Esto impide que Android recorte las vistas que exceden los límites de ViewPager y logra 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 de ViewPager e invalide la pantalla cuando se desplaza, y listo.
Dicho esto, y aunque esto funciona muy bien en general, me di cuenta de que hay un borde de caso que no se resuelve con esta construcción bastante simple: al llamar a setCurrentPage() en el ViewPager . La única forma que pude encontrar para resolver esto fue subclasificar ViewPager y tener su función invalidate() también invalida el PagerContainer .
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 larga investigación para encontrar la mejor solución, creo que la encontré. La solución es una mezcla de algunas de las respuestas aquí:
Como señaló la answer @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 ViewPager estaba solo en la parte superior de la pantalla debido al tamaño que le daban en el archivo xml:
android:layout_width="150dp"
android:layout_height="100dp"
Lo cual no era bueno para mi propósito, ya que estaba buscando algo que se extendiera por toda la pantalla. Así que lo cambié para envolver el contenido como puedes 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 perdí todo el efecto de lo que el tutorial estaba tratando de hacer. Utilizando la answer de @andro, pude mostrar más de 1 página a la vez: ¡exactamente 2! El actual y el siguiente. Lo hizo anulando de la siguiente manera:
@Override
public float getPageWidth(int position) {
return(0.9f);
}
Eso era casi lo que necesitaba ... (aunque creo que es suficiente para lo que me estaba preguntando), pero para otros que podrían necesitar algo como lo que necesitaba: para la última parte de la solución, utilicé la idea en esta respuesta , otra vez por @Paul Lammertsma. En el código de Dave Smith, encontrará en el método onCreate esta línea:
//A little space between pages
pager.setPageMargin(15);
que reemplacé 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 2do se ve así:
|view 1|view 2|view 3|
|screen |
Espero que ayude a alguien! Perdí como 2 días en ello ... Buena suerte.
LayoutParams lp = new LayoutParams(width,height);
viewpager.setLayoutParams(lp);
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 el valor de retorno ... menor significa más imagen ... 0.3 significa al menos 3 imágenes a la vez.