[Tutorial] Implementare facilmente ViewPagerIndicator in una applicazione di Android

[enricocid]

un altro... non si sa mai

[enricocid]

ma si... abbondiamo va :-D

[Crotan]

Bravissimo Enrico, sei finito anche sul blog di Androidiani. Complimenti. Stasera se ho tempo posto il mio codice che utilizzo per implementare il ViewPager. Alla fine é molto simile al tuo, ci sono solo alcune rivisitazioni.

Ho modificato il mio precedente intervento con del codice

[leonardodettoileo]

Grande enri! Mi chiedevo proprio come facevi le transizioni animate! Grande!

[ivan888]

bella fratello!

[Crotan]

Per memorizzare lo stato dei Fragments mettete quanto segue

<br /> ViewPager viewPager = (ViewPager) findViewById(R.id.pager);<br /> viewPager.setOffscreenPageLimit(3);<br />

 

1

​

2

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

3

        viewPager.setOffscreenPageLimit(3);

4

​

Dove 3 sono il numero dei Fragment.

Grazie a Dema121, per avermi fatto conoscere l'istruzione in questione.

[giozh]

Per memorizzare lo stato dei Fragments mettete quanto segue

<br /> ViewPager viewPager = (ViewPager) findViewById(R.id.pager);<br /> viewPager.setOffscreenPageLimit(3);<br />

4

 

1

​

2

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

3

        viewPager.setOffscreenPageLimit(3);

4

​

Dove 3 sono il numero dei Fragment.

Grazie a Dema121, per avermi fatto conoscere l'istruzione in questione.

Occhio a quel metodo. Per la precisione invocando

 setOffScreenPageLimit

indichi al sistema quante pagine mantenere in memoria prima e dopo la pagina corrente

[Crotan]

Occhio a quel metodo. Per la precisione invocando

 setOffScreenPageLimit

indichi al sistema quante pagine mantenere in memoria prima e dopo la pagina corrente

Esattamente.

[Giupy_99]

grazie, utilissimo, ti nominerò nella sezione credits della mia app

[Crotan]

[B]Livello di difficoltà: facile
Versione SDK utilizzata: 4.4.2

In questo tutorial spiegherò come è possibile creare un semplice wizard da mostrare all'utente al primo avvio dell'applicazione. Per fare ciò utilizzerò un ViewPager. Per ulteriori informazioni circa questo oggetto potete consultare la documentazione ufficiale: View Pager | Android Developers.

Come prima cosa creiamo i vari files xml necessari per il corretto funzionamento dell'applicazione. Rechiamoci dunque in /res/layout/ ed apriamo l'activity_main e inseriamo quanto segue.
<br /> <com.example.tutorialapp.ViewPagerNoS<span class="forTooltip">wipe</span> xmlns:android="http://schemas.android.com/<span class="forTooltip">apk</span>/res/android"<br /> android:id="@+id/pager"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent" />

5

 

1

​

2

<com.example.tutorialapp.ViewPagerNoSwipe xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:id="@+id/pager"

4

    android:layout_width="match_parent"

5

    android:layout_height="match_parent" />

Da notare il "com.example.tutorialapp.ViewPagerNoSwipe". Spiegherò tra poco a cosa serve. Andiamo in /src/ e creiamo una classe chiamata ViewPagerNoSwipe ed inseriamo al suo interno il seguente codice.

<br /> public class ViewPagerNoSwipe exten<span class="forTooltip">ds</span> ViewPager {<br /> <br /> public ViewPagerNoSwipe(Context context) {<br /> super(context);<br /> }<br /> <br /> public ViewPagerNoSwipe(Context context, AttributeSet attrs) {<br /> super(context, attrs);<br /> }<br /> <br /> @Override<br /> public boolean onInterceptTouchEvent(M<span class="forTooltip">ot</span>ionEvent arg0) {<br /> <br /> return false;<br /> }<br /> <br /> @Override<br /> public boolean onTouchEvent(MotionEvent event) {<br /> <br /> return false;<br /> }<br /> }

23

 

1

​

2

public class ViewPagerNoSwipe extends ViewPager {

3

​

4

    public ViewPagerNoSwipe(Context context) {

5

        super(context);

6

    }

7

​

8

    public ViewPagerNoSwipe(Context context, AttributeSet attrs) {

9

        super(context, attrs);

10

    }

11

​

12

