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.
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.
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:
ViewPager
instanță care permite utilizatorilor să utilizeze gestul de glisare pentru a trece de la un ecran de la bord la altul.ButtonFlat
marcat Ocolire, care permite utilizatorilor nerăbdători să sări peste procesul de îmbarcare.ButtonFlat
marcat Următor →, care duce utilizatorul la următorul ecran de bord.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.
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.
Fragment
pentru fiecare ecran de bordCreaț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.
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 FragmentStatePagerAdapter
că ViewPager
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"););
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 (); “
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; “
Dacă nu ați făcut-o deja, declarați OnboardingActivity
în manifestarea aplicației.
„xml
"
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
.
Î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.