Slik kodes du en innstillingsskjerm i en Android-app

Hva du skal skape

Materielldesignteamet på Google gir en klar definisjon av hvilke innstillinger i Android-appen din bør gjøre:

Appinnstillinger lar brukerne angi preferanser for hvordan en app skal oppføre seg.

Google sier også at brukerne skal navigere til appinnstillingene, enten fra sidenavigasjons- eller verktøylinjemenyen - med et element merket innstillinger

Inkludert innstillinger i appen din gir brukerne muligheten til å kontrollere noen av funksjonaliteten til appen din. Dette gjør at brukerne er glade i stedet for sint - fordi de nå har kontroll over hvordan appen oppfører seg. 

Det anbefales på det sterkeste å gi tilgang til appinnstillinger. Dette gir en bedre brukeropplevelse for brukerne, noe som fører til en bedre gjennomgang i Google Play-butikken, som etter hvert gir opphav til et høyere antall appnedlastinger (som øker inntektene). 

Jeg antar at du må ha samhandlet med en apps innstillinger på enheten din, for eksempel ved å velge en standard ringetone, eller ved å kontrollere personvernet ditt på appen. Nesten alle de mest populære appene du har lastet ned eller laster ned på Google Play-butikken, inneholder en innstillingsskjerm for deg å kontrollere programmets oppførsel.. 

Et eksempel på en populær app som har en innstillingsskjerm, er Chrome Android-appen fra Google. På denne appens innstillingsskjerm kan brukerne velge standard søkemotor, endre underretningsadferd, kontrollere brukerens personvern, etc. Du kan se dette selv ved å laste ned Chrome-appen fra Google Play-butikken (hvis du ikke allerede har den på din enhet). Følgende skjermbilde er fra Chrome-appen, og viser appens innstillingsskjerm.

I dette innlegget lærer du hvordan du lager en appinnstillingsskjerm fra begynnelsen og også hvordan du leser verdiene brukeren har valgt fra appinnstillingene. For en ekstra bonus, lærer du også hvordan du bruker Android Studio-malerfunksjonen for å raskt starte opp prosjektet ditt med en innstillingsskjerm. 

Et prøveprosjekt (i Kotlin) for denne opplæringen finner du på vår GitHub repo, slik at du enkelt kan følge med.

Forutsetninger

For å kunne følge denne opplæringen må du:

  • En grunnleggende forståelse av noen Android-APIer (for eksempel SharedPreferences)
  • Android Studio 3.0 eller høyere
  • Kotlin plugin 1.1.51 eller høyere

1. Opprett et Android Studio-prosjekt

Brann opp Android Studio og opprett et nytt prosjekt (du kan nevne det SettingsScreenDemo) med en tom aktivitet som heter SettingsActivity. Pass på at du også sjekker Inkluder Kotlin-støtte merk av i boksen. 

2. Opprette en PreferenceFragment

For å støtte API Nivå 11 (Honeycomb) og over, kan vi bruke PreferenceFragment. Denne klassen er bare en Fragment som viser et hierarki av Preference objekter som lister.

importer android.os.Bundle import android.preference.PreferenceFragment importer android.support.v7.app.AppCompatActivity class SettingsActivity: AppCompatActivity () overstyr moro onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) hvis (fragmentManager.findFragmentById (android.R.id.content) == null) fragmentManager.beginTransaction () .add (android.R.id.content, SettingsFragment ()). commit () klasse SettingsFragment: PreferenceFragment () overstyre moro påKreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) addPreferencesFromResource (R.xml.preferences)

I koden ovenfor opprettet vi en nestet klasse SettingsFragment innsiden SettingsActivity (fordi det SetttingsFragment klassen er så liten). Legg merke til at vår klasse SettingsFragment strekker seg PreferenceFragment superklasse og har en metode addPrerenceFromResource innsiden onCreate (). I denne metoden ga vi den en ressurs-ID R.xml.preference av preferanse XML for å starte - når Fragment er lastet. Endelig er vi vert for Fragmentet til aktiviteten ved ganske enkelt å bruke FragmentTransaction å legge det til brukergrensesnittet onCreate () av SettingsActivity.

3. Opprette våre preferanser

Opprett en XML-fil og gi den navnet preferences.xml. Lagre denne filen inne i res / xml katalog i app-prosjektet ditt. Vær oppmerksom på at du kan gi denne filen noe navn, men det anbefales å holde fast ved det konvensjonelle navnet "preferanser". Også, du bør vanligvis bare ha en slik fil i et app-prosjekt.

       

