Hoe een instellingenscherm in een Android-app te coderen

Wat je gaat creëren

Het materiaalontwerpteam bij Google geeft een duidelijke definitie van de instellingen van uw Android-app:

Met app-instellingen kunnen gebruikers voorkeuren aangeven voor hoe een app zich zou moeten gedragen.

Google geeft ook aan dat uw gebruikers moeten navigeren naar de app-instellingen vanuit de zijnavigatie of het werkbalkmenu, met een item met het label instellingen

Met instellingen in uw app kunnen uw gebruikers bepaalde functies van uw app bedienen. Dit maakt uw gebruikers blij in plaats van boos - omdat ze nu zelf bepalen hoe de app zich gedraagt. 

Het wordt sterk aanbevolen om toegang te geven tot app-instellingen. Dit zorgt voor een betere gebruikerservaring voor uw gebruikers, wat leidt tot een betere beoordeling van de Google Play Store, wat uiteindelijk resulteert in een hoger aantal app-downloads (waardoor de inkomsten stijgen). 

Ik ga ervan uit dat je interactie hebt gehad met de instellingen van een app op je apparaat, bijvoorbeeld door een standaard beltoon te selecteren of door je privacy in de app te beheren. Bijna alle populairste apps die u hebt gedownload of die u in de Google Play Store zult downloaden, bevatten een instellingenscherm waarmee u het gedrag van de app kunt bepalen. 

Een voorbeeld van een populaire app met een instellingenscherm is de Chrome Android-app van Google. In het instellingenscherm van deze app kunnen gebruikers de standaardzoekmachine kiezen, het meldingsgedrag wijzigen, gebruikersprivacy beheren, enzovoort. U kunt dit zelf bekijken door de Chrome-app te downloaden van de Google Play Store (als u deze nog niet hebt ingeschakeld op Je toestel). De volgende schermafbeelding is afkomstig van de Chrome-app en geeft het instellingenscherm van de app weer.

In dit bericht leert u hoe u vanuit de basis een scherm met app-instellingen kunt maken en hoe u de waarden kunt lezen die de gebruiker heeft geselecteerd in de app-instellingen. Voor een extra bonus leert u ook hoe u de sjablooneigenschap van Android Studio gebruikt om uw project snel op te starten met een instellingenscherm. 

Een voorbeeldproject (in Kotlin) voor deze tutorial is te vinden op onze GitHub repo, zodat je gemakkelijk kunt volgen.

voorwaarden

Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:

  • Een basiskennis van sommige Android-API's (zoals Gedeelde voorkeuren)
  • Android Studio 3.0 of hoger
  • Kotlin-plug-in 1.1.51 of hoger

1. Maak een Android Studio-project

Start Android Studio en maak een nieuw project (u kunt het een naam geven SettingsScreenDemo) met een lege activiteit genaamd SettingsActivity. Zorg ervoor dat u ook de Inclusief Kotlin-ondersteuning selectievakje. 

2. Creëren van een PreferenceFragment

Om API Level 11 (Honeycomb) en hoger te ondersteunen, kunnen we de PreferenceFragment. Deze klasse is gewoon een Fragment dat toont een hiërarchie van Voorkeur objecten als lijsten.

import android.os.Bundle import android.preference.PreferenceFragment importeren android.support.v7.app.AppCompatActivity class InstellingenActivity: AppCompatActivity () override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) if (fragmentManager.findFragmentById (android.R.id.content) == null) fragmentManager.beginTransaction () .add (android.R.id.content, SettingsFragment ()). commit () class SettingsFragment: PreferenceFragment () override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) addPreferencesFromResource (R.xml.preferences)

In de bovenstaande code hebben we een geneste klasse gemaakt SettingsFragment binnen SettingsActivity (omdat het SetttingsFragment klas is zo klein). Merk op dat onze klas SettingsFragment breidt het uit PreferenceFragment superklasse en heeft een methode addPrerenceFromResource binnen onCreate (). In deze methode hebben we de resource-id opgegeven R.xml.preference van de voorkeur XML om te starten - wanneer de Fragment is geladen. Ten slotte hosten we het fragment aan de activiteit door simpelweg de FragmentTransaction om het toe te voegen aan de UI-binnenkant onCreate () van SettingsActivity.

