Crearea ecranelor onboarding pentru aplicațiile Android

Ce veți crea

Introducere

Nu este nevoie de un geniu pentru a înțelege că o aplicație care îi face pe utilizatori noi să se simtă bineveniți și confortabili este probabil să se bucure de mult mai multă popularitate decât una care îi lasă să fie pierduți și confuzi. Ca rezultat, mulți dezvoltatori în aceste zile încearcă să se asigure că utilizatorii lor au o experiență plăcută la bord.

Dacă dezvoltați o aplicație inovatoare ale cărei funcționalități și utilizări ar putea să nu fie evidente utilizatorilor noi, trebuie să vă gândiți să adăugați câteva aplicații la bord. În acest tutorial, vă voi arăta o modalitate simplă de a crea rapid și de a adăuga astfel de ecrane în aplicația Android.

1. Adăugați dependențe de gradul

Mai întâi, adăugați Biblioteca de proiectare material ca a compila dependența față de build.gradle fișier al aplicaţia astfel încât să puteți utiliza elementele de interfață cu utilizatorul Android L în versiunile mai vechi de Android.

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

Apoi, adăugați o compila dependență pentru SmartTabLayout, o bibliotecă care oferă un element de bandă de titlu personalizat pentru ViewPager component.

java compile 'com.ogaclejapan.smarttablayout: bibliotecă: 1.2.1@aar'

De asemenea, vom folosi clase care aparțin Bibliotecii Android Support v4. Cu toate acestea, nu trebuie să o adăugați manual, deoarece aplicația Android Studio o adaugă în mod implicit.

2. Definirea layout-ului onboarding-ului Activitate

La bord Activitate va fi responsabil pentru afișarea tuturor ecranelor la bord. Prin urmare, acest lucru Activitate va avea următoarele widget-uri:

  • A ViewPager instanță care permite utilizatorilor să utilizeze gestul de glisare pentru a trece de la un ecran de la bord la altul.
  • A ButtonFlat marcat Ocolire, care permite utilizatorilor nerăbdători să sări peste procesul de îmbarcare.
  • A ButtonFlat marcat Următor →, care duce utilizatorul la următorul ecran de bord.
  • A SmartTabLayout care servește drept indicator de pagină pentru ViewPager component.

După ce puneți aceste widget-uri într-o RelativeLayout și poziționarea acestora, codul în fișierul XML de aspect al onboarding-ului Activitate ar trebui să arate astfel:

„xml

"

Simțiți-vă liber să schimbați aspectul pentru a vă potrivi preferințelor. Voi numi acest fișier de aspect activity_onboarding.xml.

3. Definirea layout-urilor ecranelor onboarding

Pentru acest tutorial, veți crea trei ecrane onboarding. Pentru a menține tutorialul simplu, ecranele vor avea doar două TextView widget-uri. Într-o aplicație reală, trebuie de asemenea să vă depuneți eforturi pentru a menține ecranele la bord cât mai simple, pentru a evita ca utilizatorii noi să fie copleșiți când deschid aplicația pentru prima dată.

Este denumit fișierul XML de aspect al primului ecran onboarding_screen1.xml și are următorul conținut:

„xml

"

Utilizați același XML în fișierele de aspect ale celorlalte două ecrane și denumiți-le onboarding_screen2.xml și onboarding_screen3.xml. Desigur, ar trebui să schimbați text proprietatea fiecăruia TextView widget, astfel încât fiecare ecran la bord este unic.

4. Creați un Fragment pentru fiecare ecran de bord

Creați o nouă clasă Java și denumiți-o OnboardingFragment1.java. Faceți-i o subclasă de Fragment și suprascrie-i onCreateView metodă. Apoi, apelați umfla metoda de a crea un Vedere folosind layout-ul pe care l-am definit onboarding_screen1.xml și returnați Vedere. Clasa ar trebui să arate astfel:

