Creazione di schermate di onboarding per le app Android

Cosa starai creando

introduzione

Non ci vuole un genio per capire che un'app che fa sentire i nuovi utenti graditi e comodi è probabile che goda di molta più popolarità di quella che li lascia persi e confusi. Di conseguenza, molti sviluppatori in questi giorni stanno cercando di garantire che i loro utenti abbiano una buona esperienza di onboarding.

Se stai sviluppando un'app innovativa la cui funzionalità e i cui usi potrebbero non essere ovvi per i nuovi utenti, dovresti considerare l'aggiunta di alcune schermate di onboarding alla tua app. In questo tutorial, ti mostrerò un modo semplice per creare e aggiungere rapidamente tali schermate alla tua app Android.

1. Aggiungi le dipendenze di Gradle

Innanzitutto, aggiungi la libreria di progettazione del materiale come compilare dipendenza dal build.gradle file del App modulo in modo da poter utilizzare gli elementi dell'interfaccia utente di Android L nelle versioni precedenti di Android.

java compile 'com.github.navasmdc: MaterialDesign: 1.5@aar'

Quindi, aggiungere un compilare dipendenza per SmartTabLayout, una libreria che offre un elemento di title strip personalizzato per ViewPager componente.

java compile 'com.ogaclejapan.smarttablayout: library: 1.2.1@aar'

Utilizzeremo anche le classi che appartengono alla libreria di supporto Android v4. Tuttavia, non è necessario aggiungerlo manualmente, poiché Android Studio lo aggiunge per impostazione predefinita.

2. Definire il layout di Onboarding Attività

L'onboarding Attività sarà responsabile della visualizzazione di tutti gli schermi di bordo. Pertanto, questo Attività avrà i seguenti widget:

• UN ViewPager istanza che consente agli utenti di utilizzare il gesto di scorrimento per passare da una schermata di onboarding alla successiva.
• UN ButtonFlat etichettato Salta, che consente agli utenti impazienti di saltare il processo di onboarding.
• UN ButtonFlat etichettato Il prossimo, che porta l'utente alla schermata successiva.
• UN SmartTabLayout che funge da indicatore di pagina per il ViewPager componente.

Dopo aver inserito questi widget in a RelativeLayout e posizionandoli, il codice nel file XML di layout dell'onboarding Attività dovrebbe assomigliare a questo:

"xml

"

Sentiti libero di modificare il layout in base alle tue preferenze. Chiamerò questo file di layout activity_onboarding.xml.

3. Definire i layout degli schermi di bordo

Per questo tutorial, creerai tre schermate di onboarding. Per mantenere il tutorial semplice, gli schermi ne avranno solo due TextView widgets. In una vera app, dovresti anche cercare di mantenere gli schermi onboarding il più semplici possibile per evitare che i nuovi utenti vengano sopraffatti quando aprono la tua app per la prima volta.

Il file XML di layout della prima schermata è denominato onboarding_screen1.xml e ha il seguente contenuto:

"xml

"

Usa lo stesso XML nei file di layout degli altri due schermi e nominali onboarding_screen2.xml e onboarding_screen3.xml. Certo, dovresti cambiare il testo proprietà di ciascuno TextView widget in modo che ogni schermata di onboarding sia unica.

4. Creare a Frammento per ogni schermata di onboarding

Crea una nuova classe Java e chiamala OnboardingFragment1.java. Ne fanno una sottoclasse di Frammento e scavalca il suo onCreateView metodo. Quindi, chiama il gonfiare metodo per creare a vista usando il layout definito in onboarding_screen1.xml e restituire il vista. La tua classe dovrebbe assomigliare a questa:

"java public class OnboardingFragment1 estende Fragment

@Nullable @Override public Visualizza onCreateView (LayoutInflater inflater, ViewGroup container, Bundle s) return inflater.inflate (R.layout.onboarding_screen1, container, false);  "

Il Frammento per il tuo primo schermo di onboarding ora è pronto. Segui lo stesso processo per crearne altri due Frammento sottoclassi, OnboardingFragment2.java e OnboardingFragment3.java, che utilizzano i layout definiti in onboarding_screen2.xml e onboarding_screen3.xml rispettivamente.

5. Creare l'Onboarding Attività

Crea una nuova classe Java e chiamala OnboardingActivity.java. Ne fanno una sottoclasse di FragmentActivity e scavalca il suo onCreate metodo.

"java public class OnboardingActivity estende FragmentActivity

@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState);  "

Quindi, dichiarare a ViewPager, un SmartTabLayout, e due ButtonFlat widget come variabili membro della classe.

cercapersone ViewPager privato java; indicatore privato SmartTabLayout; private ButtonFlat salta; successivo ButtonFlat privato;

Nel onCreate metodo, chiama setContentView per visualizzare il layout definito in activity_onboarding.xml e usa il findViewById metodo per inizializzare le variabili membro.

"java setContentView (R.layout.activity_onboarding);

pager = (ViewPager) findViewById (R.id.pager); indicator = (SmartTabLayout) findViewById (R.id.indicator); skip = (ButtonFlat) findViewById (R.id.skip); next = (ButtonFlat) findViewById (R.id.next); "

Ora devi creare un FragmentStatePagerAdapter che il ViewPager può usare per visualizzare gli schermi di bordo. Crea una nuova variabile di tipo FragmentStatePagerAdapter e nominalo adattatore. Inizializza passando il risultato del getSupportFragmentManager metodo al suo costruttore. Poiché è una classe astratta, Android Studio genererà automaticamente il codice per i metodi astratti come mostrato di seguito.

"java FragmentStatePagerAdapter adapter = new FragmentStatePagerAdapter (getSupportFragmentManager ()) @Override public Fragment getItem (int position)