3. Onze voorkeuren maken

Maak een XML-bestand en noem het preferences.xml. Bewaar dit bestand in de res / xml map in uw app-project. Merk op dat je dit bestand een willekeurige naam kunt geven, maar het wordt ten zeerste aanbevolen om de gebruikelijke naam "voorkeuren" aan te houden. Bovendien zou u normaal gesproken slechts één bestand in een app-project moeten hebben.

       

Het root-knooppunt voor onze voorkeuren.xml bestand moet een zijn element. In dit root-element hebben we nu ons individu Voorkeur. Dit zijn de algemene kenmerken die aan a zijn gekoppeld Voorkeur:

  • android: key: dit attribuut wordt gebruikt om de waarde in de. te krijgen Gedeelde voorkeuren voorwerp.
  • android: title: stelt de titel in voor de Voorkeur. Dit is de vetgedrukte tekst.
  • android: samenvatting: stelt de samenvatting in voor de Voorkeur (dit is niet verplicht). Dit is de vage tekst onder de titel.
  • android: defaultValue: stelt de standaardwaarde in voor Voorkeur

We zullen ze allemaal doornemen Voorkeur we hebben hierboven kort gedefinieerd. Merk op dat u ook een kunt toevoegen of aanpassen Voorkeur via de voorkeurseditor van Android Studio - vergelijkbaar met de lay-outbron-editor waarmee u al vertrouwd bent. U kunt ervoor kiezen om uw XML-voorkeursbestand direct toe te voegen / te bewerken in de modus "Tekst" of de gebruikersinterface met slepen en neerzetten te gebruiken in de "Ontwerp" -modus.

Zoals je kunt zien, kun je in deze editor elk slepen en neerzetten Voorkeur in het paletgedeelte (aan de linkerkant). Eenmaal verwijderd, moet u deze selecteren en de kenmerken ervan wijzigen in het attributievenster (aan de rechterkant) van de editor. Houd er rekening mee dat we standaard enkele attributen krijgen om te wijzigen. Alle kenmerken van een geselecteerde bekijken of wijzigen Voorkeur, zorg ervoor dat je op de Bekijk alle attributen link onderaan het attributievenster. Dit lijkt erg op de lay-out-editor die u al kent. 

Laten we nu door elk van de gaan Voorkeur entiteiten die we hebben. 

Checkbox voorkeur

EEN CheckBoxPreference is gewoon een CheckBox widget die is opgenomen in het voorkeurenscherm. Deze Voorkeur retourneert de waarde "true" indien aangevinkt of "false" anders. Met andere woorden, het geeft een boolean terug, afhankelijk van de status van de widget.

Andere kenmerken die u aan een kunt toevoegen CheckBoxPreference zijn:

  • android: summaryOff: stelt de samenvatting in voor de Voorkeur in een voorkeuren scherm wanneer het niet is aangevinkt.
  • android: summaryOn: stelt de samenvatting in voor de Voorkeur in een voorkeuren scherm wanneer het is aangevinkt.
  • android: disableDependentsState: De status (true voor on of false voor off) die veroorzaakt dat afhankelijke personen worden uitgeschakeld. Kan een Booleaanse waarde zijn, zoals 'waar' of 'false'.

Schakel voorkeur

SwitchPreference voert dezelfde functionaliteit uit als de CheckBoxPreference. Het biedt een tweestatenoptie ("aan" of "uit"). Dit gebruikt een Schakelaar widget waarmee de gebruiker naar links ("uit") en naar rechts ("aan") kan schuiven. Deze Voorkeur bevat ook de kenmerken die zijn beschreven voor de CheckBoxPreference bovenstaande. Daarnaast heeft het de volgende kenmerken:

  • android: switchTextOff: stelt de tekst in die op de schakelaar zelf wordt gebruikt in de "uit" -status. 
  • android: switchTextOn: stelt de tekst in die gebruikt wordt op de schakelaar zelf wanneer deze in de "aan" staat is. 

