web-dev-qa-db-fra.com

Indicateurs de flèche gauche-droite sur un ViewPager

Je souhaite afficher les flèches gauche et droite sur mon ViewPager pour indiquer un balayage.

J'ai ajouté deux boutons Image sur l'élément ViewPager, mais ces zones empêchent alors le ViewPager de déclencher le "balayage".

Je veux aussi que vous appuyiez sur ces flèches pour que le fragment change en conséquence.

En bref: Les boutons Image ne doivent pas interférer avec le balayage, mais ils doivent être enregistrés en appuyant.

Comment puis-je atteindre cet objectif? Merci!

androidandroid-viewpagerswipe
16
Daggepagge

J'ai trouvé une solution. C'est très simple.

Au lieu d'utiliser ImageButtons pour afficher les flèches, j'utilise désormais ImageViews car ils transmettent tous les événements tactiles au calque situé en dessous.

Ensuite, je mets des boutons transparents sur les fragments eux-mêmes, afin qu'ils ne bloquent pas le comportement de balayage des ViewPagers mais qu'ils déclenchent des événements onClick!

4
Daggepagge

Le code ci-dessous a parfaitement fonctionné pour moi .NB: Utilisez FrameLayout car il permet de superposer des vues

        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="wrap_content"
                Android:layout_height="200dp" />

            <ImageButton
                Android:id="@+id/left_nav"
                Android:layout_width="48dp"
                Android:layout_height="48dp"
                Android:layout_gravity="center_vertical|left"
                Android:src="@drawable/ic_chevron_left_black_24dp" />

            <ImageButton
                Android:id="@+id/right_nav"
                Android:layout_width="48dp"
                Android:layout_height="48dp"
                Android:layout_gravity="center_vertical|right"
                Android:src="@drawable/ic_chevron_right_black_24dp" />

        </FrameLayout>

La partie suivante que j'ai utilisée pour gérer les événements de clic d'ImageButton

viewPager = (ViewPager) view.findViewById(R.id.viewpager);

leftNav = (ImageButton) view.findViewById(R.id.left_nav);
rightNav = (ImageButton) view.findViewById(R.id.right_nav);

// Images left navigation
    leftNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            if (tab > 0) {
                tab--;
                viewPager.setCurrentItem(tab);
            } else if (tab == 0) {
                viewPager.setCurrentItem(tab);
            }
        }
    });

    // Images right navigatin
    rightNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            tab++;
            viewPager.setCurrentItem(tab);
        }
    });

Sortie

 enter image description here

31
Chris J Kikoti

Il n'est pas nécessaire de gérer l'index actuel pour cela ou de manipuler n'importe quel balayage manuellement. Appelez simplement la méthode viewPager.arrowScroll(int direction) selon les événements de clic des flèches gauche et droite.

En bref, suivez ces 2 étapes simples:

  1. Implémentez 2 ImageViews/ImageButtons/Buttons pour les flèches gauche et droite.

  2. En cliquant dessus, appelez:

    a) si la flèche gauche est cliquée - viewPager.arrowScroll(View.FOCUS_LEFT);

    b) si la flèche droite est cliquée - viewPager.arrowScroll(View.FOCUS_RIGHT);

11
Keshav Bansal

Implémentez des boutons de flèche gauche et droite dans votre fragment. Enregistrez ensuite leur onClick dans votre activité et appelez la méthode arrowScroll de viewpager pour faire défiler le viewPager par programme.

public void onRightClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_RIGHT);
}

public void onLeftClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_LEFT);
}

Créez une méthode pour basculer la visibilité des flèches gauche/droite dans votre fragment.

public void toggleArrowVisibility(boolean isAtZeroIndex, boolean isAtLastIndex) {
    if(isAtZeroIndex)
        leftBtn.setVisibility(View.INVISIBLE);
    else
        leftBtn.setVisibility(View.VISIBLE);
    if(isAtLastIndex)
        rightBtn.setVisibility(View.INVISIBLE);
    else
        rightBtn.setVisibility(View.VISIBLE);

}

Maintenant, implémentez ViewPager.OnPageChangeListener dans votre activité. Utilisez SmartFragmentStatePagerAdapter pour suivre les fragments enregistrés en mémoire.

@Override
public void onPageSelected(int position) {
    MyFragment fragment = (MyFragment) smartAdapter.getRegisteredFragment(position);
    fragment.toggleArrowVisibility(position == 0, position == list.size() - 1);
}
5
Salil Dhawan

Commencez par utiliser la disposition relative en tant que disposition parent

deuxième puis ajoutez la vue pager à l'intérieur avec l'attribut match parent sur elle

troisième prendre deux boutons d'image sur le pageur de vue, mais dans la hiérarchie de la disposition parent.

quatrième code fonctionnel d'écriture pour les boutons 

cinquième prendre compteur statique pour obtenir la page de pageur vue en cours

sur les boutons gauche et droit réglés moins et plus le compteur de pager vue resp. et selon que montrer les données en vue pager

c'est la logique simple pour le code que vous pouvez rechercher sur Google, vous l'obtiendrez facilement

1
Android is everything for me