Material Slider

Google frigav Material Components 1.3.0-alpha02 den 16. juli 2020. En komponent, der har fået en masse kærlighed i denne udgivelse, er den ydmyge slider. Der er nogle gode tilføjelser oven på den grundlæggende funktionalitet, og i dette indlæg vil vi udforske dem lidt.

En Slider er en nyttig kontrol, der gør det muligt for brugeren at angive værdier uden at skulle bruge tastaturet. Den grundlæggende brugssituation for den er meget lig Android Framework SeekBar eller AppCompatSeekBar-widgets. For disse er der forskellige anvendelsesmuligheder: f.eks. scrubbing til et bestemt sted under lyd- eller videoafspilning eller angivelse af en værdi inden for et givet interval. Der er dog nogle yderligere anvendelsesmuligheder, som Slider giver os, som vi vil se senere i denne artikel

Vi begynder med at oprette en meget simpel skyderkontrol og ser, hvordan den ser ud og opfører sig.

Basisadfærd

Det er meget ligetil at oprette en materialeskieberegulering:

Vi angiver et interval på 0-100 på begge kontrolelementer ved hjælp af attributterne valueFrom og valueTo. Dette giver os følgende adfærd (AppCompatSeekBar er øverst, og Slider er nederst):

Mens disse ser meget ens ud, er der nogle vigtige forskelle. For det første er Slider stylet ved hjælp af de farver, der er defineret i mit tema, mens AppCompatSeekBar bruger standardfarver fra AppCompat-biblioteket. For det andet er Slider lidt større, hvilket gør den lidt tydeligere for brugeren. Den vigtigste forskel er nok tilføjelsen af en etiket til Slider, når brugeren trækker i positionen. Dette gør det lettere for brugeren at forstå, hvilken præcis værdi han/hun vælger. Selv om vi bestemt kan tilføje en separat visning til vores layout for at vise denne værdi, gør tooltip-etiketten UI’en mindre rodet. Vi kan deaktivere det, hvis det ikke er nødvendigt. Tilføjelse af app:labelBehaviour="gone" vil opnå dette.

Der er imidlertid to andre etiketadfærdsmåder. Den første er den standard, som vi kan se i det foregående eksempel – det er app:labelBehaviour="floating", som lader etiketten svæve over visningen. Den anden mulighed er app:labelBehaviour="withinBounds". Dette renderer det samme som floating, men forskellen er, hvordan det påvirker størrelsen af Slider. Med floating omfatter den målte højde af kontrolelementet ikke etiketten, mens withinBounds omfatter etiketten i den målte højde. Dette kan være vigtigt afhængigt af, om vi ønsker at sikre, at etiketten ikke skjuler andre kontroller i vores layout.

Diskret skyder

Den variant af Slider, som vi hidtil har set på, er kendt som en kontinuerlig skyder. Det betyder, at den værdi, den returnerer, kan være en hvilken som helst værdi inden for området. Der er dog tilfælde, hvor vi måske ønsker at begrænse dette. For eksempel returneres brøkværdier af denne kontinuerlige Slider, men vi kan kræve, at værdien skal begrænses til hele tal eller endnu større trin. For at opnå dette kan vi bruge en diskret skyder – som returnerer et diskret sæt af værdier. Vi kan ændre en kontinuerlig Slider til en diskret Slider ved at tilføje en enkelt egenskab:

Tilføjelse af app:stepSize="10" gør, at Slider kun returnerer værdier, der er multipla af 10. Dette ændrer UX en smule:

For det første er der krydsmarkeringer, som angiver de diskrete værdier, der returneres. Disse er ret subtile, men kan ses tydeligt på banen. Den anden forskel er, at markeringen ikke længere er jævn, men hopper mellem de diskrete værdier, som vi kan se på labelværdien. Brugeren har en klar indikation af, at valget er fra et diskret sæt af værdier.

RangeSlider

Vi kan også bruge en anden variant af Slider. Hidtil har vi set, hvordan man vælger en enkelt værdi ved hjælp af en Slider, men brugeren kan vælge et interval ved hjælp af en RangeSlider.

Da vi først konfigurerede Slider, brugte vi valueFrom og valueTo til at angive det interval af værdier, som skyderen returnerer. en RangeSlider giver brugeren mulighed for at angive et interval. Eksempel: Hvis vi f.eks. leverede en søgefunktion i en shopping-app, ville vi måske ønske, at brugeren kunne angive et prisinterval. Det kan vi opnå ved hjælp af a RangeSlider, som understøtter både kontinuerlige og diskrete tilstande:

Der er en obligatorisk attribut her: app:values – uden denne falder RangeSlider tilbage til standard Slider-adfærd. Vi skal angive et array af værdier i denne attribut:

Disse arrays har henholdsvis to og tre værdier, og den kontinuerlige RangeSlider får området med to værdier, mens den diskrete RangeSlider får området med tre værdier. Dette giver os nogle interessante nye adfærdsmønstre:

Det øverste eksempel viser et simpelt interval med to værdier, som giver brugeren mulighed for at angive et interval med øvre og nedre grænser. Det overordnede område, som vi indstiller for RangeSlider, begrænser de maksimum- og minimumsværdier, som brugeren kan angive.

Det nederste eksempel er endnu mere interessant. Ud over at være et diskret RangeSlider skaber de tre værdier i arrayet tre tommelfingerpunkter i kontrolelementet. Ud over blot en øvre og en nedre grænse for intervallet kan brugeren også angive et punkt et sted inden for den øvre og den nedre grænse. Brugeren kan ikke trække det midterste tommelfingerpunkt uden for de grænser, der er fastsat af det øvre og det nedre punkt. Etiketten for det tommelfingerpunkt, der trækkes, tegnes altid oven på de andre etiketter, som den eventuelt overlapper. Dette er vigtigt, så brugeren ved, hvilken værdi han/hun er ved at vælge i øjeblikket.

Vi kan hente de valgte værdier ved at kalde getValues()-metoden i RangeSlider. Dette returnerer et array af værdier, hvis størrelse er den samme som størrelsen af det array, vi har angivet i app:values.

Labelformatering

Den mere opmærksomme har måske bemærket, at der er en forskel i labelformateringen af den dobbelt- og trippelvurderede RangeSliders. Den kontinuerlige dobbeltværdi RangeSlider anvender standard-etiketformatet, mens den diskrete tredobbeltværdi har præfikset Value:. Dette bringer os pænt videre til, at vi kan tilpasse etiketten:

LabelFormatter er en SAM-grænseflade med en enkelt getFormattedValue() metode, som i dette tilfælde er blevet konverteret til en lambda. Jeg har brugt en formatstrengressource til dette:

Vi skal gøre dette programmæssigt. Jeg er ret sikker på, at en formatstreng som denne ville passe til de fleste anvendelsestilfælde, så det ville være rart, hvis vi kunne angive en sådan ved hjælp af en XML-attribut. Det er dog ret trivielt at anvende en programmatisk.

Conclusion

Slider og RangeSlider er rigtig fine iterationer på SeekBar. De giver den samme funktionalitet plus meget mere. Jeg er især imponeret over opmærksomheden på detaljerne – som f.eks. at tegne den aktive etiket oven på de passive etiketter. Dette er en veludformet og implementeret kontrol, og jeg har fuldt ud til hensigt at bruge den!