    @Override

13

    public boolean onInterceptTouchEvent(MotionEvent arg0) {

14

15

        return false;

16

    }

17

​

18

    @Override

19

    public boolean onTouchEvent(MotionEvent event) {

20

21

        return false;

22

    }

23

}

Tramite questa classe disabilitiamo la possibilità di fare lo swipe tra le varie schermate del ViewPager. Abbiamo così svelato il mistero del "com.example.tutorialapp.ViewPagerNoSwipe".

Creiamo ora i vari files xml per ogni schermata (fragment) del Wizard. In questo esempio utilizzerò tre pagine, quindi, tre layout differenti.

Pagina1

<?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Benvenuto!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Avanti" /><br /> <br /> </RelativeLayout>

24

 

1

<?xml version="1.0" encoding="utf-8"?>

2

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:layout_width="fill_parent"

4

    android:layout_height="fill_parent" >

5

​

6

    <TextView

7

        android:id="@+id/textView1"

8

        android:layout_width="wrap_content"

9

        android:layout_height="wrap_content"

10

        android:layout_alignParentLeft="true"

11

        android:layout_below="@+id/textView1"

12

        android:text="Benvenuto!"

13

        android:textSize="16dp"

14

        />

15

​

16

    <Button

17

        android:id="@+id/button1"

18

        android:layout_width="wrap_content"

19

        android:layout_height="wrap_content"

20

        android:layout_alignParentBottom="true"

21

        android:layout_alignParentRight="true"

22

        android:text="Avanti" />

23

​

24

</RelativeLayout>

Pagina2
<br /> <?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Sono nel secondo Fragment!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Avanti" /><br /> <br /> <Button<br /> android:id="@+id/button2"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentLeft="true"<br /> android:text="Indietro" /><br /> <br /> </RelativeLayout>

33

 

1

​

2

<?xml version="1.0" encoding="utf-8"?>

3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

4

    android:layout_width="fill_parent"

5

    android:layout_height="fill_parent" >

6

​

7

    <TextView

8

        android:id="@+id/textView1"

9

        android:layout_width="wrap_content"

10

        android:layout_height="wrap_content"

11

        android:layout_alignParentLeft="true"

12

        android:layout_below="@+id/textView1"

13

        android:text="Sono nel secondo Fragment!"

14

        android:textSize="16dp"

15

        />

16

​

17

    <Button

18

        android:id="@+id/button1"

19

        android:layout_width="wrap_content"

20

        android:layout_height="wrap_content"

21

        android:layout_alignParentBottom="true"

22

        android:layout_alignParentRight="true"

23

        android:text="Avanti" />

24

25

    <Button

26

        android:id="@+id/button2"

27

        android:layout_width="wrap_content"

28

        android:layout_height="wrap_content"

29

        android:layout_alignParentBottom="true"

30

        android:layout_alignParentLeft="true"

31

        android:text="Indietro" />

32

​

33

</RelativeLayout>

Pagina3

<?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Sono nell'ultimo Fragment!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Termina" /><br /> <br /> <Button<br /> android:id="@+id/button2"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentLeft="true"<br /> android:text="Indietro" /><br /> <br /> </RelativeLayout>

32

 

1

<?xml version="1.0" encoding="utf-8"?>

2

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:layout_width="fill_parent"

4

    android:layout_height="fill_parent" >

5

​

6

    <TextView

7

        android:id="@+id/textView1"

8

        android:layout_width="wrap_content"

9

        android:layout_height="wrap_content"

10

        android:layout_alignParentLeft="true"

11

        android:layout_below="@+id/textView1"

12

        android:text="Sono nell'ultimo Fragment!"

13

        android:textSize="16dp"

14

        />

15

​

16

    <Button

17

        android:id="@+id/button1"

18

        android:layout_width="wrap_content"

19

        android:layout_height="wrap_content"

20

        android:layout_alignParentBottom="true"

21

        android:layout_alignParentRight="true"

22

        android:text="Termina" />

23

24

    <Button

25

        android:id="@+id/button2"

26

        android:layout_width="wrap_content"

27

        android:layout_height="wrap_content"

28

        android:layout_alignParentBottom="true"

29

        android:layout_alignParentLeft="true"

30

        android:text="Indietro" />

31

​

32