"class public java OnboardingFragment1 extinde Fragment

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

Fragment pentru primul ecran de bord este acum gata. Urmați același proces pentru a crea încă două Fragment subclase, OnboardingFragment2.java și OnboardingFragment3.java, care utilizează layout-urile definite în onboarding_screen2.xml și onboarding_screen3.xml respectiv.

5. Creați Onboarding Activitate

Creați o nouă clasă Java și denumiți-o OnboardingActivity.java. Faceți-i o subclasă de FragmentActivity și suprascrie-i onCreate metodă.

"clasa publica java OnboardingActivity extinde FragmentActivity

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

Apoi, declarați a ViewPager, A SmartTabLayout, si doi ButtonFlat widget-uri ca variabile membre ale clasei.

java pager privat ViewPager; indicator inteligent SmartTabLayout; privat ButtonFlat săriți; privat ButtonFlat următor;

În onCreate metoda, apel setContentView pentru a afișa aspectul definit în activity_onboarding.xml și utilizați findViewById de inițializare a variabilelor membre.

"java setContentView (R.layout.activity_onboarding);

pager = (VizualizarePager) findViewById (R.id.pager); indicator = (SmartTabLayout) findViewById (R.id.indicator); skip = (buttonFlat) findViewById (R.id.skip); următor = (ButtonFlat) findViewById (R.id.next); "

Acum trebuie să creați o FragmentStatePagerAdapterViewPager pot folosi pentru a afișa ecranele de bord. Creați o nouă variabilă de tip FragmentStatePagerAdapter și numește-o adaptor. Inițializați-o prin trecerea rezultatului getSupportFragmentManager cu constructorul său. Deoarece este o clasă abstractă, Android Studio va genera automat un cod pentru metodele abstracte, după cum se arată mai jos.

"java FragmentStatePagerAdapter adapter = nou FragmentStatePagerAdapter (getSupportFragmentManager ()) @Override public Fragment getItem (int poziție)

@Override public int getCount () ; "

În getCount , returnați numărul de ecrane la bord.

java @Override publică int getCount () return 3;

Adauga o intrerupator declarație către getItem pentru a returna metoda corectă Fragment pe baza valorii poziţie.

java @Override public Fragment getItem (poziție int) comutator (poziție) cazul 0: întoarcere nouă OnboardingFragment1 (); cazul 1: returnează noul OnboardingFragment2 (); cazul 2: returnează noul OnboardingFragment3 (); implicit: return null;

Încă în onCreate metoda, asociați FragmentStatePagerAdapter cu ViewPager prin apelarea setAdapter metodă.

java pager.setAdapter (adaptor);

Acum, că ViewPager este gata, indicați SmartTabLayout la el prin apelarea setViewPager metodă.

java indicator.setViewPager (pager);

Acum este momentul să adăugați agenți de gestionare a clicurilor la ButtonFlat widget-uri. Puteți face acest lucru folosind setOnClickListener metoda, trecând o nouă instanță a View.OnClickListener clasa la ea.

În dispozitivul de manipulare al ocolire buton, apelați o metodă numită finishOnboarding. Vom implementa această metodă în pasul următor.

În dispozitivul de manipulare al Următor → buton, utilizați setCurrentItem impreuna cu getCurrentItem pentru a vă deplasa la următorul ecran de bord. De asemenea, dacă getCurrentItem returnează ultimul ecran la bord, apelează o metodă numită finishOnboarding. Vom implementa această metodă într-un moment.

Codul pentru operatorii de butoane ar trebui să arate astfel:

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