Rotenoden for vår preferanser.xml filen skal være en element. Inne i dette rotelementet har vi nå vår person Preference. Her er de vanlige attributter som er knyttet til a Preference:

  • android: nøkkelen: dette attributtet brukes til å få verdien i SharedPreferences gjenstand.
  • android: tittel: setter tittelen for Preference. Dette er den dristige teksten.
  • android: sammendrag: Setter oppsummeringen for Preference (dette er ikke nødvendig). Dette er den falmede teksten under tittelen.
  • android: Default: Angir standardverdien for Preference

Vi går gjennom hver Preference vi har definert over kort tid. Legg merke til at du også kan legge til eller tilpasse en Preference via Android Studio preferanse editor-ligner på layout ressurs editor du allerede er kjent med. Du kan enten velge å legge til / redigere din preferanse XML-fil direkte i "Tekst" -modus eller bruk dra og slipp-brukergrensesnittet i "Design" -modus.

Som du kan se, kan du i denne editoren dra og slippe noen Preference i palettdelen (på venstre side). Når du har tapt, bør du velge den og endre attributter i attributteruten (på høyre side) av redigereren. Vær oppmerksom på at vi som standard har gitt noen egenskaper til å endre. For å vise eller endre alle attributter tilknyttet en valgt Preference, sørg for at du klikker på Se alle attributter lenke nederst i attributteruten. Dette ligner veldig på layoutredigeren du allerede kjenner. 

Nå, la oss gå gjennom hver av Preference enheter vi har. 

Sjekkeboksinnstilling

EN CheckBoxPreference er bare en avmerkingsbokser widget som er inkludert i innstillingsskjermbildet. Dette Preference returnerer verdien "true" hvis den er merket eller "false" ellers. Med andre ord returnerer den en boolsk avhengig av tilstanden til widgeten.

Andre attributter du kan legge til i en CheckBoxPreference er:

  • android: summaryOff: Setter oppsummeringen for Preference i en preferanse skjerm når den er ukontrollert.
  • android: summaryOn: Setter oppsummeringen for Preference i en preferanse skjerm når det er sjekket.
  • android: disableDependentsState: Staten (sant for på eller falsk for av) som gjør at avhengige blir deaktivert. Kan være en boolsk verdi, for eksempel "ekte" eller "falsk".

Byttepreferanse

SwitchPreference utfører lignende funksjonalitet til CheckBoxPreference. Den gir et to-state ("på" eller "av") alternativ som kan byttes. Dette bruker a Bytte om widget som lar brukeren skyve til venstre ("av") og til høyre ("på"). Dette Preference Inkluderer også attributter beskrevet for CheckBoxPreference ovenfor. I tillegg har den følgende egenskaper:

  • android: switchTextOff: setter teksten som brukes på bryteren selv når den er i "av" -tilstand. 
  • android: switchTextOn: Setter teksten som brukes på bryteren selv når den er i "på" -tilstand. 

EditText Preference

Dette Preference, Når du klikker, viser en dialogboks for brukeren å skrive inn en inntastingstekst. Den bruker EditText widget-inkludert alle attributter av den widgeten du allerede er kjent med.

Legg merke til at verdien som er lagret i SharedPreferences er en streng.


Listepreferanse

Denne typen Preference vil vise en liste over oppføringer i en dialog når du trykker på. Her kan du angi et par streng-array-ressurser i din preferanse XML. Denne streng-array-ressursen inneholder bare en samling av strenger. Denne ressursen er plassert på res / verdier / arrays.xml.

   15 minutter 30 minutter 1 time 3 timer 6 timer Aldri   15 30 60 180 360 -1  

Her er vårt utvalg ListPreference bruker denne ressursen. 

Vi angir oppføringene og inngangsverdiene ved hjelp av android: oppføringer og android: entryValues attributter henholdsvis.

  • android: oppføringer: den menneskelige lesbare gruppen som skal vises som en liste.
  • android: entryValues: arrayet for å finne verdien som skal lagres for en preferanse når en oppføring fra oppføringer er valgt.

Hvis vi for eksempel bruker antall minutter i hver varighet som inngangsverdier, når brukeren velger en tidsperiode (for eksempel 30 minutter), vil den tilsvarende heltallverdien bli lagret i SharedPreferences (for eksempel 30).

MultiSelect List Preference

Dette ligner på ListPreference men i stedet for å ha radioknapper, har vi boksene. Med andre ord kan brukeren velge flere elementer i dialogboksen. Merk at resultatet er lagret i et "strengsett" i SharedPreferences. Dette kan hentes ved hjelp av getStringSet ().

Ringetone Preference