</RelativeLayout>

Essendo il codice di facile comprensione non mi soffermo ulteriormente su descrizioni dello stesso. Proseguiamo oltre passando ora alla parte Java. Andiamo in /src/ ed apriamo la classe MainActivity inserendo quanto segue.

public class MainActivity extends FragmentActivity{<br /> <br /> ViewPager viewPager;<br /> Adapter adapter;<br /> ActionBar actionBar;<br /> <br /> protected void onCreate(Bundle savedIstanceState) {<br /> super.onCreate(savedIstanceState);<br /> setContentView(R.layout.activity_main);<br /> actionBar = getActionBar();<br /> actionBar.setTitle("Wizard iniziale");<br /> viewPager = (ViewPager)findViewById(R.id.pager);<br /> adapter = new Adapter(getSupportFragmentManager());<br /> viewPager.setAdapter(adapter);<br /> }<br /> <br /> public ViewPager getViewPager() {<br /> return viewPager;<br /> }<br /> <br /> @Override<br /> public void onBackPressed() {<br /> if (viewPager.getCurrentItem() == 0) {<br /> //Non eseguo nulla in quanto siamo nella prima pagina<br /> super.onBackPressed();<br /> } else {<br /> //Imposta l'item corrente prendendo il numero di tutti gli item correnti e togliendo 1<br /> viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);<br /> <br /> }<br /> }<br /> }

32

 

1

public class MainActivity extends FragmentActivity{

2

3

    ViewPager viewPager;

4

    Adapter adapter;

5

    ActionBar actionBar;

6

7

    protected void onCreate(Bundle savedIstanceState) {

8

        super.onCreate(savedIstanceState);

9

        setContentView(R.layout.activity_main);

10

        actionBar = getActionBar();

11

        actionBar.setTitle("Wizard iniziale");

12

        viewPager = (ViewPager)findViewById(R.id.pager);

13

        adapter = new Adapter(getSupportFragmentManager());

14

        viewPager.setAdapter(adapter);

15

        }

16

17

    public ViewPager getViewPager() {

18

        return viewPager;

19

    }

20

21

    @Override

22

    public void onBackPressed() {

23

        if (viewPager.getCurrentItem() == 0) {

24

            //Non eseguo nulla in quanto siamo nella prima pagina

25

            super.onBackPressed();

26

        } else {

27

            //Imposta l'item corrente prendendo il numero di tutti gli item correnti e togliendo 1

28

            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);

29

30

        }

31

    }

32

}

Creiamo ora l'adapter per il ViewPager.

public class Adapter extends FragmentPagerAdapter{<br /> <br /> //Il numero di pagine totali<br /> private int numer<span class="forTooltip">oP</span>agine = 3;<br /> <br /> //Costruttore<br /> public Adapter(FragmentManager fm) {<br /> super(fm);<br /> // TODO Auto-generated constructor stub<br /> }<br /> <br /> @Override<br /> //Switcha in base alla posizione<br /> public Fragment getItem(int arg0) {<br /> // TODO Auto-generated method stub<br /> switch(arg0) {<br /> case 0: return new PageFragment();<br /> case 1: return new PageFragment2();<br /> case 2: return new PageFragment3();<br /> }<br /> Fragment fragment = new PageFragment();<br /> Bundle arguments = new Bundle();<br /> arguments.putString("pageIndex", Integer.toString(arg0 + 1));<br /> fragment.setArguments(arguments);<br /> return fragment;<br /> }<br /> <br /> @Override<br /> //Numero di pagine totali<br /> public int getCount() {<br /> // TODO Auto-generated method stub<br /> return numer<span class="forTooltip">oP</span>agine;<br /> }<br /> <br /> }

35

 

1

public class Adapter extends FragmentPagerAdapter{

2

​

3

    //Il numero di pagine totali

4

    private int numeroPagine = 3;

5

6

    //Costruttore

7

    public Adapter(FragmentManager fm) {

8

        super(fm);

9

        // TODO Auto-generated constructor stub

10

    }

11

​

12

    @Override

13

    //Switcha in base alla posizione

14

