ViewPager avec limites de la page précédente et suivante

Question

Je conçois une vue avec plusieurs pages. Je veux que les bords des pages précédentes et suivantes soient affichés comme ci-dessous et mettre en œuvre un glissement de 2 doigts pour passer d'une page à l'autre.

J'ai essayé d'utiliser ViewPager avec une marge de page négative comme suggéré aquí mais cela ne montre qu'un seul des bords à l'écran, pas les deux simultanément.

Sinon, existe-t-il un moyen de positionner une partie de ma vue en dehors de l'écran, puis de l'animer en lui donnant une valeur de ViewPager effet de type.

Comment dois-je m'y prendre ? Merci !

Answer 1

J'ai une solution similaire :

Sur le viewpager, définissez le padding gauche et droit, par exemple 20dp. Définissez également la marge de page sur le viewpager, par exemple la moitié du padding du pager. Et n'oubliez pas de désactiver le clip padding.

tilePager.setPadding(defaultGap, 0, defaultGap, 0);
tilePager.setClipToPadding(false);
tilePager.setPageMargin(halfGap);

Answer 2

En me citant moi-même un article de blog sur ce sujet :

La troisième approche est celle de Dave Smith, co-auteur du livre très apprécié Android Recipes. Il est allé dans une direction très différente, en utilisant un conteneur personnalisé qui désactive le découpage des enfants pour afficher plus d'une page à la fois.

Son exemple de code publié montre le tout en action. Son conteneur ( com.example.pagercontainer.PagerContainer ) enveloppe le ViewPager et appelle setClipChildren(false); sur lui-même, donc même si le ViewPager se concentre sur une page sélectionnée, d'autres pages dont les coordonnées dépassent l'adresse de la page. ViewPager sont toujours visibles, pour autant qu'elles s'inscrivent dans les limites de l'espace de travail. PagerContainer . En dimensionnant le ViewPager pour être plus petit que le PagerContainer le ViewPager peut dimensionner ses pages à cette taille, en laissant de la place pour que d'autres pages soient visibles. PagerContainer doit cependant donner un coup de main pour les événements tactiles. ViewPager ne traitera les événements de glissement que dans ses propres limites visibles, en ignorant les pages visibles sur les côtés.

Answer 3

1. Définit le rembourrage gauche et droit pour la vue entière de l'élément. Exemple xml (page_item.xml) :

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:paddingLeft="20dp"
   android:paddingRight="20dp"/>
   
   <TextView
       android:id="@+id/text1"
       android:text="Large Text"
       android:textAppearance="?android:attr/textAppearanceLarge" />
   
   </LinearLayout>

2. Ensuite, définissez une marge de page négative pour PageView égal à 2*(rembourrage de la vue précédente)

   int margin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());
   mViewPager.setPageMargin(-margin);

3. Facultatif. Définissez un remplissage gauche nul pour le premier élément et un remplissage droit nul pour le dernier élément afin de masquer les bords vides. Vous pouvez faire cela dans la section PageAdapter o Page classe de fragment.

Answer 4

Pour afficher un aperçu des pages de gauche et de droite, définissez les deux valeurs suivantes

viewpager.setClipToPadding(false)
viewpager.setPadding(left,0,right,0)

Si vous avez besoin d'un espace entre deux pages dans le viewpager, ajoutez viewpager.setPageMargin(int).

Android ViewPager - Afficher l'aperçu de la page à gauche et à droite

Answer 5

Si quelqu'un cherche encore une solution, j'ai personnalisé le ViewPage pour y parvenir sans utiliser de marge négative, vous trouverez un exemple de projet ici. https://github.com/44kksharma/Android-ViewPager-Carousel-UI cela devrait fonctionner dans la plupart des cas mais vous pouvez toujours définir la marge de page avec mPager.setPageMargin(margin in pixel);