Når en RingtonePreference er tappet, vises en dialog med listen over tilgjengelige ringetoner på enheten eller emulatoren.

  • android: showDefault: hvorvidt Standard ringetone alternativet vil bli vist.
  • android: showSilent: om a Stille alternativet vil bli vist i listen. Brukeren kan velge dette alternativet hvis de ikke vil spille noen ringetone.  

Legg merke til at verdien som er lagret i SharedPreferences for denne preferansen er en spesiell streng. Denne spesielle strengen er en URI som peker på a ContentProvider.

4. Opprette innstillingsgrupper

Det blir et problem når du har en lang liste over innstillinger eller innstillinger, fordi brukere kan ha problemer med å skanne eller forstå dem. For å løse dette problemet kan vi gruppere våre preferanser. Ta en titt på skjermbilde av Chrome-appen jeg viste deg i begynnelsen igjen - legg merke til at den grupperte innstillingene i to kategorier: Grunnleggende og Avansert. Dette gjør det lettere for brukeren å forstå preferansene og å ikke gjøre listen virker for overveldende.

La oss nå se på hvor enkelt det er å utføre denne oppgaven.

   ...   ...  

Vi omgir bare de preferansene vi ønsker å gruppere i en tag og gi hver gruppe en tittel ved hjelp av android: tittel Egenskap.

5. Starte en hensikt

Merk at det er mulig å åpne en aktivitet ved å bare klikke på et preferanseelement fra innstillingsskjermbildet. Dette kan komme til nytte når du vil åpne en nettside. Her er koden for å gjøre det:

  

Her la vi til en element inne i element. 

  • android: action: setter handlingen for intensjonen (dette ligner på å ringe setAction () på en hensikt). 
  • android: targetClass: Setter klassedelen av komponentnavnet (samme som å ringe setComponent () på en hensikt).
  • android: targetPackage: Setter pakkenes del av komponentnavnet.
  • android: data: Setter dataene til å tildele (samme som å ringe setData () på en hensikt). 

For å åpne en nettside kan du for eksempel bruke følgende:

  

6. Bind inn Preference Summary til verdien valgt

La oss nå se hvordan du oppdaterer preferansesammendraget med verdien som er valgt av brukeren. 

klassen SettingsActivity: AppCompatActivity () // ... klasse InnstillingerFragment: PreferenceFragment () overstyr moro onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) addPreferencesFromResource (R.xml.preferences) bindPreferenceSummaryToValue (findPreference ("ringtone")) bindPreferenceSummaryToValue (findPreference ("text")) bindPreferenceSummaryToValue (findPreference ("list")) // ...

I denne klassen opprettet vi en hjelpemetode som heter bindPreferenceSummaryToValue (), som er inne i kompanjonsobjektet, for å oppdatere preferansesammendragsteksten med verdien verdien brukeren har valgt. Vi passerte det a Preference objekt som et argument. De findPreference () vil returnere a Preference bruker Preferences nøkkel. 

klasse SettingsActivity: AppCompatActivity () // ... følgesvennobjekt / ** * En foretrukket verdiendringslytter som oppdaterer preferansens sammendrag * for å gjenspeile den nye verdien. * / private val sBindPreferenceSummaryToValueListener = Preference.OnPreferenceChangeListener preference, value -> val stringValue = value.toString () hvis (preferanse er ListPreference) // For listpreferanser, se opp riktig visningsverdi i // preferansens 'oppføringer' liste. val listPreference = preference val index = listPreference.findIndexOfValue (stringValue) // Sett sammendraget for å gjenspeile den nye verdien. preference.setSummary (hvis (index> = 0) listPreference.entries [index] else null) annet hvis (preferanse er RingtonePreference) // For ringetone-preferanser, slå opp riktig visningsverdi // ved hjelp av RingtoneManager. if (TextUtils.isEmpty (stringValue)) // Tomme verdier tilsvarer «stille» (ingen ringetone). preference.setSummary ("Silent") ellers val ringtone = RingtoneManager.getRingtone (preference.getContext (), Uri.parse (stringValue)) hvis (ringetone == null) // Fjern sammendraget hvis det oppstod en oppslagsfeil . preference.setSummary (null) else // Sett opp sammendraget for å gjenspeile den nye ringetonevisningen // navn. val navn = ringtone.getTitle (preference.getContext ()) preference.setSummary (navn) else // For alle andre preferanser, sett inn sammendraget til verdien // enkel streng representasjon. preference.summary = stringValue true privat morsomt bindPreferenceSummaryToValue (preferanse: Preferanse) // Still inn lytteren for å se etter verdiendringer. preference.onPreferenceChangeListener = sBindPreferenceSummaryToValueListener // Trigger lytteren umiddelbart med preferansens // nåværende verdi. sBindPreferenceSummaryToValueListener.onPreferenceChange (preferanse, PreferencesManager .getDefaultSharedPreferences (preference.context) .getString (preference.key, ""))