EditText-voorkeur

Deze Voorkeur, wanneer erop wordt geklikt, wordt een dialoogvenster weergegeven waarin de gebruiker een invoertekst kan invoeren. Het gebruikt de Tekst bewerken widget - inclusief alle kenmerken van die widget waarmee u al bekend bent.

Merk op dat de waarde die is opgeslagen in de Gedeelde voorkeuren is een string.


Lijst voorkeur

Dit soort Voorkeur toont een lijst met items in een dialoogvenster wanneer erop wordt getikt. Hier kunt u een paar string-array-bronnen opgeven in uw voorkeurs-XML. Deze string-array-resource bevat eenvoudigweg een verzameling tekenreeksen. Deze bron bevindt zich op res / waarden / arrays.xml.

   15 minuten 30 minuten 1 uur 3 uur 6 uur Nooit   15 30 60 180 360 -1  

Hier is ons voorbeeld ListPreference gebruik van deze bron. 

We stellen de invoer- en invoerwaarden in met behulp van de android: entries en android: entryValues attributen respectievelijk.

  • android: entries: de door mensen leesbare array die als een lijst kan worden gepresenteerd.
  • android: entryValues: de array om de waarde te vinden die moet worden opgeslagen voor een voorkeur wanneer een item uit items is geselecteerd.

Als we bijvoorbeeld het aantal minuten in elke duur gebruiken als de invoerwaarden, wanneer de gebruiker een tijdsduur kiest (bijvoorbeeld 30 minuten), wordt het bijbehorende gehele getal opgeslagen in Gedeelde voorkeuren (bijvoorbeeld 30).

MultiSelect lijst voorkeur

Deze is vergelijkbaar met ListPreference maar in plaats van het hebben van keuzerondjes, hebben we selectievakjes. Met andere woorden, de gebruiker kan meerdere items in het dialoogvenster selecteren. Merk op dat het resultaat wordt opgeslagen in een "string set" in de Gedeelde voorkeuren. Dit kan worden opgehaald met getStringSet ().

Ringtone-voorkeur

Wanneer een RingtonePreference wordt aangetikt, wordt een dialoogvenster weergegeven met de lijst met beschikbare beltonen op het apparaat of de emulator.

  • android: showDefault: of het Standaard ringtone optie wordt getoond.
  • android: showSilent: of een Stil optie wordt getoond in de lijst. De gebruiker kan deze optie selecteren als ze geen enkele ringtone willen afspelen.  

Merk op dat de waarde die is opgeslagen in de Gedeelde voorkeuren voor deze voorkeur is een speciale reeks. Deze speciale string is een URI die naar a wijst ContentProvider.

4. Instellingengroepen maken

Het wordt een probleem wanneer u een lange lijst met voorkeuren of instellingen hebt, omdat gebruikers problemen kunnen hebben met scannen of begrijpen. Om dit probleem op te lossen, kunnen we onze voorkeuren groeperen. Bekijk de schermafbeelding van de Chrome-app die ik je in het begin heb laten zien - let erop dat deze de voorkeuren in twee categorieën heeft gegroepeerd: Basics en gevorderd. Dit maakt het voor de gebruiker gemakkelijker om de voorkeuren te begrijpen en om de lijst niet te overweldigend te maken.

Laten we nu kijken naar hoe eenvoudig het is om deze taak uit te voeren.

   ...   ...  

We omringen eenvoudigweg de voorkeuren die we in a willen groeperen label en geef elke groep een titel met behulp van de android: title attribuut.

5. Een intentie starten

Merk op dat het mogelijk is om een ​​activiteit te openen door gewoon op een voorkeursitem te klikken in het instellingenscherm. Dit kan handig zijn als u een webpagina wilt openen. Hier is de code om dat te doen:

  

Hier hebben we een toegevoegd element binnen de element. 

  • android: actie: stelt de actie voor de intentie in (dit is vergelijkbaar met bellen setAction () op een Intent-object). 
  • android: targetClass: stelt het klasgedeelte van de componentnaam in (hetzelfde als bellen setComponent () op een Intent-object).
  • android: targetPackage: Stelt het pakketgedeelte van de componentnaam in.
  • android: data: Stelt de gegevens in die moeten worden toegewezen (hetzelfde als bellen setData () op een Intent-object). 

