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

Question

J'utilise l'application Android ViewPager . Ce que je veux faire, c'est afficher un aperçu de la page à gauche et à droite. J'ai vu que l'on pouvait utiliser une balise négative. pageMargin pour afficher un aperçu du côté droit.

setPageMargin(-100);

Est-il possible d'afficher un aperçu du côté gauche ? C'est essentiellement quelque chose de similaire au widget galerie que je recherche.

Answer 1

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

1. viewpager.setClipToPadding(false);
2. viewpager.setPadding(left,0,right,0);

Si vous avez besoin d'espace entre deux pages dans le viewpager, ajoutez alors

viewpager.setPageMargin(int);

Answer 2

Solution avec le nouveau ViewPager2

Aujourd'hui, vous devriez envisager d'utiliser ViewPager2 dont "remplace ViewPager, en résolvant la plupart des problèmes de son prédécesseur". :

• Basé sur RecyclerView
• Prise en charge de la mise en page RTL (right-to-left)
• Soutien à l'orientation verticale
• Prise en charge fiable des fragments (y compris la gestion des modifications apportées à la collection de fragments sous-jacente).
• Animations de changement de données (y compris DiffUtil soutien)

Le résultat

Le code

Dans votre activité/fragment, configurez le ViewPager2 :

// MyRecyclerViewAdapter is an standard RecyclerView.Adapter :)
viewPager2.adapter = MyRecyclerViewAdapter() 

// You need to retain one page on each side so that the next and previous items are visible
viewPager2.offscreenPageLimit = 1

// Add a PageTransformer that translates the next and previous items horizontally
// towards the center of the screen, which makes them visible
val nextItemVisiblePx = resources.getDimension(R.dimen.viewpager_next_item_visible)
val currentItemHorizontalMarginPx = resources.getDimension(R.dimen.viewpager_current_item_horizontal_margin)
val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
    page.translationX = -pageTranslationX * position
    // Next line scales the item's height. You can remove it if you don't want this effect
    page.scaleY = 1 - (0.25f * abs(position))
    // If you want a fading effect uncomment the next line:
    // page.alpha = 0.25f + (1 - abs(position))
}
viewPager2.setPageTransformer(pageTransformer)

// The ItemDecoration gives the current (centered) item horizontal margin so that
// it doesn't occupy the whole screen width. Without it the items overlap
val itemDecoration = HorizontalMarginItemDecoration(
    context,
    R.dimen.viewpager_current_item_horizontal_margin
)
viewPager2.addItemDecoration(itemDecoration)

Ajouter le HorizontalMarginItemDecoration qui est trivial ItemDecoration :

/**
 * Adds margin to the left and right sides of the RecyclerView item.
 * Adapted from https://stackoverflow.com/a/27664023/4034572
 * @param horizontalMarginInDp the margin resource, in dp.
 */
class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
    RecyclerView.ItemDecoration() {

    private val horizontalMarginInPx: Int =
        context.resources.getDimension(horizontalMarginInDp).toInt()

    override fun getItemOffsets(
        outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
    ) {
        outRect.right = horizontalMarginInPx
        outRect.left = horizontalMarginInPx
    }

}

Ajoutez les dimensions qui contrôlent la partie visible de l'élément précédent/suivant et la marge horizontale de l'élément actuel :

<dimen name="viewpager_next_item_visible">26dp</dimen>
<dimen name="viewpager_current_item_horizontal_margin">42dp</dimen>

Enfin, ajoutez le ViewPager2 à votre mise en page :

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Une chose importante : un ViewPager2 l'article doit avoir layout_height="match_parent" (sinon, il lève une IllegalStateException), donc vous devriez faire quelque chose comme :

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" <-- this!
    app:cardCornerRadius="8dp"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">

        <!-- ... -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Exemples de PageTransformer

Google a ajouté un guide sur ViewPager2 qui a 2 PageTransformer mises en œuvre dont vous pouvez vous inspirer : https://developer.Android.com/training/animation/screen-slide-2

À propos du nouveau ViewPager2

• Annonce à la Google I/O 2019
• Documentation
• Notes de mise à jour
• Exemple de code
• Migrer de ViewPager vers ViewPager2

Answer 3

La réponse de @JijuInduchoodan est parfaite et fonctionne. Cependant, étant donné que je suis relativement nouveau sur Android, il m'a fallu un certain temps pour comprendre et régler correctement. Je publie donc cette réponse pour référence future et pour aider toute autre personne qui se trouve dans la même situation que moi.

if (viewPager == null) 
        {

            // Initializing view pager
            viewPager = (ViewPager) findViewById(R.id.vpLookBook);

            // Disable clip to padding
            viewPager.setClipToPadding(false);
            // set padding manually, the more you set the padding the more you see of prev & next page
            viewPager.setPadding(40, 0, 40, 0);
            // sets a margin b/w individual pages to ensure that there is a gap b/w them
            viewPager.setPageMargin(20);
        }

Il n'est pas nécessaire de définir une largeur quelconque à l'élément ViewPager's dans l'adaptateur. Il n'y a pas de code supplémentaire requis pour voir la page précédente et suivante dans l'adaptateur. ViewPager . Cependant, si vous souhaitez ajouter des espaces vides en haut et en bas de chaque page, vous pouvez définir le code suivant comme suit ViewPager's la mise en page parent de la page enfant.

android:paddingTop="20dp"
android:paddingBottom="20dp"

Ce sera l'aspect final du ViewPager.

Answer 4

En 2017, ce type de comportement peut être facilement obtenu grâce à l'utilisation de RecyclerView avec PagerSnapHelper (ajouté dans la version 25.1.0 de la bibliothèque de support v7) : 

Il y a quelque temps, j'ai eu besoin d'une telle fonctionnalité de type viewpager et j'ai préparé une petite bibliothèque :

MetalRecyclerPagerView - vous pouvez y trouver tout le code ainsi que des exemples.

Il consiste principalement en un seul fichier de classe : MetalRecyclerViewPager.java (et deux xmls : attrs.xml y ids.xml ).

J'espère que cela aidera quelqu'un et permettra de gagner quelques heures :)

Answer 5

Vous pouvez le faire dans le fichier xml, il suffit d'utiliser le code ci-dessous :

 android:clipToPadding="false"
 android:paddingLeft="XX"
 android:paddingRight="XX"

Par exemple :

<androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingLeft="30dp"
        android:paddingRight="30dp" />

Note : Si vous avez besoin d'espace entre les pages, réglez le padding/margin sur les fragments d'enfant.