I fjor innførte Google Material Design, og det ble klart at bevegelse og animasjon ville være to av de mest iøynefallende funksjonene i moderne Android-applikasjoner. Men Google ga ikke utviklere en enkel løsning for å integrere dem i applikasjoner. Som et resultat ble mange biblioteker utviklet for å løse integrasjonsproblemet.
I løpet av dette årets Google I / O innførte Google imidlertid Android Design Support Library for å gjøre vedtaket av Material Design enklere. Dette lar utviklere fokusere på funksjonene som gjør programmene deres unike.
1. Regioner
I denne veiledningen viser jeg deg hvordan du implementerer rullingsteknikkene som vises i Googles materialdesignspesifikasjon. Før vi begynner, bør du gjøre deg kjent med de tilgjengelige rullbare områdene i en Android-applikasjon. I det følgende bildet kan du se at det er fire regioner.
Statuslinjen
Dette er hvor varsler vises, og statusen til forskjellige funksjoner på enheten vises.
verktøylinje
Verktøylinjen ble tidligere kjent som handlingslinjen. Det er nå en mer tilpassbar visning med de samme funksjonalitetene.
Tab / Search Bar
Denne valgfrie regionen brukes til å vise kategoriene som kategoriserer innholdet i søknaden din. Du kan lese mer om bruken av faner og de forskjellige måtene å vise dem i Googles materialdesignspesifikasjon. Når det passer, kan du også bruke det i Googles sidebeskrivelse.
Fleksibelt rom
Her kan du vise bilder eller utvidede appbarer.
Med hensyn til rulleteknikker er det verktøylinjen og fanen / søkefeltet som svarer når innholdet i søknaden din ruller.
2. Prosjektoppsett
For å følge med, bør du bruke den nyeste versjonen av Android Studio. Du kan hente den fra Android Developer-nettstedet. For å prøve disse rulleteknikkene, anbefaler jeg at du oppretter et nytt prosjekt (med et minimum API-nivå på 15), fordi programmets layout vil endre seg vesentlig.
Jeg har gitt et startprosjekt, som du kan laste ned fra GitHub. Du kan bruke startprosjektet som utgangspunkt og bruke rulleteknikkene i dine egne applikasjoner. La oss først legge til følgende avhengigheter til prosjektets build.gradle fil i app-mappen:
Med den første avhengigheten får du Android Design Support Library, som inkluderer de nye klassene vi trenger for denne opplæringen.
Med den andre avhengigheten får du den nyeste versjonen av RecyclerView. Versjonen som er oppført i den offisielle artikkelen om å opprette lister, vil ikke være nyttig denne gangen.
Deretter skal du trenge noen dummy data for å prøve disse teknikkene og fylle ut RecyclerView. Du kan implementere dem selv eller kopiere implementeringen fra InitialActivity klasse i startprosjektet.
3. Rullingsteknikk 1
Denne teknikken skjuler verktøylinjeområdet når søknadens innhold blir rullet. Du kan se teknikken i aksjon i følgende video.
For denne layoutdesignen kan du tenke på noe slikt:
Problemet med dette oppsettet er at du må styre hendelsene selv, men det vil være smertefritt hvis du utnytter de nye klassene. La oss endre det som følger:
I dette nye oppsettet kan du se at:
de RelativeLayout Er erstattet med a CoordinatorLayout
de verktøylinje er pakket inn i a AppBarLayout
de verktøylinje og RecyclerView fikk noen ekstra attributter
Hva er disse nye klassene?
CoordinatorLayout
Denne utformingen er en ny container og en supercharged FrameLayout som gir et ekstra nivå av kontroll over berøringshendelser mellom barnevisninger.
AppBarLayout
Denne utformingen er en annen ny container, designet spesielt for å implementere mange av funksjonene i Material Design app bar-konseptet. Husk at hvis du bruker den i en annen ViewGroup, det meste av funksjonaliteten virker ikke.
Nøkkelen til denne rulleteknikken, og de fleste andre rulleteknikker som vi skal diskutere, er CoordinatorLayout klasse. Denne spesielle klassen kan motta hendelser fra og levere hendelser til barnets syn, slik at de kan svare på riktig måte. Den er designet for å bli brukt som rotbeholdervisning.
For å aktivere denne teknikken, vil app: layout_behavior Attributt indikerer hvilken visning som vil utløse hendelsene i verktøylinje. I dette tilfellet er det den RecyclerView.
De App: layout_scrollFlags attributten til verktøylinje Indikerer for visningen hvordan du svarer.
app: layout_scrollFlags = “rulle | enterAlways"
De App: layout_scrollFlags Attributt kan ha fire mulige verdier, som kan kombineres for å skape ønsket effekt:
bla
Dette flagget bør settes for alle visninger som må rulle av skjermen. Visninger som ikke bruker dette flagget, er fortsatt festet til toppen av skjermen.
enterAlways
Dette flagget sikrer at alle nedoverruller vil føre til at denne visningen blir synlig, slik at rask retur mønster.
enterAlwaysCollapsed
Når en visning har erklært en minHeight og du bruker dette flagget, vil visningen bare gå inn i minimumshøyde (kollapset), bare utvide til full høyde når rullingsvisningen har nådd toppen.
exitUntilCollapsed
Dette flagget får visningen til å rulle på skjermen til den er sammenkuttet (dens minHeight er nådd) før du avslutter.
Du kan nå kjøre prosjektet, eller trykke på Kontroll + R, og se denne teknikken i aksjon.
4. Rullingsteknikk 2
Denne teknikken ruller verktøylinjen på skjermen mens tabellregionen forblir forankret til toppen. Du kan se denne teknikken i bruk i følgende video.
For denne teknikken skal jeg gjenopprette layoutet fra den forrige teknikken og legge til en TabLayout se ved siden av verktøylinje, inne i AppBarLayout.
De TabLayout Visningen gir et horisontalt oppsett for å vise faner. Du kan legge til et hvilket som helst antall faner ved hjelp av ny fane metode og angi sin oppførsel modus ved hjelp av setTabMode. La oss begynne med å fylle ut fanene.
Ved å endre verdien av App: layout_scrollFlags attributt, og legge til og fjern det fra verktøylinje og TabLayout, du kan få animasjoner som de som brukes i:
Google Play Butikk hvor verktøylinjen gjemmer seg og fanebladet forblir synlig.
Foursquare hvor fanebladet ruller på skjermen mens verktøylinjen holder seg øverst.
Spille musikk hvor både verktøylinjen og fanebladet ruller utenfor skjermen.
Ta en titt på følgende videoer for eksempler på denne rulleteknikken.
Du kan kjøre prosjektet ditt og se denne rulle teknikken i aksjon.
5. Scrolling Technique 3
For denne rulleteknikken skal jeg benytte seg av den fleksible romregionen jeg nevnte i begynnelsen av denne opplæringen. Jeg gjør dette for å krympe den innledende høyden på AppBarLayout som innholdet ruller opp. Høyden på AppBarLayout øker til sin opprinnelige høyde når innholdet rulles ned. Du kan se denne teknikken i bruk i følgende video.
For denne rulleteknikken skal jeg bruke følgende layout:
Det ser sikkert ut som mye kode, så la oss slå det ned. I dette oppsettet har jeg gjort følgende endringer:
De verktøylinje er pakket inn i a CollapsingToolBarLayout og begge elementene blir satt inn i AppBarLayout.
De App: layout_scrollFlags attributtet er flyttet fra verktøylinje til CollapsingToolBarLayout, fordi denne beholderen har ansvaret for å reagere på rullehendelser.
Et nytt attributt, app: layout_collapseMode, ble lagt til verktøylinje. Denne attributtet sikrer at verktøylinje forbli festet til toppen av skjermen.
De AppBarLayout har en fast starthøyde på 192dp.
EN FloatingActionButton ble lagt til layoutet, under RecyclerView.
Hva er disse nye klassene for?
CollapsingToolBarLayout
Dette er en ny visning, designet spesielt for å pakke inn verktøylinje og implementer en kollapsende applinje. Når du bruker CollapsingToolBarLayout klasse, må du være spesielt oppmerksom på følgende egenskaper:
app: contentScrim
Denne attributtet spesifiserer fargen som skal vises når den er helt sammenbrudd.
Disse attributter angir margene i den utvidede tittelen. De er nyttige hvis du planlegger å bruke setDisplayHomeAsUpEnabled metode i aktiviteten din og fyll de nye mellomrom som er opprettet rundt tittelen.
FloatingActionButton
Den flytende handlingsknappen er en viktig komponent i Material Design apps. Du kan nå inkludere flytende handlingsknapper i layoutet ditt med bare noen få linjer med kode. Du kan bruke app: fabSize attributt til å velge mellom to forskjellige størrelser, standard (56 dp) og mini (40dp). Standard er standardstørrelsen.
Den forsvinner effekten oppnås automatisk ved å forankre den flytende handlingsknappen til AppBarLayout bruker app: layout_anchor Egenskap. Du kan også spesifisere posisjonen i forhold til dette ankeret ved å bruke app: layout_anchorGravity Egenskap.
Før du kjører prosjektet, må vi spesifisere i aktiviteten som CollapsingToolBarLayout kommer til å vise tittelen i stedet for verktøylinje. Ta en titt på følgende kodestykke for avklaring.
Kjør prosjektet for å se den tredje rulleteknikken i bruk.
6. Rullingsteknikk 4
Denne rulleteknikken bruker den utvidede AppBarLayout, vist i forrige teknikk, for å vise et bilde. Du kan se denne teknikken i følgende video.
For denne teknikken skal jeg gjenopprette tidligere oppsett og endre det litt:
I dette oppsettet har jeg gjort følgende endringer:
De android: bakgrunn attributtet ble fjernet fra AppBarLayout. Fordi det Imageview skal fylle dette rommet, det er ikke nødvendig å ha en bakgrunnsfarge.
De app: expandedTitleMarginStart og app: expandedTitleMarginEnd Attributene ble fjernet, fordi vi ikke bruker setDisplayHomeAsUpEnabled metode i aktiviteten.
en Imageview ble lagt til før de verktøylinje. Dette er viktig for å unngå at AppBarLayout viser en del av bildet i stedet for den primære fargen når den kollapses.
Du har kanskje også lagt merke til at Imageview har app: layout_collapseMode Egenskap. Verdien av attributtet er satt til parallax å implementere parallaxrulling. I tillegg kan du også legge til app: layout_collapseParallaxMultiplier Tilordne å angi en multiplikator.
Dette er alle endringene du må gjøre for å få denne rulleteknikken til å fungere jevnt i appen din. Kjør prosjektet for å se denne rulleteknikken i aksjon.
7. Rullingsteknikk 5
For denne rulleteknikken overlappes det fleksible rommet av innholdet i appen, og rulles på skjermen når innholdet rulles. Du kan se denne teknikken i bruk i følgende video.
For denne teknikken kan du gjenbruke oppsettet fra den forrige teknikken, med noen få små modifikasjoner.
For dette oppsettet:
De Imageview og FloatingActionButton inne i CollapsingToolbarLayout ble fjernet. Denne teknikken krever ikke et bilde.
I CollapsingToolbarLayout, de app: contentScrim attributtet ble erstattet med android: bakgrunn Egenskap. Vi gjør dette, fordi bakgrunnsfargen trenger å matche verktøylinje bakgrunnsfarge pent når du forsvinner.
De android: bakgrunn attributtet ble lagt til i verktøylinje.
De app: behavior_overlapTop attributtet ble lagt til i RecyclerView. Dette er det viktigste attributet for denne rulleteknikken, da dette attributtet angir hvor mye overlapping visningen skal ha med AppBarLayout. For at dette attributtet skal ha effekt, bør det legges til samme visning som har app: layout_behavior Egenskap.
Hvis du prøver å bruke denne rulleteknikken med disse endringene, vil det resulterende oppsettet ikke ha en tittel i verktøylinje. For å løse dette, kan du opprette en TextView og legg det til verktøylinje programma.
TextView text = ny TextView (dette); text.setText (R.string.title_activity_technique5); text.setTextAppearance (dette, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (tekst);
Konklusjon
Vær oppmerksom på at du ikke trenger å implementere alle disse teknikkene i appen din. Noen vil være mer nyttige for ditt design enn andre. Nå som du vet hvordan du implementerer hver enkelt, kan du velge og eksperimentere med dem.
Jeg håper du fant denne opplæringen nyttig. Ikke glem å dele det hvis du likte det. Du kan legge igjen noen kommentarer og spørsmål nedenfor.
Share
Accentsconagua