Om een ​​webpagina te openen, kunt u bijvoorbeeld het volgende gebruiken:

  

6. De samenvatting van de voorkeur binden aan de geselecteerde waarde

Laten we nu kijken hoe het voorkeurenoverzicht kan worden bijgewerkt met de waarde die door de gebruiker is geselecteerd. 

class SettingsActivity: AppCompatActivity () // ... class SettingsFragment: PreferenceFragment () override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) addPreferencesFromResource (R.xml.preferences) bindPreferenceSummaryToValue (findPreference ("ringtone")) bindPreferenceSummaryToValue (findPreference ("text")) bindPreferenceSummaryToValue (findPreference ("list")) // ...

In deze klasse hebben we een helpermethode gemaakt met de naam bindPreferenceSummaryToValue (), wat zich in ons bijbehorende object bevindt, om de samenvattingstekst met de waarde bij te werken die de gebruiker heeft geselecteerd. We hebben het gepasseerd a Voorkeur object als een argument. De findPreference () zal terugkeren a Voorkeur de ... gebruiken Voorkeurde sleutel. 

class SettingsActivity: AppCompatActivity () // ... begeleidende object / ** * Een luisteraar met voorkeurswaarde die de samenvatting van de voorkeur * bijwerkt om de nieuwe waarde ervan weer te geven. * / private val sBindPreferenceSummaryToValueListener = Preference.OnPreferenceChangeListener voorkeur, waarde -> val stringValue = value.toString () if (voorkeur is ListPreference) // Zoek voor lijstvoorkeuren de juiste displaywaarde op // de voorkeuren van de voorkeuren lijst. vallijstPreference = voorkeur val index = listPreference.findIndexOfValue (stringValue) // Stel het overzicht in om de nieuwe waarde weer te geven. preference.setSummary (if (index> = 0) listPreference.entries [index] anders null) else if (voorkeur is RingtonePreference) // Zoek voor ringtone-voorkeuren de juiste displaywaarde // op met RingtoneManager. if (TextUtils.isEmpty (stringValue)) // Lege waarden komen overeen met 'silent' (geen beltoon). preference.setSummary ("Silent") else val ringtone = RingtoneManager.getRingtone (preference.getContext (), Uri.parse (stringValue)) if (ringtone == null) // Wis de samenvatting als er een opzoekfout was . preference.setSummary (null) else // Stel het overzicht in om de nieuwe ringtone-display / naam weer te geven. val name = ringtone.getTitle (preference.getContext ()) preference.setSummary (name) else // Stel voor alle andere voorkeuren de samenvatting in op de // simpele tekenreeksrepresentatie van de waarde. preference.summary = stringValue true private fun bindPreferenceSummaryToValue (voorkeur: Voorkeur) // Stel de luisteraar in om naar waardewijzigingen te kijken. preference.onPreferenceChangeListener = sBindPreferenceSummaryToValueListener // Activeer de listener onmiddellijk met de // huidige waarde van de voorkeur. sBindPreferenceSummaryToValueListener.onPreferenceChange (voorkeur, PreferenceManager .getDefaultSharedPreferences (preference.context) .getString (preference.key, ""))

We hebben een variabele sBindPreferenceSummaryToValueListener dat is een voorbeeld van Preference.OnPreferenceChangeListener. Dit is gewoon een luisteraar met voorkeurswijzigingen die ons helpt het voorkeurenoverzicht bij te werken naar de waarde die de gebruiker heeft geselecteerd. We controleren op speciale gevallen, zoals wanneer de geselecteerde voorkeur a is RingtonePreference of a ListPreference. Voor die voorkeurstypes doen we een speciale afhandeling om de samenvattingstekenreeks te krijgen. Als de voorkeur geen van beide is (zoals een EditTextPreference), stellen we de samenvatting in op de tekenreekswaarde van de voorkeur. 