next.setOnClickListener (noul View.OnClickListener () @Override public void onClick (View v) if (pager.getCurrentItem () == 2) // Final screenOnboarding (); altceva pager.setCurrentItem .getCurrentItem () + 1, true);); "

S-ar putea să doriți să faceți câteva modificări la aspectul de la bord Activitate, cum ar fi eliminarea ocolire butonul și schimbarea etichetei Următor → buton pentru a Terminat când utilizatorul ajunge la ultimul ecran de bord. Puteți face acest lucru adăugând o SimpleOnPageChangeListener la SmartTabLayout și suprasolicitarea lui onPageSelected metodă.

java indicator.setOnPageChangeListener (noul ViewPager.SimpleOnPageChangeListener () @Override public void onPageSelected (int poziție) if (position == 2) skip.setVisibility (View.GONE); next.setText ("Done"); skip.setVisibilitate (View.VISIBLE); next.setText ("Următorul"););

6. Încheierea experienței la bord

Când utilizatorul a văzut toate ecranele la bord sau a ales să le ignore, ar trebui să încheiați experiența de la bord, sunând la finishOnboarding (acesta este numele folosit în pasul anterior).

În finishOnboarding , trimiteți o referință la SharedPreferences obiect al aplicației și setați o boolean pentru cheia onboarding_complete la Adevărat folosind putBoolean metodă. Vom folosi această cheie în pasul următor pentru a vă asigura că utilizatorii văd ecranele de bord numai dacă nu au finalizat procesul de la bord.

Apoi, creați un nou scop și apelați startActivity metoda de a lansa principalul Activitate (The Activitate care ar trebui să se deschidă atunci când utilizatorul face clic pe pictograma aplicației).

În cele din urmă, sună finalizarea a inchide OnboardingActivity. Este ceea ce punerea în aplicare a finishOnboarding metoda ar trebui să arate ca:

"java private void finishOnboarding () // Obțineți preferințele comune SharedPreferences preferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);

// Setați onboarding_complete la true preferences.edit () .putBoolean ("onboarding_complete", true) .apply (); // Lansați activitatea principală, numită MainActivity Intent main = new Intent (aceasta, MainActivity.class); startActivity (principal); // Închideți finisajul OnboardingActivity (); “

7. Pornirea Onboarding-ului Activitate

La bord Activitate ar trebui să înceapă cât mai curând posibil dacă un utilizator care nu a terminat procesul de la bord deschide aplicația. Aceasta înseamnă că veți adăuga codul pentru detectarea utilizatorilor noi și pentru lansare OnboardingActivity în onCreate metoda principală a aplicației dvs. Activitate.

Verificând dacă SharedPreferences Obiectul are o cheie numită onboarding_complete a căror valoare este Adevărat, puteți stabili dacă utilizatorul a terminat procesul de îmbarcare. Dacă valoarea cheii este fals, închideți principalul Activitate imediat și de a crea un nou scop a lansa OnboardingActivity. Uitați-vă la următorul bloc de coduri pentru a înțelege mai bine acest concept.

"java // Obțineți preferințele comune SharedPreferences preferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);

// Verificați dacă onboarding_complete este falsă dacă (! Preferences.getBoolean ("onboarding_complete", false)) // Începeți activitatea onboarding Intent onboarding = new Intent (this, OnboardingActivity.class); startActivity (onboarding);

// Închideți încheierea activității principale (); întoarcere; “

8. Actualizați Manifestul aplicației

Dacă nu ați făcut-o deja, declarați OnboardingActivity în manifestarea aplicației.

„xml

"

9. Compilați și executați

Acum puteți să vă compilați aplicația și să o executați pe un dispozitiv Android. Deoarece aceasta va fi prima dvs. alergare, ar trebui să vedeți ecranele de la bord în locul principalului Activitate.

Concluzie

În acest tutorial, ați învățat cum să creați ecrane simple la bord și să le adăugați în aplicația Android. Utilizați aceste ecrane pentru a răspunde foarte succint la întrebări, cum ar fi ce poate face aplicația dvs. și când ar trebui să fie utilizat.

Pentru o experiență optimă de utilizare, procesul de la bord trebuie să fie cât mai scurt posibil și utilizatorul ar trebui să poată sări peste tot în orice moment.

Cod