Vi har en variabel sBindPreferenceSummaryToValueListener det er en forekomst av Preference.OnPreferenceChangeListener. Dette er rett og slett en preferanse endringslytter som vil hjelpe oss med å oppdatere preferansesammendraget til verdien brukeren har valgt. Vi ser etter spesielle tilfeller, som når den valgte preferansen er en RingtonePreference eller a ListPreference. For de foretrukne typene gjør vi noen spesiell håndtering for å få sammendragstrengen. Hvis preferansen er verken (som en EditTextPreference), satt vi bare oppsummeringen til preferansens strengverdi. 

Inne i bindPreferenceSummaryToValue (), Vi stiller inn preferanse endringslytteren ved å ringe onPreferenceChangeListener (i Java er det setOnPreferenceChangeListener i stedet) på Preference gjenstand. 

Kjør prosjektet igjen for å se hvordan alt fungerer!

7. Henting av preferanseverdier

For å begynne å få preferanseverdier for innstillingsskjermen, ringer vi getDefaultSharedPreference () som er inne i PreferenceManager klasse-passerer det a Kontekst objekt av preferanser hvis verdier er ønsket. Vær oppmerksom på at vi får verdiene fra standardinnstillingen SharedPreferences for vår søknad. 

val prefs = PreferenceManager.getDefaultSharedPreferences (dette) prefs.getBoolean ("avkrysningsboksen", falsk) .toString () prefs.getString ("ringetone", "") prefs.getString (" text ","") prefs.getString (" list ","")

Du kaller den tilsvarende getter-metoden for typen vi vil hente verdien inn fra SharedPreferences. Du sender det nøkkelen som det første argumentet, og standardverdien er det andre argumentet. 

8. Bonus: Bruke Android Studio Maler

Nå som du har lært om de involverte APIene for å lage en innstillingsskjerm fra grunnen av Android, viser jeg deg en snarvei som gjør det raskere neste gang. Du kan velge å bruke en mal i stedet for å kode en innstillingsskjerm fra bunnen av. 

Android Studio tilbyr kodemaler som følger Android-utviklingen og utviklingen av beste praksis. Disse eksisterende kodemaler (tilgjengelig i Java og Kotlin) kan hjelpe deg med å raskt starte prosjektet ditt. En slik mal kan brukes til å opprette en innstillingsskjerm. 

For å bruke denne praktiske funksjonen til et nytt prosjekt, brann du først opp Android Studio.

Skriv inn programnavnet og klikk på neste knapp. Du kan legge til standardinnstillingene som de er i Mål Android-enheter dialog. 

Klikk på neste knappen igjen.

Legg til en aktivitet til mobilen dialogboksen, bla ned og velg Innstillinger Aktivitet. Klikk på neste knappen etter det. 

I den siste dialogboksen kan du omdøpe aktivitetsnavnet, oppsettnavnet eller tittelen hvis du vil. Til slutt klikker du på Bli ferdig knappen for å godta alle konfigurasjoner. 

Android Studio har nå hjulpet oss med å opprette et prosjekt med en innstillingsaktivitet. Virkelig kult! Du anbefales på det sterkeste å utforske koden som er generert. 

Du kan også bruke maler for et allerede eksisterende Android Studio-prosjekt. Bare gå til Fil> Ny> Aktivitet> Innstillinger Aktivitet.  

Vær oppmerksom på at malene som følger med Android Studio, er gode for enkle oppsett og grunnleggende programmer, men hvis du virkelig vil starte appen din, kan du vurdere noen av appmalmene som er tilgjengelige fra Envato Market. 

De er en stor tidsbesparelse for erfarne utviklere, og hjelper dem å kutte gjennom slagordet om å lage en app fra bunnen av og fokusere sine talenter i stedet på de unike og tilpassede delene av å lage en ny app

Konklusjon

I denne opplæringen lærte du hvordan du oppretter appinnstillinger i Android fra grunnen av. Vi har også undersøkt hvordan du enkelt og raskt kan bruke Android Studio-maler for å lage appinnstillinger. 

Jeg anbefaler på det sterkeste å sjekke ut de offisielle retningslinjene for materialeutforming for innstillinger for å lære mer om hvordan du skal utforme og bruke innstillingene på Android riktig. Se også den offisielle API-guiden for å lære mer om andre APIer for å opprette en innstillingsaktivitet. 

For å lære mer om koding for Android, sjekk ut noen av våre andre kurs og opplæringsprogrammer her på Envato Tuts+!