Scrolling Teknikker for Material Design
99
Del
30
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Innledning
I fjor introduserte Google Material Design og det ble klart at bevegelse og animasjon vil være to av de mest iøynefallende trekk i moderne Android-programmer. Men Google ikke gir utviklere med en enkel løsning for å integrere dem i applikasjoner. Som et resultat ble mange biblioteker utviklet for å løse integreringsproblem.
Under årets Google I /O, men Google introduserte Android Design Support Library for å gjøre adopsjon av Material Design enklere. Dette lar utviklerne fokusere på de funksjoner som gjør sine søknader unik.
1. Regioner
I denne opplæringen, vil jeg vise deg hvordan du kan implementere rulleteknikker som vises i Googles Material Design spesifikasjon. Før vi begynner, bør du gjøre deg kjent med de tilgjengelige rullbare regioner i en Android-applikasjon. I følgende bilde, kan du se at det er fire regioner.
Status Bar
Det er der det vises varsler og status for ulike funksjoner på enheten vises.
Toolbar
Verktøylinjen var tidligere kjent som handlingsfeltet. Det er nå en mer passelig visning med samme funksjonalitet.
Tab /Search Bar
Denne valgfrie region brukes til å vise kategoriene som kategoriserer innholdet i søknaden din. Du kan lese mer om bruk av faner og de ulike måter å vise dem i Googles Material Design spesifikasjon. Når egnet, kan du også bruke den i Googles lateral navigasjon.
Fleksibel Space
Det er der du kan vise bilder eller lengre app barer.
Med hensyn å rulle teknikker, er det verktøylinjen og kategorien /søkefelt som svare når innholdet av søknaden er å rulle.
2. Prosjektet Setup
Hvis du vil følge med, du bør bruke den nyeste versjonen av Android Studio. Du kan få det fra Android Developer nettstedet. Å prøve disse rulling teknikker, anbefaler jeg å skape et nytt prosjekt (med et minimum API nivå på 15), fordi programmets layout vil endres vesentlig.
Jeg har gitt en startpakke prosjekt, som du kan laste ned fra GitHub . Du kan bruke starter prosjektet som utgangspunkt og bruke rulleteknikker i dine egne applikasjoner. La oss først legge til følgende avhengig til prosjektets build.gradle fil inne i app-mappen:
kompilering 'com.android.support:design:22.2.0' kompilere 'com.android.support:recyclerview-v7:22.2.0 '
Med den første avhengighet, får du Android Design Support Library, som inkluderer de nye klassene vi trenger for denne opplæringen.
Med andre avhengighet, får du den nyeste versjonen av RecyclerView. Den versjonen som er oppført i den offisielle artikkelen om å lage lister vil ikke være nyttig denne gangen.
Neste, du kommer til å trenge noen dummy data til å prøve disse teknikkene og befolke RecyclerView. Du kan implementere dem selv eller kopiere gjennomføringen fra InitialActivity klassen i start prosjektet.
3. Rulling Technique en
Denne teknikken skjuler verktøylinjen regionen når programmets innhold blir rullet. Du kan se teknikken i aksjon i følgende video
For dette oppsettet design, kan du tenke på noe som dette.
≪ RelativeLayout ... > < Toolbar ... /> < RecyclerView ... /> < /RelativeLayout >
Problemet med dette oppsettet er at du må håndtere hendelsene selv, men det vil være smertefritt hvis du dra nytte av de nye klassene. La oss endre det slik:
< android.support.design.widget.CoordinatorLayout xmlns: Android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http: //schemas.android.com/tools "xmlns: app =" http://schemas.android.com/apk/res-auto "android: layout_width =" match_parent "android: layout_height =" match_parent " tools:context="co.herovitamin.androiddesignsupportlibraryapplication.CoordinatorLayoutAndAppBarActivity"> < android.support.design.widget.AppBarLayout android: id = "+ id /my_appbar_container" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: tema = "@ stil /ThemeOverlay.AppCompat.Dark. ActionBar "> < android.support.v7.widget.Toolbar android: id = "+ id /technique_one_toolbar" style = "@ stil /TechniqueToolbar" app: layout_scrollFlags = "scroll | enterAlways" > <! - bla enterAlways enterAlwaysCollapsed exitUntilCollapsed - > < /android.support.v7.widget.Toolbar> < /android.support.design.widget.AppBarLayout> < android.support.v7.widget.RecyclerView android: id = "+ id /days_list" android: layout_width = "match_parent" android: layout_height = "match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>
In denne nye layout, kan du se at:
er RelativeLayout erstattet med en CoordinatorLayout
er verktøylinjen innpakket i en AppBarLayout
verktøylinjen og RecyclerView mottatt en noen flere attributter
Hva er disse nye klasser?
CoordinatorLayout
Dette oppsettet er en ny container og en supercharged FrameLayout som gir et ekstra nivå av kontroll over berørings hendelser mellom visninger barn.
AppBarLayout
Dette oppsettet er en annen ny container, spesielt designet for å gjennomføre mange av funksjonene i Material Design app bar konsept. Husk at hvis du bruker den i en annen ViewGroup, det meste av funksjonaliteten vil ikke fungere.
Nøkkelen til denne rulling teknikk, og de fleste andre rulling teknikker som vi vil diskutere, er CoordinatorLayout klasse. Dette spesialklasse kan motta hendelser fra og levere hendelser til sine synspunkter barn for å få dem til å reagere hensiktsmessig. Den er designet for å brukes som rot beholder utsikten
For å aktivere denne teknikken, app. Layout_behavior attributtet indikerer hvilken visning vil utløse hendelsene i verktøylinjen. I dette tilfellet, er at RecyclerView
app: layout_behavior = "@ streng /appbar_scrolling_view_behavior"
Den app: layout_scrollFlags egenskap av verktøylinjen viser til visningen hvordan å svare
app:.. Layout_scrollFlags = "scroll | enterAlways "
Den app: layout_scrollFlags attributtet kan ha fire mulige verdier, som kan kombineres for å skape den ønskede effekt:
bla
Dette flagget bør settes for alle visninger som må bla off-screen. Synspunkter som ikke bruker dette flagget forblir festet til toppen av skjermen.
enterAlways
Dette flagget sikrer at enhver nedadgående rulle vil føre til denne visningen til å bli synlig, slik at rask retur mønster .
enterAlwaysCollapsed
Når en visning har erklært en minHeight og du bruker dette flagget, visning vil bare gå inn på sitt minimumshøyden (kollapset), bare utvide til full høyde når rulling visning har nådd sin topp.
exitUntilCollapsed
Dette flagget fører utsikten til å bla off-screen før det er kollapset (dens minHeight er nådd) før du går ut.
Du kan nå kjøre prosjektet, eller trykke Ctrl + R, og se denne teknikken i aksjon.
4. Rulling Teknikk 2
Denne teknikken ruller verktøylinjen off-skjermen mens fanelinjen regionen forblir forankret til toppen. Du kan se denne teknikken i aksjon i følgende video.
For denne teknikken, kommer jeg til å bruke oppsettet fra forrige teknikk og legge en TabLayout utsikt ved siden av verktøylinjen, inne i AppBarLayout.
< android.support.design.widget.CoordinatorLayout ... < android.support.design.widget.AppBarLayout ... < android.support.v7.widget.Toolbar ... app: layout_scrollFlags = "scroll | enterAlways "/> < android.support.design.widget.TabLayout android: id = "+ id /tabs" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: bakgrunn = "@ farge /primær" /> < /android.support.design.widget.AppBarLayout> < android.support.v7.widget.RecyclerView ... app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>
The TabLayout visningen gir en horisontal layout å vise faner. Du kan legge til så mange faner som bruker newtab metode og sette sin oppførsel modus med setTabMode. La oss begynne med å fylle kategoriene.
Tab_layout = (TabLayout) findViewById(R.id.tabs);tab_layout.setTabMode(TabLayout.MODE_FIXED);tab_layout.addTab(tab_layout.newTab().setText("Tab 1 ")); tab_layout.addTab (tab_layout.newTab () setText (." Tab 2 ")); tab_layout.addTab (tab_layout.newTab () setText (." Tab 3 "));
Ved å endre verdien av programmet: layout_scrollFlags attributt, og legge til og fjerne det fra verktøylinjen og TabLayout, kan du få animasjoner som de som brukes i:
Google Play-butikken der verktøylinjen huder og fanelinjen forblir synlig.
Foursquare der fanelinjen ruller utenfor skjermen mens verktøylinjen forblir på toppen.
Play Music hvor både verktøylinjen og fanelinjen bla off-screen.
Ta en titt på følgende videoer for eksempler på dette rulle teknikk.
Du kan kjøre prosjektet og se dette rulling teknikk i aksjon.
5. Rulling Technique 3
For dette rulling teknikk, jeg kommer til å benytte seg av fleksibel plass regionen jeg nevnte i begynnelsen av denne opplæringen. Jeg gjør dette for å krympe den opprinnelige høyden på AppBarLayout som innholdet er rulle opp. Høyden på AppBarLayout øker til sin opprinnelige høyde som innholdet blir rullet ned. Du kan se denne teknikken i aksjon i følgende video
For dette rulling teknikk, kommer jeg til å bruke følgende layout:
< android.support.design.widget.CoordinatorLayout xmlns:. Android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android.com/tools~~number=plural" xmlns: app = "http://schemas.android.com/~~number=plural apk /res-auto "android: layout_width =" match_parent "android: layout_height =" match_parent " tools:context="co.herovitamin.androiddesignsupportlibraryapplication.CoordinatorLayoutAndAppBarActivity"> < android.support.design.widget.AppBarLayout android: id = "+ id /my_appbar_container" android: layout_width = "match_parent" android: layout_height = "192dp" android: tema = "@ stil /ThemeOverlay.AppCompat.Dark. ActionBar "android: bakgrunn =" @ farge /primær "> < android.support.design.widget.CollapsingToolbarLayout android: id = "+ id /collapsing_container" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_scrollFlags = "scroll | exitUntilCollapsed" app: contentScrim = " @ farge /primær "app: expandedTitleMarginStart =" 48dp "app: expandedTitleMarginEnd =" 64dp "> < android.support.v7.widget.Toolbar android: id = "+ id /technique_three_toolbar" android: layout_height = "attr /actionBarSize" android: layout_width = "match_parent" android: tema = "@ stil /ThemeOverlay.AppCompat .Dark.ActionBar "app: popupTheme =" @ stil /ThemeOverlay.AppCompat.Light "app: layout_collapseMode =" pin "/> < /android.support.design.widget.CollapsingToolbarLayout> < /android.support.design.widget.AppBarLayout> < android.support.v7.widget.RecyclerView android: id = "+ id /days_list_3" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_behavior = "@ streng /appbar_scrolling_view_behavior" /> < android.support.design.widget.FloatingActionButton android: id = "+ id /fab" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_margin = "16dp" android: src = "@ teikne /plus "app: borderWidth =" 0DP "app: layout_anchor =" @ id /my_appbar_container "app: layout_anchorGravity =" bottom | right | end "/></android.support.design.widget.CoordinatorLayout>
Det absolutt ser ut som mye kode, så la oss bryte det ned. I dette oppsettet, gjorde jeg følgende endringer:
Verktøylinjen er innpakket i en CollapsingToolBarLayout og begge elementene er satt i AppBarLayout
Den app. Layout_scrollFlags attributt er flyttet fra verktøylinjen til CollapsingToolBarLayout, fordi denne beholderen er nå ansvarlig for å svare på bla hendelser
En ny egenskap, app. layout_collapseMode, ble lagt til verktøylinjen. Dette attributtet sikrer at Toolbar forblir festet til toppen av skjermen.
Hva er disse nye klasser for?
CollapsingToolBarLayout
Dette er en ny visning, designet spesielt for innpakning Toolbar og implementere en kollapset app bar. Når du bruker CollapsingToolBarLayout klassen, må du være spesielt oppmerksom på følgende attributter:
app. ContentScrim
Dette attributtet angir fargen som skal vises når det er fullt kollapset
app: expandedTitleMarginStart /app: expandedTitleMarginEnd
Disse egenskapene angir margene på den utvidede tittelen. De er nyttig hvis du har tenkt å bruke den setDisplayHomeAsUpEnabled metoden i aktiviteten, og fylle de nye områder opprettet rundt tittelen.
FloatingActionButton
Den flytende handlingsknapp er en viktig del av Material Design apps. Du kan nå inkludere flytende handlingsknappene i layouten med bare noen få linjer med kode. Du kan bruke app: fabSize tilskriver å velge mellom to forskjellige størrelser, standard (56dp) og mini (40dp). Standard er standardstørrelsen
Den forsvinner effekten oppnås automatisk ved forankring av flytende handlingsknappen til AppBarLayout bruker appen. Layout_anchor attributt. Du kan også angi posisjonen i forhold til dette ankeret ved hjelp av app. Layout_anchorGravity attributtet
Før du kjører prosjektet, må vi spesifisere i aktiviteten at CollapsingToolBarLayout kommer til å vise tittelen i stedet for verktøylinjen. Ta en titt på følgende kodebiten for avklaring.
Collapsing_container = (CollapsingToolbarLayout) findViewById(R.id.collapsing_container);collapsing_container.setTitle(getResources().getString(R.string.title_activity_technique3));
Run prosjektet for å se den tredje rulling teknikk i aksjon.
6. Rulling Technique 4
Dette rulling teknikken bruker den utvidede AppBarLayout, vist i forrige teknikk, for å vise et bilde. Du kan se denne teknikken i følgende video
For denne teknikken, kommer jeg til å bruke den forrige layout og endre det litt:
< android.support.design.widget.CoordinatorLayout ... . > < android.support.design.widget.AppBarLayout android: id = "+ id /my_appbar_container" android: layout_width = "match_parent" android: layout_height = "192dp" android: tema = "@ stil /ThemeOverlay.AppCompat.Dark. ActionBar "> < android.support.design.widget.CollapsingToolbarLayout android: id = "+ id /collapsing_container" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_scrollFlags = "scroll | exitUntilCollapsed" app: contentScrim = " @ farge /primær "> < Imageview android: id = "+ id /imgToolbar" android: layout_width = "match_parent" android: layout_height = "match_parent" android: scaleType = "centerCrop" android: src = "@ teikne /image" app: layout_collapseMode = " parallax "/> < android.support.v7.widget.Toolbar ... > < /android.support.v7.widget.Toolbar> < /android.support.design.widget.CollapsingToolbarLayout> < /android.support.design.widget.AppBarLayout> < android.support.v7.widget.RecyclerView ... /> < android.support.design.widget.FloatingActionButton ... /></android.support.design.widget.CoordinatorLayout>
In dette oppsettet, jeg har gjort følgende endringer: Du kan også ha lagt merke til at Imageview har app. Layout_collapseMode attributt. Verdien av attributtet er satt til parallax å implementere parallax rulling. I tillegg kan du også legge app. Layout_collapseParallaxMultiplier attributt for å sette en multiplikator Dette er alle endringene du må gjøre for å få dette rulling teknikk knirkefritt i programmet ditt. Kjør prosjekt for å se denne rulling teknikk i aksjon. For dette rulling teknikk, er fleksibel plass lappes av innholdet i programmet og er rullet forbi på skjermen når innholdet er rullet. Du kan se denne teknikken i aksjon i følgende video For denne teknikken, kan du bruke oppsettet fra forrige teknikk, med noen små modifikasjoner For dette oppsettet: Hvis du prøver å bruke denne rulling teknikken med disse endringene, så den resulterende layout vant ' t har en tittel i verktøylinjen. For å løse dette, kan du opprette en TextView og legge den til verktøylinjen programma Note at du ikke trenger å gjennomføre hver og en av disse teknikkene i din app. Noen vil være mer nyttig for design enn andre. Nå som du vet hvordan du skal gjennomføre hver enkelt, kan du velge og eksperimentere med dem.
< li> android: Bakgrunnen attributtet ble fjernet fra AppBarLayout. Fordi Imageview kommer til å fylle dette rommet er det ikke nødvendig å ha en bakgrunnsfarge
Den app. ExpandedTitleMarginStart og app: expandedTitleMarginEnd attributter ble fjernet, fordi vi ikke bruker setDisplayHomeAsUpEnabled metoden i aktiviteten.
En Imageview ble lagt før
verktøylinjen. Dette er viktig for å unngå at AppBarLayout viser en del av bildet i stedet for den primære fargen når den er kollapset
7. Rulling Technique 5
. ≪. Android.support.design.widget .CoordinatorLayout xmlns: Android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android.com/tools~~number=plural" xmlns: app = "http: //skjemaer .android.com /apk /res-auto "android: layout_width =" match_parent "android: layout_height =" match_parent " tools:context="co.herovitamin.androiddesignsupportlibraryapplication.CoordinatorLayoutAndAppBarActivity"> < android.support.design.widget.AppBarLayout android: id = "+ id /my_appbar_container" android: layout_width = "match_parent" android: layout_height = "192dp" android: tema = "@ stil /ThemeOverlay.AppCompat.Dark. ActionBar "> < android.support.design.widget.CollapsingToolbarLayout android: id = "+ id /collapsing_container" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_scrollFlags = "scroll | exitUntilCollapsed" android: bakgrunn = " @ farge /primær "> < android.support.v7.widget.Toolbar android: id = "+ id /technique_five_toolbar" android: layout_height = "attr /actionBarSize" android: layout_width = "match_parent" android: tema = "@ stil /ThemeOverlay.AppCompat .Dark.ActionBar "app: popupTheme =" @ stil /ThemeOverlay.AppCompat.Light "app: layout_collapseMode =" pin "android: bakgrunn =" @ farge /primær "/> < /android.support.design.widget.CollapsingToolbarLayout> < /android.support.design.widget.AppBarLayout> < android.support.v7.widget.RecyclerView android: id = "+ id /days_list_5" android: layout_width = "match_parent" android: layout_height = "match_parent" app: layout_behavior = "@ streng /appbar_scrolling_view_behavior" app: behavior_overlapTop = "64dp" /></android.support.design.widget.CoordinatorLayout>
Imageview og FloatingActionButton inne i CollapsingToolbarLayout ble fjernet. Denne teknikken krever ikke et bilde
I CollapsingToolbarLayout, app. ContentScrim attributtet ble erstattet med android: bakgrunnen attributt. Vi gjør dette, fordi bakgrunnsfargen må samsvare med Toolbar bakgrunnsfarge pent da forsvinner
android. Bakgrunnen attributtet ble lagt i verktøylinjen
Den app. Behavior_overlapTop attributtet ble lagt til den RecyclerView. Dette er den viktigste egenskapen for rulling teknikk som dette attributtet angir hvor mye overlapping visningen bør ha med AppBarLayout. For dette attributtet til å ha effekt, bør det legges til samme syn som har app. Layout_behavior attributtet
TextView tekst = new TextView (denne),. Text.setText (R.string.title_activity_technique5), text.setTextAppearance (dette, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);toolbar.addView(text);
Conclusion
< p> Jeg håper du fant denne opplæringen nyttig. Ikke glem å dele den hvis du likte det. Du kan legge igjen kommentarer og spørsmål nedenfor.