[Facile] Creazione di un semplice wizard

[Crotan]

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.

<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" />

 

1

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

2

    android:id="@+id/pager"

3

    android:layout_width="match_parent"

4

    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.

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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><br /> public boolean onInterceptTouchEvent(M<span class="forTooltip">ot</span>ionEvent arg0) {<br /> <br /> return false;<br /> }<br /> <br /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><br /> public boolean onTouchEvent(M<span class="forTooltip">ot</span>ionEvent event) {<br /> <br /> return false;<br /> }<br /> }

​x

 

1

public class ViewPagerNoSwipe extends ViewPager {

2

​

3

    public ViewPagerNoSwipe(Context context) {

4

        super(context);

5

    }

6

​

7

    public ViewPagerNoSwipe(Context context, AttributeSet attrs) {

8

        super(context, attrs);

9

    }

10

​

11

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

12

    public boolean onInterceptTouchEvent(MotionEvent arg0) {

13

14

        return false;

15

    }

16

​

17

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

18

    public boolean onTouchEvent(MotionEvent event) {

19

20

        return false;

21

    }

22

}

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

<?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>

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 nel secondo 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="Avanti" />

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>

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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><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

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

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.
<br /> 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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><br /> //Numero di pagine totali<br /> public int getCount() {<br /> // TODO Auto-generated method stub<br /> return numeroPagine;<br /> }<br /> <br /> }

36

 

1

​

2

public class Adapter extends FragmentPagerAdapter{

3

​

4

    //Il numero di pagine totali

5

    private int numeroPagine = 3;

6

7

    //Costruttore

8

    public Adapter(FragmentManager fm) {

9

        super(fm);

10

        // TODO Auto-generated constructor stub

11

    }

12

​

13

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

14

    //Switcha in base alla posizione

15

    public Fragment getItem(int arg0) {

16

        // TODO Auto-generated method stub

17

        switch(arg0) {

18

            case 0: return new PageFragment();

19

            case 1: return new PageFragment2();

20

            case 2: return new PageFragment3();

21

        }

22

        Fragment fragment = new PageFragment();

23

        Bundle arguments = new Bundle();

24

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

25

        fragment.setArguments(arguments);

26

        return fragment;

27

    }

28

29

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

30

    //Numero di pagine totali

31

    public int getCount() {

32

        // TODO Auto-generated method stub

33

        return numeroPagine;

34

    }

35

​

36

}

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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><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 /> @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a><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

    @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

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

            @<a rel="nofollow" href="https://www.androidiani.com/forum/members/override.html" target="_blank">Override</a>

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

        }

Sorgenti caricati su Dropbox: LINK

Come utilizzare il metodo getActionBar() su API inferiori alle 11?
Per poter usare questo metodo su Gingerbread è necessario inserire nel proprio progetto la libreria di support v7 ed estendere ActionBarActivity, successivamente sostituire getActionBar() con getSupportActionBar().Maggiori informazioni su come importare la libreria nel vostro progetto sono disponibili qui: Support Library Setup | Android Developers.

Il risultato finale dovrebbe essere simile a questo




Per ulteriori chiarimenti potete scrivere in questa discussione.

[Crotan]

Riservato per future aggiunte.

[aeroxr1]

Come mai l'oggetto viene richiamato così nel layout ?
Non capisco a cosa serve nel linguaggio android questa stringa :

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

Le altre domande erano che avevo posto erano delle cavolate assurde =P

EDIT : credo di aver trovato la risposta :
http://stackoverflow.com/questions/7...ndroid-must-be

Ora provo a finire di seguire il tutorial


edit2 :

Implement this method to intercept all touch screen motion events. This allows you to watch events as they are dispatched to your children, and take ownership of the current gesture at any point.

Using this function takes some care, as it has a fairly complicated interaction with View.onTouchEvent(MotionEvent), and using it requires implementing that method as well as this one in the correct way. Events will be received in the following order:

You will receive the down event here.
The down event will be handled either by a child of this view group, or given to your own onTouchEvent() method to handle; this means you should implement onTouchEvent() to return true, so you will continue to see the rest of the gesture (instead of looking for a parent view to handle it). Also, by returning true from onTouchEvent(), you will not receive any following events in onInterceptTouchEvent() and all touch processing must happen in onTouchEvent() like normal.
For as long as you return false from this function, each following event (up to and including the final up) will be delivered first here and then to the target's onTouchEvent().
If you return true from here, you will not receive any following events: the target view will receive the same event but with the action ACTION_CANCEL, and all further events will be delivered to your onTouchEvent() method and no longer appear here.
Parameters
ev The motion event being dispatched down the hierarchy.
Returns
Return true to steal motion events from the children and have them dispatched to this ViewGroup through onTouchEvent(). The current target will receive an ACTION_CANCEL event, and no further messages will be delivered here.

Non capisco bene come funzioni il tutto :/
E questa è la parte che mi crea più dubbi :

The down event will be handled either by a child of this view group, or given to your own onTouchEvent() method to handle; this means you should implement onTouchEvent() to return true, so you will continue to see the rest of the gesture (instead of looking for a parent view to handle it). Also, by returning true from onTouchEvent(), you will not receive any following events in onInterceptTouchEvent() and all touch processing must happen in onTouchEvent() like normal.

se faccio ritornare true alla funzione onInterceptTouchEvent() l'evento intercettato è passato all'onTouchEvent() o il contrario ?

[wuby]

Grazie!!!!

guida molto apprezzata... anche se a causa delle mie limitate conoscenze di java (per non dire inesistenti) ci ho messo 3hr a capire come integrarlo nella struttura dell'app che avevo già iniziato.. quando poi ho risolto gli errori, e l'ho messa sul cell partiva perfettamente il wizard, ma poi crashava la HomeActivity.. dopo essermi fatto venire qualche capello bianco, ho capito che non l'avevo dichiarata nel manifest hahahahhaha

ancora grazie per le guide che ci scrivete..