Förra året introducerade Google Material Design och det blev klart att rörelse och animering skulle vara två av de mest iögonfallande funktionerna i moderna Android-applikationer. Men Google gav inte utvecklare en enkel lösning för att integrera dem i applikationer. Som ett resultat av detta utvecklades många bibliotek för att lösa integrationsproblemet.
Under årets Google I / O introducerade Google dock Android Design Support Library för att underlätta införandet av Material Design. Detta gör det möjligt för utvecklare att fokusera på de funktioner som gör deras program unika.
1. Regioner
I den här handledningen visar jag dig hur du implementerar rullningsteknikerna som visas i Googles materialdesignspecifikation. Innan vi börjar bör du bekanta dig med de tillgängliga rullbara regionerna i en Android-applikation. I följande bild kan du se att det finns fyra regioner.
Statusfältet
Det här är var meddelanden visas och statusen för olika funktioner på enheten visas.
Toolbar
Verktygsfältet var tidigare känt som handlingsfältet. Det är nu en mer anpassningsbar vy med samma funktioner.
Tab / Search Bar
Den här valfria regionen används för att visa flikarna som kategoriserar innehållet i din ansökan. Du kan läsa mer om användningen av flikar och olika sätt att visa dem i Googles materialdesignspecifikation. När det är lämpligt kan du även använda det i Googles sidnavigering.
Flexibelt utrymme
Här kan du visa bilder eller utökade appfält.
När det gäller rullningstekniker är det verktygsfältet och fliken / sökfältet som svarar när innehållet i din ansökan rullar.
2. Projekt Setup
För att följa med, bör du använda den senaste versionen av Android Studio. Du kan hämta den från Android Developer-webbplatsen. För att prova dessa rullningstekniker rekommenderar jag att du skapar ett nytt projekt (med en lägsta API-nivå på 15), eftersom din applikations layout kommer att förändras betydligt.
Jag har försett ett startprojekt, som du kan ladda ner från GitHub. Du kan använda startprojektet som utgångspunkt och använda rullningsteknikerna i dina egna applikationer. Låt oss först lägga till följande beroenden till ditt projekt build.gradle filen i app-mappen:
Med det första beroendet får du Android Design Support Library, som innehåller de nya klasserna vi behöver för denna handledning.
Med det andra beroendet får du den senaste versionen av RecyclerView. Den version som anges i den officiella artikeln om att skapa listor kommer inte att vara användbar den här gången.
Därefter kommer du behöva lite dummy data för att prova dessa tekniker och fylla i RecyclerView. Du kan implementera dem själv eller kopiera implementeringen från InitialActivity klass i startprojektet.
3. Scrolling Technique 1
Den här tekniken döljer verktygsfältet när programmets innehåll rullas. Du kan se tekniken i åtgärd i följande video.
För denna layoutdesign kan du tänka på något så här:
Problemet med denna layout är att du måste hantera händelserna själv, men det blir smärtfritt om du utnyttjar de nya klasserna. Låt oss ändra det på följande sätt:
I den här nya layouten kan du se det:
de RelativeLayout ersätts med a CoordinatorLayout
de Toolbar är inslaget i a AppBarLayout
de Toolbar och RecyclerView fått några ytterligare attribut
Vad är dessa nya klasser?
CoordinatorLayout
Denna layout är en ny behållare och en superladdad FrameLayout som ger en extra nivå av kontroll över beröringshändelser mellan barnvyer.
AppBarLayout
Denna layout är en annan ny behållare, utformad speciellt för att genomföra många av funktionerna i Material Design app bar koncept. Tänk på att om du använder den inom en annan ViewGroup, det mesta av dess funktionalitet fungerar inte.
Nyckeln till denna rullningsteknik, och de flesta andra rullningstekniker som vi kommer att diskutera, är CoordinatorLayout klass. Denna speciella klass kan ta emot händelser från och leverera händelser till sina barnvyer för att de ska kunna svara på lämpligt sätt. Den är konstruerad för att användas som rotbehållare.
För att aktivera denna teknik, ska app: layout_behavior attributet indikerar vilken vy som kommer att utlösa händelserna i Toolbar. I det här fallet är det RecyclerView.
De app: layout_scrollFlags attribut av Toolbar Indikerar för visningen hur man svarar.
app: layout_scrollFlags = ”scroll | enterAlways"
De app: layout_scrollFlags attributet kan ha fyra möjliga värden, som kan kombineras för att skapa önskad effekt:
skrolla
Den här flaggan bör ställas in för alla vyer som behöver bläddra i skärmen. Visningar som inte använder den här flaggan förblir fastade högst upp på skärmen.
enterAlways
Den här flaggan säkerställer att alla nedåtrullningar leder till att denna vy blir synlig, vilket möjliggör snabb retur mönster.
enterAlwaysCollapsed
När en vy har deklarerat a minHeight och du använder den här flaggan, kommer visningen bara att ange i sin minsta höjd (kollapsad), bara expandera till sin fulla höjd när rullningsvyn har nått sin topp.
exitUntilCollapsed
Den här flaggan får synvinkeln att bläddra i skärmen tills den är kollapsad (dess minHeight nås) innan du lämnar.
Nu kan du köra projektet eller trycka på Kontroll + R, och se den här tekniken i aktion.
4. Scrolling Technique 2
Den här tekniken rullar verktygsfältet utanför skärmen medan fältfältet förblir förankrat till toppen. Du kan se den här tekniken i åtgärd i följande video.
För denna teknik ska jag återanvända layouten från den tidigare tekniken och lägga till en TabLayout visa bredvid Toolbar, inuti AppBarLayout.
De TabLayout Visa ger en horisontell layout för att visa flikar. Du kan lägga till ett antal flikar med hjälp av ny flik metod och sätt dess beteende läge med hjälp av setTabMode. Låt oss börja med att fylla i flikarna.
Genom att ändra värdet av app: layout_scrollFlags attribut och lägga till och ta bort det från Toolbar och TabLayout, du kan få animeringar som de används i:
Google Play Butik där verktygsfältet gömmer sig och flikfältet förblir synligt.
Foursquare där flikfältet rullar på skärmen medan verktygsfältet ligger högst upp.
Spela musik där både verktygsfältet och flikfältet rullar bort från skärmen.
Ta en titt på följande videor för exempel på denna rullningsteknik.
Du kan köra ditt projekt och se denna rullningsteknik i aktion.
5. Rullningsteknik 3
För denna rullningsteknik ska jag använda den flexibla rymdregionen jag nämnde i början av denna handledning. Jag gör detta för att krympa den ursprungliga höjden av AppBarLayout som innehållet rullar upp. Höjden på AppBarLayout ökar till sin ursprungliga höjd när innehållet rullas nedåt. Du kan se den här tekniken i åtgärd i följande video.
För denna rullningsteknik ska jag använda följande layout:
Det ser verkligen ut som en massa kod, så låt oss bryta ner det. I denna layout gjorde jag följande ändringar:
De Toolbar är inslaget i a CollapsingToolBarLayout och båda elementen sätts i AppBarLayout.
De app: layout_scrollFlags attributet flyttas från Toolbar till CollapsingToolBarLayout, eftersom denna behållare nu har ansvaret för att svara på bläddra händelser.
Ett nytt attribut, app: layout_collapseMode, tillsattes till Toolbar. Detta attribut garanterar att Toolbar förblir fast på toppen av skärmen.
De AppBarLayout har en fast initial höjd på 192dp.
en FloatingActionButton läggs till i layouten, nedanför RecyclerView.
Vad är dessa nya klasser för?
CollapsingToolBarLayout
Detta är en ny vy, utformad speciellt för omslagning av Toolbar och implementera en kollapsande appfält. När du använder CollapsingToolBarLayout klass måste du ägna särskild uppmärksamhet åt följande attribut:
app: contentScrim
Det här attributet anger vilken färg som ska visas när den är helt kollapsad.
Dessa attribut anger marginalerna för den expanderade titeln. De är användbara om du planerar att använda setDisplayHomeAsUpEnabled metod i din verksamhet och fyll i de nya utrymmena skapade runt titeln.
FloatingActionButton
Den flytande åtgärdsknappen är en viktig del av Material Design-appar. Du kan nu inkludera flytande handlingsknappar i din layout med bara några rader av kod. Du kan använda app: fabSize attribut att välja mellan två olika storlekar, standard- (56dp) och mini (40dp). Standard är standardstorleken.
Den försvinnande effekten uppnås automatiskt genom att förankra den flytande åtgärdsknappen till AppBarLayout använda app: layout_anchor attribut. Du kan också ange positionen i förhållande till detta ankar genom att använda app: layout_anchorGravity attribut.
Innan vi kör projektet måste vi ange i den aktivitet som CollapsingToolBarLayout kommer att visa titeln istället för Toolbar. Ta en titt på följande kodsedel för att förtydliga.
Kör projektet för att se den tredje rullningstekniken i åtgärd.
6. Scrolling Technique 4
Denna rullningsteknik använder den utökade AppBarLayout, som visas i föregående teknik, för att visa en bild. Du kan se den här tekniken i följande video.
För den här tekniken ska jag återanvända den tidigare layouten och ändra den något:
I denna layout gjorde jag följande ändringar:
De android: bakgrunds attributet togs bort från AppBarLayout. Eftersom det Imageview kommer att fylla detta utrymme, det finns ingen anledning att ha en bakgrundsfärg.
De app: expandedTitleMarginStart och app: expandedTitleMarginEnd attributen togs bort, eftersom vi inte använder setDisplayHomeAsUpEnabled metod i aktiviteten.
En Imageview lades till innan de Toolbar. Detta är viktigt för att undvika att AppBarLayout visar en del av bilden istället för den primära färgen när den är kollapsad.
Du kanske också har märkt att Imageview har app: layout_collapseMode attribut. Värdet på attributet är inställt på parallax att genomföra parallaxrullning. Dessutom kan du också lägga till app: layout_collapseParallaxMultiplier attribut att ställa in en multiplikator.
Det här är alla de förändringar du måste göra för att få denna rullningsteknik att fungera smidigt i din app. Kör projektet för att se denna rullningsteknik i aktion.
7. Scrolling Technique 5
För denna rullningsteknik överlappar det flexibla utrymmet av innehållet i appen och rullas av skärmen när innehållet rullas. Du kan se den här tekniken i åtgärd i följande video.
För denna teknik kan du återanvända layouten från den tidigare tekniken, med några små ändringar.
För denna layout:
De Imageview och den FloatingActionButton inuti CollapsingToolbarLayout avlägsnades. Denna teknik kräver ingen bild.
I CollapsingToolbarLayout, de app: contentScrim attributet ersattes med android: bakgrunds attribut. Det gör vi, för bakgrundsfärgen behöver matcha Toolbar bakgrundsfärg snygg när du försvinner.
De android: bakgrunds attributet har lagts till i Toolbar.
De app: behavior_overlapTop attributet har lagts till i RecyclerView. Detta är det viktigaste attributet för denna rullningsteknik, eftersom det här attributet anger hur mycket överlapp som visningen ska ha med AppBarLayout. För att detta attribut ska få effekt ska det läggas till i samma vy som har app: layout_behavior attribut.
Om du försöker använda denna rullningsteknik med dessa ändringar, kommer den resulterande layouten inte att ha en titel i Toolbar. För att lösa detta kan du skapa en Textview och lägg till den i Toolbar programma.
TextView text = ny TextView (this); text.setText (R.string.title_activity_technique5); text.setTextAppearance (detta, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse); toolbar.addView (text);
Slutsats
Observera att du inte behöver implementera alla dessa tekniker i din app. Vissa kommer att vara mer användbara för din design än andra. Nu när du vet hur du implementerar var och en, kan du välja och experimentera med dem.
Jag hoppas att du hittade denna handledning användbar. Glöm inte att dela den om du gillade den. Du kan lämna några kommentarer och frågor nedan.
Share
Accentsconagua
