[Android] Vertical swipe

Bonjour à tous,

Ceci est un message de désespoir…

Je commence Android et on me demande de faire un simple swipe vertical. Tout ce que j’ai trouvé c’est ViewPager, qui bien sûr ne permet pas de faire de swipe vertical, mais bon je me suis dit commençons par un horizontal. J’ai beau avoir lu et relu la doc, je ne maîtrise rien.

J’ai adapté les exemples que j’ai trouvé, mais en vrai je ne comprends pas mon propre code. Je cherche un peu d’aide, des exemples qui fonctionnent.

Salut !

Tu veux faire un vertical swipe ou horizontal finalement ?

Si tu veux juste scroller une page verticalement, tu as la balise ScrollView en XML. C’est très facile à utiliser.

Le swipe horizontal est un peu moins évident à mettre en place.

Vous été sûr d’avoir bien compris la consigne ? Vous ête sur que vous voulez pas parler de scroll vertical ?

Le moyen simple de le faire, pas du tout élégant mais qui pourrait fonctionner et qui serait accessible à un débutant. Par-contre, au moment ou l’utilisateur commence a scroller, l’écran va direct afficher l’écran deux, du coup, tu aura pas l’effet de swipe. L’idée est de créé deux activités. Les deux activités ont un TextView avec un texte basique (juste pour montrer que ça fonctionne). Si c’est noté, ne fait pas ça tu auras une sale note.

Sur la première activité, tu créé un listener qui te permet d’écouter les changements de swipe vers le haut, comme ça par-exemple. Après il suffit de lancer l’activité deux. Sur l’activité deux, tu écoute les changements vers le swipe bas. Quand tu détecte ce swipe bas, tu relance l’activité 1.

Si tu connait l’utilité des fragments, tu peux remplacer les activités par des fragments et faire une transition sympa.

Sinon, c’est largement faisable, avec un viewpager. C’est la méthode élégante pour le faire et y’a des tonnes de librairie qui existe sur le net.

Merci pour vos réponses. J’ai déjà essayé ta solution Hugo, ça fonctionne mais c’est pas terrible. Je tente de m’en sortir avec le ViewPager mais c’est pas du gâteau. Avec le lien stackoverflow que tu me donnes l’app ne fonctionne pas.

EDIT : Voici mon code pour un swipe horizontal : les images ne s’affichent pas. Pourquoi ?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

public class MainActivity extends FragmentActivity {
    private static final int NUM_PAGES = 5;
    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager mPager;
    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new SlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    private class SlidePagerAdapter extends FragmentStatePagerAdapter {
        public SlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return SlideFragment.newInstance(position);
        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

public class SlideFragment extends Fragment {
    private int mSlideIndex;

    // newInstance constructor for creating fragment with arguments
    public static SlideFragment newInstance(int slideIndex) {
        SlideFragment newFragment = new SlideFragment();
        Bundle args = new Bundle();
        args.putInt("slideIndex", slideIndex);
        newFragment.setArguments(args);
        return newFragment;
    }

    // Store instance variables based on arguments passed
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mSlideIndex = getArguments().getInt("slideIndex", 0);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup rootView;
        if (mSlideIndex == 0) {
            rootView = (ViewGroup) inflater.inflate(R.layout.fragment_one, container, false);
        } else {
            rootView = (ViewGroup) inflater.inflate(R.layout.fragment_two, container, false);
        }
        return rootView;
    }
}

1
2
3
4
5
6
7

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- fragment_one.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:id="@+id/content"
    android:background="#00FF00">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/one"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!-- fragment_two.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:id="@+id/content"
    android:background="#FF0000">

    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/two"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

Salut Iam,

Quelques questions avant de t’apporter de l’aide :

1. Que cherches-tu vraiment à faire ? Un scroll vertical qui fait défiler une liste de cellule ou des pages qui scrollent une à une verticalement ? La solution technique sera différente selon ce que tu cherches vraiment à faire. Note que la scroll de pages ne me semble pas être une très bonne pratique.

2. Comprends-tu vraiment ce que tu nous montres ? J’ai l’impression qu’il te manque quelques bases. Nous pouvons t’apporter notre aide, tu pourrais même avoir un programme qui fonctionne mais qu’est ce que cela t’apportera vraiment ? Tu n’apprendras rien si nous t’apportons la solution sur un plateau. Peut-être faudrait-il mieux pour toi de revoir les bases pour comprendre ton code et ceux des autres ?

J’aimerai faire défiler des slides chacune correspondant à un état. Par exemple j’ai une variable couleur, et pour choisir ma couleur je fais défiler les pages jusqu’à être sur la couleur qui me plait. Ou chaque page possède une image représentant un entier, et comme ça je choisis la valeur d’un int.

En effet je ne comprend pas tout. J’ai certainement plein de chose à revoir, tout étant nouveau. A quelles bases penses-tu ?

Je continue d’essayer de donner du sens à tout ça.

Très bien.

Commençons par le code que tu nous cites.

Quelles sont les parties que tu ne comprends pas ?

Ce que je ne comprends pas, c’est pourquoi le layout des fragments ne s’affiche pas complètement. Je vais donc plutôt te dire ce que je crois comprendre pour que tu me corriges :

• mon activité principale hérite de FragmentActivity ce qui me permet d’obtenir un FragmentManager que je vais passer à mon FragmentPagerAdapter à sa création.
• j’ai un ViewPager qui correspond à un widget sur le layout de l’activité
• j’associe à ce ViewPager mon FragmentPagerAdapter pour qu’il gère les pages
• quand j’utilise le swipe, la méthode getItem de l’adapter est appelée et renvoie un fragment représentant la page.
• la méthode onCreate du Fragment est appelée, je récupère les données passées à la construction
• la méthode onCreateView est appelée : j’inflate le layout de mon fragment dans un ViewGroup et je le retourne. Celui-ci est alors utilisé pour l’affichage de la page

Tu peux nous donner ce que tu as dans drawable/One ? Il s’affiche dans la preview ?

J’ai pris le premier .png trouvé sur Internet. Il s’affiche correctement dans la preview.

J’ai remplacé app:srcCompat par android:src, ça fonctionne. Bon il me reste encore plein de choses à faire, à commencer par faire la même chose mais verticalement.

srcCompat c’est pour charger du svg android pour le reste, tu dois utiliser src.

Merci Hugo pour l’info. Sinon j’ai réussi à faire fonctionner le code pour un swipe vertical, maintenant il ne me reste plus qu’à le comprendre.

Si on peut t’aider, n’hésite pas à poster a poster un morceau de code que tu comprendrais pas.