@Override public int getCount () ; "

Nel getCount metodo, restituisce il numero di schermi di bordo.

java @Override public int getCount () return 3;

Aggiungere un interruttore dichiarazione al getItem metodo per restituire il corretto Frammento in base al valore di posizione.

java @Override public Fragment getItem (int position) switch (position) caso 0: return new OnboardingFragment1 (); caso 1: return new OnboardingFragment2 (); caso 2: return new OnboardingFragment3 (); default: return null;

Ancora nel onCreate metodo, associare il FragmentStatePagerAdapter con il ViewPager chiamando il setAdapter metodo.

java pager.setAdapter (adattatore);

Ora che il ViewPager è pronto, punta il SmartTabLayout ad esso chiamando il setViewPager metodo.

java indicator.setViewPager (pager);

È giunto il momento di aggiungere gestori di clic al ButtonFlat widgets. Puoi farlo usando il setOnClickListener metodo, passando una nuova istanza di View.OnClickListener classe ad esso.

Nel conduttore di Salta pulsante, chiama un metodo chiamato finishOnboarding. Implementeremo questo metodo nel prossimo passaggio.

Nel conduttore di Il prossimo pulsante, usare setCurrentItem insieme a getCurrentItem per passare alla schermata successiva. Inoltre, se getCurrentItem ritorna l'ultima schermata di onboarding, chiama un metodo chiamato finishOnboarding. Implementeremo questo metodo tra un momento.

Il codice per i gestori dei pulsanti dovrebbe assomigliare a questo:

"java skip.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) finishOnboarding (););

next.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) if (pager.getCurrentItem () == 2) // L'ultima schermata finishOnboarding (); else pager.setCurrentItem (pager .getCurrentItem () + 1, true);); "

Potresti voler apportare alcune modifiche al layout dell'onboarding Attività, come rimuovere il Salta pulsante e cambiando l'etichetta del Il prossimo pulsante a Fatto quando l'utente raggiunge l'ultima schermata di onboarding. Puoi farlo aggiungendo un SimpleOnPageChangeListener al SmartTabLayout e sovrascrivendo il suo onPageSelected metodo.

java indicator.setOnPageChangeListener (new ViewPager.SimpleOnPageChangeListener () @Override public void onPageSelected (int position) if (position == 2) skip.setVisibility (View.GONE); next.setText ("Done"); else skip.setVisibility (View.VISIBLE); next.setText ("Next"););

6. Conclusione dell'esperienza di onboarding

Quando l'utente ha visto tutte le schermate di onboarding, o ha scelto di saltarle, è necessario terminare l'esperienza di onboarding chiamando il finishOnboarding metodo (è il nome che abbiamo usato nel passaggio precedente).

Nel finishOnboarding metodo, ottenere un riferimento al SharedPreferences oggetto dell'app e impostare a booleano per la chiave onboarding_complete a vero usando il putBoolean metodo. Nel prossimo passaggio utilizzeremo questa chiave per assicurarci che gli utenti visualizzino le schermate di onboarding solo se non hanno completato la procedura di onboarding.

Quindi, creane uno nuovo Intento e chiama il startActivity metodo per lanciare il main Attività (il Attività che dovrebbe aprirsi quando l'utente fa clic sull'icona dell'app).

Infine, chiama finire chiudere OnboardingActivity. È ciò che l'attuazione del finishOnboarding il metodo dovrebbe assomigliare a:

"java private void finishOnboarding () // Ottieni le preferenze condivise Preferenze SharedPreferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);

// Imposta onboarding_complete su true preferences.edit () .putBoolean ("onboarding_complete", true) .apply (); // Avvia l'attività principale, chiamata MainActivity Intent main = new Intent (this, MainActivity.class); startActivity (principale); // Chiudi la finitura OnboardingActivity (); "

7. Iniziare l'onboarding Attività

L'onboarding Attività dovrebbe iniziare il prima possibile se un utente che non ha terminato il processo di onboarding apre l'app. Ciò significa che aggiungerai il codice per rilevare nuovi utenti e avviare OnboardingActivity nel onCreate metodo della tua app principale Attività.

Controllando se il SharedPreferences l'oggetto ha una chiave chiamata onboarding_complete di chi è il valore vero, è possibile determinare se l'utente ha terminato il processo di onboarding. Se il valore della chiave è falso, chiudi il principale Attività immediatamente e creane uno nuovo Intento lanciare OnboardingActivity. Dai un'occhiata al seguente codice per capire meglio questo concetto.

"java // Ottieni le preferenze condivise Preferenze SharedPreferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);

// Controlla se onboarding_complete è false se (! Preferences.getBoolean ("onboarding_complete", false)) // Avvia onboarding Activity Intent onboarding = new Intent (this, OnboardingActivity.class); startActivity (onboarding);

// Chiudi l'attività principale finish (); ritorno; "

8.Aggiornare l'App manifest

Se non lo hai già fatto, dichiara OnboardingActivity nel manifest dell'app.

"xml

"

9. Compila ed esegui

Ora puoi compilare la tua app ed eseguirla su un dispositivo Android. Poiché questa sarà la tua prima corsa, dovresti vedere le schermate di onboarding invece del main Attività.

Conclusione

In questo tutorial, hai imparato come creare semplici schermate di onboarding e aggiungerle alla tua app per Android. Utilizza queste schermate per rispondere in modo molto sintetico a domande, ad esempio cosa può fare la tua app e quando deve essere utilizzata.

Per un'esperienza utente ottimale, il processo di onboarding dovrebbe essere il più breve possibile e l'utente dovrebbe essere in grado di saltarlo in qualsiasi momento.