Autore Topic: [Facile] Creazione di un semplice wizard  (Letto 3199 volte)

Offline CrotaNexus

  • Utente normale
  • ***
  • Post: 156
  • Vuolsi così colà dove si puote ciò che si vuole
  • Respect: +25
    • Google+
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    SimoneDev
  • Sistema operativo:
    Windows 8.1
[Facile] Creazione di un semplice wizard
« il: 06 Gennaio 2014, 19:00:49 CET »
+1
Livello di difficoltà: facile
Versione Target SDK utilizzata: 18
Versione Minima SDK: 8

Link al file compresso del progetto eclipse: link a fine guida

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 oppure l'ottima discussione di Bradipao: Activity con ViewPager e Fragments.

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.

Codice (XML): [Seleziona]
<com.example.tutorialapp.ViewPagerNoSwipe xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/pager"
   android:layout_width="match_parent"
   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.

Codice (Java): [Seleziona]
public class ViewPagerNoSwipe extends ViewPager {

    public ViewPagerNoSwipe(Context context) {
        super(context);
    }

    public ViewPagerNoSwipe(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
       
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
       
        return false;
    }
}


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

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" >

    <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_below="@+id/textView1"
       android:text="Benvenuto!"
       android:textSize="16dp"
       />

    <Button
       android:id="@+id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:text="Avanti" />

</RelativeLayout>


Pagina2

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" >

    <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_below="@+id/textView1"
       android:text="Sono nel secondo Fragment!"
       android:textSize="16dp"
       />

    <Button
       android:id="@+id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:text="Avanti" />
   
    <Button
       android:id="@+id/button2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:text="Indietro" />

</RelativeLayout>


Pagina3
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" >

    <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_below="@+id/textView1"
       android:text="Sono nell'ultimo Fragment!"
       android:textSize="16dp"
       />

    <Button
       android:id="@+id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:text="Termina" />
   
    <Button
       android:id="@+id/button2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:text="Indietro" />

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

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


Creiamo ora l'adapter per il ViewPager.

Codice (Java): [Seleziona]
public class Adapter extends FragmentPagerAdapter{

    //Il numero di pagine totali
    private int numeroPagine = 3;
   
    //Costruttore
    public Adapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }

    @Override
    //Switcha in base alla posizione
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        switch(arg0) {
            case 0: return new PageFragment();
            case 1: return new PageFragment2();
            case 2: return new PageFragment3();
        }
        Fragment fragment = new PageFragment();
        Bundle arguments = new Bundle();
        arguments.putString("pageIndex", Integer.toString(arg0 + 1));
        fragment.setArguments(arguments);
        return fragment;
    }
   
    @Override
    //Numero di pagine totali
    public int getCount() {
        // TODO Auto-generated method stub
        return numeroPagine;
    }

}


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.

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

}


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.

Codice (Java): [Seleziona]
    private void memorizzaValore(String key, boolean value) {
        SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());
        Editor editor = sharedPreferences.edit();
        editor.putBoolean(key, value);
        editor.commit();
    }


Successivamente, nel metodo onClickListener del Button

Codice (Java): [Seleziona]
                memorizzaValore("GuidaCompletata", true);
                Toast.makeText(getActivity(), "Preferenze salvate", Toast.LENGTH_SHORT).show();
                Intent intent = new Intent(getActivity(), HomePage.class);
                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

Codice (Java): [Seleziona]
        preferenze = PreferenceManager.getDefaultSharedPreferences(getBaseContext());
        attivo = preferenze.getBoolean("GuidaCompletata", false);

        if(attivo) {

        }
       
        else {
            intent = new Intent(getApplicationContext(), MainActivity.class);
            startActivity(intent);
        }


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



Questo è tutto ! Per ulteriori chiarimenti potete scrivere in questa discussione.
« Ultima modifica: 08 Gennaio 2014, 17:24:00 CET da CrotaNexus »
SimoneDev @ Google Play Store