Share
Wat je gaat creërenEr is geen genie voor nodig om te begrijpen dat een app die ervoor zorgt dat nieuwe gebruikers zich welkom en comfortabel voelen, waarschijnlijk veel populairder zal zijn dan een app die hen verloren en verward laat. Het gevolg is dat veel ontwikkelaars tegenwoordig proberen ervoor te zorgen dat hun gebruikers een leuke onboarding-ervaring hebben.
Als u een innovatieve app ontwikkelt waarvan de functionaliteit en het gebruik mogelijk niet voor de hand ligt voor nieuwe gebruikers, kunt u overwegen een paar onboarding-schermen aan uw app toe te voegen. In deze zelfstudie laat ik u een eenvoudige manier zien om snel dergelijke schermen te maken en toe te voegen aan uw Android-app.
Voeg eerst de Material Design Library toe als een compileren afhankelijkheid van de build.gradle bestand van de app module zodat u gebruikersinterface-elementen van Android L kunt gebruiken in oudere versies van Android.
java compileer 'com.github.navasmdc: MaterialDesign: 1.5@aar'
Voeg vervolgens een toe compileren afhankelijkheid voor SmartTabLayout, een bibliotheek die een aangepast titelstrookelement biedt voor de ViewPager bestanddeel.
java compileer 'com.ogaclejapan.smarttablayout: bibliotheek: 1.2.1@aar'
We gebruiken ook klassen die behoren tot de Android Support v4-bibliotheek. U hoeft het echter niet handmatig toe te voegen, omdat Android Studio dit standaard toevoegt.
Accentsconagua
Activiteit Het aan boord gaan Activiteit zal verantwoordelijk zijn voor het weergeven van alle onboarding-schermen. Daarom dit Activiteit zal de volgende widgets hebben:
ViewPager Zo kunnen de gebruikers de veeggebaar gebruiken om van het ene onboardingscherm naar het volgende te gaan.ButtonFlat geëtiketteerd Overspringen, waarmee ongeduldige gebruikers het onboarding-proces kunnen overslaan.ButtonFlat geëtiketteerd volgende, die de gebruiker naar het volgende onboarding-scherm brengt.SmartTabLayout die dient als een pagina-indicator voor de ViewPager bestanddeel.Na het plaatsen van deze widgets in een Relatieve layout en positionering ervan, de code in het lay-out XML-bestand van de onboarding Activiteit zou er als volgt uit moeten zien:
"xml
"
U kunt de opmaak aanpassen aan uw voorkeuren. Ik zal dit lay-outbestand aanroepen activity_onboarding.xml.
Voor deze zelfstudie maakt u drie onboarding-schermen. Om de tutorial eenvoudig te houden, hebben de schermen er maar twee Tekstweergave widgets. In een echte app moet je er ook naar streven de onboarding-schermen zo eenvoudig mogelijk te houden om te voorkomen dat nieuwe gebruikers overweldigd raken wanneer ze je app voor de eerste keer openen.
Het lay-out XML-bestand van het eerste scherm heeft een naam onboarding_screen1.xml en heeft de volgende inhoud:
"xml
"
Gebruik dezelfde XML in de lay-outbestanden van de andere twee schermen en geef ze een naam onboarding_screen2.xml en onboarding_screen3.xml. Natuurlijk moet u de tekst eigendom van elk Tekstweergave widget zodat elk onboarding-scherm uniek is.
Fragment voor elk onboarding-schermMaak een nieuwe Java-klasse en geef deze een naam OnboardingFragment1.java. Maak er een subklasse van Fragment en negeer het onCreateView methode. Bel vervolgens de opblazen methode om een te maken Uitzicht met behulp van de lay-out die we hebben gedefinieerd in onboarding_screen1.xml en retourneer de Uitzicht. Je klas zou er als volgt uit moeten zien:
"java public class OnboardingFragment1 breidt Fragment uit
@Nullable @Override openbaar View onCreateView (LayoutInflater inflater, ViewGroup-container, Bundel s) return inflater.inflate (R.layout.onboarding_screen1, container, false); "
De Fragment want je eerste onboarding-scherm is nu klaar. Volg hetzelfde proces om er nog twee te maken Fragment subklassen, OnboardingFragment2.java en OnboardingFragment3.java, die de lay-outs gebruiken die zijn gedefinieerd in onboarding_screen2.xml en onboarding_screen3.xml respectievelijk.
Activiteit Maak een nieuwe Java-klasse en geef deze een naam OnboardingActivity.java. Maak er een subklasse van FragmentActivity en negeer het onCreate methode.
"java public class OnboardingActivity breidt FragmentActivity uit
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); "
Vervolgens, verklaar a ViewPager, een SmartTabLayout, en twee ButtonFlat widgets als lidvariabelen van de klasse.
java private ViewPager-pager; privé SmartTabLayout-indicator; privé ButtonFlat overslaan; private ButtonFlat volgende;
In de onCreate methode, bel setContentView om de lay-out weer te geven die is gedefinieerd in activity_onboarding.xml en gebruik de findViewById methode om de ledvariabelen te initialiseren.
"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); "
U moet nu een maken FragmentStatePagerAdapter dat de ViewPager kan gebruiken om de onboarding-schermen weer te geven. Maak een nieuwe variabele van het type FragmentStatePagerAdapter en noem het adapter. Initialiseer het door het resultaat van de getSupportFragmentManager methode voor zijn constructor. Omdat het een abstracte klasse is, genereert Android Studio automatisch code voor de abstracte methoden, zoals hieronder weergegeven.
"java FragmentStatePagerAdapter-adapter = new FragmentStatePagerAdapter (getSupportFragmentManager ()) @Override openbaar Fragment getItem (int-positie)
@Override public int getCount () ; "
In de getCount methode, stuur het aantal onboarding-schermen terug.
java @Override public int getCount () return 3;
Voeg een ... toe schakelaar verklaring aan de getItem methode om het goede terug te geven Fragment op basis van de waarde van positie.
java @Override openbaar Fragment getItem (int positie) switch (positie) case 0: return onboardingFragment1 (); case 1: return onboardingFragment2 (); case 2: return onboardingFragment3 (); standaard: return null;
Nog steeds in de onCreate methode, associeer de FragmentStatePagerAdapter met de ViewPager door het te bellen setAdapter methode.
java pager.setAdapter (adapter);
Nu dat het ViewPager is klaar, wijs de SmartTabLayout ernaar door het setViewPager methode.
java indicator.setViewPager (pager);
Het is nu tijd om click handlers toe te voegen aan de ButtonFlat widgets. U kunt dit doen met behulp van de setOnClickListener methode, een nieuw exemplaar van de View.OnClickListener klasse eraan.
In de handler van de overspringen knop, bel een methode met de naam finishOnboarding. We zullen deze methode in de volgende stap implementeren.
In de handler van de volgende knop, gebruik setCurrentItem samen met getCurrentItem om naar het volgende onboardingscherm te gaan. Ook als getCurrentItem geeft als resultaat het laatste onboarding-scherm, noem een methode genaamd finishOnboarding. We zullen deze methode in een oogwenk implementeren.
De code voor de handlers van de knoppen zou er als volgt uit moeten zien:
"java skip.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) finishOnboarding (););
next.setOnClickListener (nieuwe View.OnClickListener () @Override public void onClick (View v) if (pager.getCurrentItem () == 2) // Het laatste scherm eindigtOnboarding (); else pager.setCurrentItem (pager .getCurrentItem () + 1, waar);); "
Misschien wilt u een paar wijzigingen aanbrengen in de lay-out van de onboarding Activiteit, zoals het verwijderen van de overspringen knop en het wijzigen van het label van de volgende knop naar Gedaan wanneer de gebruiker het laatste onboarding-scherm bereikt. U kunt dit doen door een SimpleOnPageChangeListener naar de SmartTabLayout en het overschrijven ervan onPageSelected methode.
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 ("Volgende"););
Wanneer de gebruiker alle onboarding-schermen heeft gezien of ervoor heeft gekozen deze over te slaan, moet u de onboarding-ervaring beëindigen door de finishOnboarding methode (dat is de naam die we in de vorige stap hebben gebruikt).
In de finishOnboarding methode, krijg een verwijzing naar de Gedeelde voorkeuren object van de app en stel a boolean voor de sleutel onboarding_complete naar waar de ... gebruiken putBoolean methode. We zullen deze sleutel in de volgende stap gebruiken om ervoor te zorgen dat gebruikers de onboarding-schermen alleen zien als ze het onboarding-proces niet hebben voltooid.
Maak vervolgens een nieuw voornemen en bel de startActivity methode om de main te starten Activiteit (de Activiteit dat moet openen wanneer de gebruiker op het pictogram van de app klikt).
Tot slot, bel af hebben sluiten OnboardingActivity. Het is wat de implementatie van de finishOnboarding methode moet er als volgt uitzien:
"java private void finishOnboarding () // Krijg de gedeelde voorkeuren SharedPreferences preferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);
// Stel onboarding_complete in op true preferences.edit () .putBoolean ("onboarding_complete", true) .apply (); // Start de hoofdactiviteit MainActivity Intent main = new Intent (this, MainActivity.class); startActivity (hoofd); // Sluit de OnboardingActivity-afwerking (); " Activiteit Het aan boord gaan Activiteit moet zo vroeg mogelijk worden gestart als een gebruiker die het onboarding-proces niet heeft voltooid, de app opent. Dit betekent dat u de code voor het detecteren van nieuwe gebruikers en het starten ervan gaat toevoegen OnboardingActivity in de onCreate methode van de hoofd van uw app Activiteit.
Door te controleren of de Gedeelde voorkeuren object heeft een sleutel genaamd onboarding_complete waarvan de waarde is waar, u kunt bepalen of de gebruiker het onboarding-proces heeft voltooid. Als de waarde van de sleutel is vals, sluit de main Activiteit onmiddellijk en maak een nieuwe aan voornemen lanceren OnboardingActivity. Bekijk het volgende codeblok om dit concept beter te begrijpen.
"java // De gedeelde voorkeuren ophalen SharedPreferences preferences = getSharedPreferences (" my_preferences ", MODE_PRIVATE);
// Controleer of onboarding_complete onwaar is als (! Preferences.getBoolean ("onboarding_complete", false)) // Start onboarding Activity Intent onboarding = new Intent (this, OnboardingActivity.class); startActivity (onboarding);
// Sluit de hoofdactiviteitsafwerking (); terug te keren; "
Als je het nog niet gedaan hebt, verklaar het dan OnboardingActivity in het manifest van de app.
"xml
"
U kunt uw app nu compileren en uitvoeren op een Android-apparaat. Omdat dit je eerste run is, zou je de onboarding-schermen moeten zien in plaats van de main Activiteit.
In deze zelfstudie leer je hoe je eenvoudige onboarding-schermen kunt maken en deze kunt toevoegen aan je Android-app. Gebruik deze schermen om heel bondig vragen te beantwoorden, zoals wat uw app kan doen en wanneer deze moet worden gebruikt.
Voor een optimale gebruikerservaring moet het onboarding-proces zo kort mogelijk zijn en moet de gebruiker het op elk gewenst moment kunnen overslaan.