    public Fragment getItem(int arg0) {

15

        // TODO Auto-generated method stub

16

        switch(arg0) {

17

            case 0: return new PageFragment();

18

            case 1: return new PageFragment2();

19

            case 2: return new PageFragment3();

20

        }

21

        Fragment fragment = new PageFragment();

22

        Bundle arguments = new Bundle();

23

        arguments.putString("pageIndex", Integer.toString(arg0 + 1));

24

        fragment.setArguments(arguments);

25

        return fragment;

26

    }

27

28

    @Override

29

    //Numero di pagine totali

30

    public int getCount() {

31

        // TODO Auto-generated method stub

32

        return numeroPagine;

33

    }

34

​

35

}

La variabile "numeroPagine", come facilmente intuibile, indica il numero di pagine totali del ViewPager. Con il metodo getCount ritorniamo quel valore.

Siamo quasi giunti alla fine, creiamo per ogni file xml la corrispettiva classe estendendo Fragment.

public class PageFragment extends Fragment{<br /> <br /> @Override<br /> public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {<br /> View view = getActivity().getLayoutInflater().inflate(R.layout.pagina1, null);<br /> <br /> Button b1 = (Button) view.findViewById(R.id.button1);<br /> b1.setOnClickListener(new View.OnClickListener() {<br /> @Override<br /> public void onClick(View v) {<br /> ((MainActivity) getActivity()).getViewPager().setCurrentItem(1);<br /> }<br /> });<br /> <br /> return view;<br /> <br /> }<br /> <br /> }

19

 

1

public class PageFragment extends Fragment{

2

3

    @Override

4

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

5

        View view = getActivity().getLayoutInflater().inflate(R.layout.pagina1, null);

6

7

        Button b1 = (Button) view.findViewById(R.id.button1);

8

        b1.setOnClickListener(new View.OnClickListener() {

9

            @Override

10

            public void onClick(View v) {

11

                ((MainActivity) getActivity()).getViewPager().setCurrentItem(1);

12

            }

13

        });

14

15

        return view;

16

17

    }

18

​

19

}

Per questioni di spazio non posto tutte le classi, che potete comunque consultare nello zip dei sorgenti in allegato, l'unica nota che mi sento di fare è la seguente: quando arrivate all'ultimo Fragment, ossia l'ultima pagina del ViewPager, dovreste utilizzare le SharedPreferences per far si che il Wizard non sia mostrato sempre ad ogni avvio dell'applicazione. Per fare questo utilizzeremo una boolean.

private void memorizzaValore(String key, boolean value) {<br /> SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());<br /> Editor editor = sharedPreferences.edit();<br /> editor.putBoolean(key, value);<br /> editor.commit();<br /> }

6

 

1

private void memorizzaValore(String key, boolean value) {

2

        SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());

3

        Editor editor = sharedPreferences.edit();

4

        editor.putBoolean(key, value);

5

        editor.commit();

6

    }

Successivamente, nel metodo onClickListener del Button

memorizzaValore("GuidaCompletata", true);<br /> Toast.makeText(getActivity(), "Preferenze salvate", Toast.LENGTH_SHORT).show();<br /> Intent intent = new Intent(getActivity(), HomePage.class);<br /> startActivity(intent);

4

 

1

memorizzaValore("GuidaCompletata", true);

2

                Toast.makeText(getActivity(), "Preferenze salvate", Toast.LENGTH_SHORT).show();

3

                Intent intent = new Intent(getActivity(), HomePage.class);

4

                startActivity(intent);

In questo modo abbiamo salvato le preferenze, ma ancora non è finita. Nella classe HomePage dobbiamo controllare se effettivamente la variabile booleana ha un valore di true o false. Quindi, in HomePage inseriamo

preferenze = PreferenceManager.getDefaultSharedPreferences(getBaseContext());<br /> attivo = preferenze.getBoolean("GuidaCompletata", false);<br /> <br /> if(attivo) {<br /> <br /> }<br /> <br /> else {<br /> intent = new Intent(getApplicationContext(), MainActivity.class);<br /> startActivity(intent);<br /> }

11

 

1

preferenze = PreferenceManager.getDefaultSharedPreferences(getBaseContext());

2

        attivo = preferenze.getBoolean("GuidaCompletata", false);

3

​

4

        if(attivo) {

5

​

6

        }

7

8

        else {

9

            intent = new Intent(getApplicationContext(), MainActivity.class);

10

            startActivity(intent);

11

        }

Questo è tutto ! Per ulteriori chiarimenti potete scrivere in questa discussione.