Binnen in de bindPreferenceSummaryToValue (), we hebben de voorkeurswijzigingsluisteraar ingesteld door te bellen onPreferenceChangeListener (in Java is dat het setOnPreferenceChangeListener in plaats daarvan) op de Voorkeur voorwerp. 

Voer het project opnieuw uit om te zien hoe het allemaal werkt!

7. Voorkeurwaarden ophalen

Om te beginnen met het ophalen van voorkeurswaarden voor het instellingenscherm, bellen we getDefaultSharedPreference () die in de PreferenceManager class-passing het a Context object van de voorkeuren waarvan de waarden gewenst zijn. Merk op dat we de waarden uit de standaard halen Gedeelde voorkeuren voor onze toepassing. 

val prefs = PreferenceManager.getDefaultSharedPreferences (this) prefs.getBoolean ("checkbox", false) .toString () prefs.getString ("ringtone", "") prefs.getString (" text ","") prefs.getString (" lijst ","")

U roept de corresponderende gettermethode aan voor het type waarvan we de waarde van in willen halen Gedeelde voorkeuren. U geeft het de sleutel door als het eerste argument en de standaardwaarde is het tweede argument. 

8. Bonus: Android Studio-sjablonen gebruiken

Nu je hebt geleerd over de betrokken API's om vanuit Android een instellingenscherm helemaal zelf te maken, laat ik je een snelkoppeling zien die hem de volgende keer sneller maakt. U kunt ervoor kiezen om een ​​sjabloon te gebruiken in plaats van een instellingenscherm vanuit het niets te coderen. 

Android Studio biedt codesjablonen die de best practices voor het ontwerpen en ontwikkelen van Android volgen. Deze bestaande codesjablonen (beschikbaar in Java en Kotlin) kunnen u helpen bij het snel opstarten van uw project. Eén zo'n sjabloon kan worden gebruikt om een ​​instellingenscherm te maken. 

Als u deze handige functie voor een nieuw project wilt gebruiken, start u eerst Android Studio.

Voer de naam van de toepassing in en klik op de volgende knop. U kunt de standaardinstellingen laten zoals ze zijn in de Target Android-apparaten dialoog. 

Klik op de volgende knop opnieuw.

In de Toevoegen een activiteit naar mobiel dialoogvenster, scrol omlaag en selecteer Instellingen Activiteit. Klik op de volgende knop daarna. 

In het laatste dialoogvenster kunt u desgewenst de naam van de activiteit, de lay-outnaam of de titel hernoemen. Klik ten slotte op Af hebben om alle configuraties te accepteren. 

Android Studio heeft ons nu geholpen bij het maken van een project met een instellingenactiviteit. Echt cool! U wordt dringend geadviseerd om de gegenereerde code te verkennen. 

U kunt ook sjablonen gebruiken voor een reeds bestaand Android Studio-project. Ga gewoon naar Bestand> Nieuw> Activiteit> Instellingen Activiteit.  

Houd er rekening mee dat de sjablonen die bij Android Studio worden meegeleverd, goed zijn voor eenvoudige lay-outs en het maken van eenvoudige apps, maar als u uw app echt wilt starten, kunt u enkele app-sjablonen overwegen die verkrijgbaar zijn bij Envato Market.. 

Ze zijn een enorme tijdbesparing voor ervaren ontwikkelaars, waardoor ze de hele klus van het maken van een nieuwe app kunnen doorbreken en hun talenten kunnen richten op de unieke en aangepaste onderdelen van het maken van een nieuwe app

Conclusie

In deze zelfstudie hebt u geleerd hoe u vanuit het niets app-instellingen in Android kunt maken. We hebben ook onderzocht hoe je de Android Studio-sjablonen eenvoudig en snel kunt gebruiken om app-instellingen te maken. 

Ik raad ten zeerste aan de officiële richtlijnen voor materiaalontwerp voor instellingen te bekijken voor meer informatie over het correct ontwerpen en gebruiken van instellingen in Android. Bekijk ook de officiële API-handleiding voor meer informatie over andere API's voor het maken van een instellingenactiviteit. 

Voor meer informatie over codering voor Android, bekijk enkele van onze andere cursussen en tutorials hier op Envato Tuts+!