Vorig jaar introduceerde Google Material Design en het werd duidelijk dat beweging en animatie twee van de meest in het oog springende functies in moderne Android-applicaties zouden zijn. Maar Google bood ontwikkelaars geen gemakkelijke oplossing om ze in applicaties te integreren. Dientengevolge werden vele bibliotheken ontwikkeld om het integratieprobleem op te lossen.
Tijdens de Google I / O van dit jaar introduceerde Google echter de Android Design Support Library om het gebruik van Material Design gemakkelijker te maken. Hierdoor kunnen ontwikkelaars zich richten op de functies die hun toepassingen uniek maken.
1. Regio's
In deze zelfstudie laat ik u zien hoe u de scroltechnieken implementeert die worden weergegeven in de Material Design-specificatie van Google. Voordat we beginnen, moet u vertrouwd raken met de beschikbare schuifbare gebieden in een Android-applicatie. In de volgende afbeelding ziet u dat er vier regio's zijn.
Statusbalk
Dit is waar meldingen worden weergegeven en de status van verschillende functies van het apparaat wordt weergegeven.
Toolbar
De werkbalk stond voorheen bekend als de actiebalk. Het is nu een meer aanpasbare weergave met dezelfde functionaliteiten.
Tab / zoekbalk
Deze optionele regio wordt gebruikt om de tabbladen weer te geven die de inhoud van uw toepassing categoriseren. U kunt meer lezen over het gebruik van tabbladen en de verschillende manieren om ze weer te geven in de Material Design-specificatie van Google. Indien van toepassing, kunt u dit ook gebruiken in de laterale navigatie van Google.
Flexibele ruimte
Hier kunt u afbeeldingen of uitgebreide app-balken weergeven.
Met betrekking tot schuiftechnieken zijn het de werkbalk en de tab / zoekbalk die reageren wanneer de inhoud van uw toepassing scrolt.
2. Project Setup
Om mee te gaan, zou je de nieuwste versie van Android Studio moeten gebruiken. Je kunt het krijgen van de Android Developer-website. Om deze schuiftechnieken te proberen, raad ik aan een nieuw project te maken (met een minimum API-niveau van 15), omdat de lay-out van je toepassing aanzienlijk zal veranderen.
Ik heb een startersproject geleverd, dat je kunt downloaden van GitHub. U kunt het startersproject als uitgangspunt gebruiken en de scrolltechnieken gebruiken in uw eigen applicaties. Laten we eerst de volgende afhankelijkheden toevoegen aan uw project build.gradle bestand in de app-map:
Met de eerste afhankelijkheid krijgt u de ondersteuningsbibliotheek voor Android-ontwerp, die de nieuwe klassen bevat die we nodig hebben voor deze zelfstudie.
Met de tweede afhankelijkheid krijgt u de nieuwste versie van RecyclerView. De versie die wordt vermeld in het officiële artikel over het maken van lijsten zal deze keer niet nuttig zijn.
Vervolgens zul je wat dummy data nodig hebben om deze technieken te proberen en de RecyclerView. U kunt ze zelf implementeren of de implementatie kopiëren van de InitialActivity klasse in het startersproject.
3. Scroltechniek 1
Deze techniek verbergt de werkbalkregio wanneer de inhoud van uw toepassing wordt gescrold. Je kunt de techniek in actie zien in de volgende video.
Voor dit ontwerp van de lay-out, kunt u denken aan zoiets als dit:
Het probleem met deze lay-out is dat je de gebeurtenissen zelf moet beheren, maar het zal pijnloos zijn als je gebruik maakt van de nieuwe klassen. Laten we het als volgt aanpassen:
In deze nieuwe lay-out kunt u zien dat:
de Relatieve layout wordt vervangen door een CoordinatorLayout
de Toolbar is ingepakt in een AppBarLayout
de Toolbar en RecyclerView ontving een paar extra attributen
Wat zijn deze nieuwe klassen?
CoordinatorLayout
Deze lay-out is een nieuwe container en een supercharged FrameLayout dat biedt een extra niveau van controle over aanraakgebeurtenissen tussen onderliggende weergaven.
AppBarLayout
Deze lay-out is een nieuwe container die speciaal is ontworpen om veel van de functies van het app-ontwerpconcept Material Design te implementeren. Houd er rekening mee dat als je het in een ander gebruikt ViewGroup, de meeste functionaliteit werkt niet.
De sleutel tot deze scrolltechniek en de meeste andere scrolltechnieken die we zullen bespreken, is de CoordinatorLayout klasse. Deze speciale klasse kan gebeurtenissen ontvangen van en de gebeurtenissen aan zijn of haar kinderopvattingen overdragen, zodat deze op de juiste manier kunnen reageren. Het is ontworpen om te worden gebruikt als de weergave van de rootcontainer.
Om deze techniek mogelijk te maken, is de app: layout_behavior attribuut geeft aan welke weergave de gebeurtenissen in de Toolbar. In dit geval is dat het RecyclerView.
De app: layout_scrollFlags attribuut van de Toolbar geeft aan de weergave hoe te reageren.
app: layout_scrollFlags = “scroll | enterAlways"
De app: layout_scrollFlags attribuut kan vier mogelijke waarden hebben, die kunnen worden gecombineerd om het gewenste effect te creëren:
rol
Deze vlag moet worden ingesteld voor alle weergaven die buiten het scherm moeten scrollen. Weergaven die deze vlag niet gebruiken, blijven aan de bovenkant van het scherm vastzetten.
enterAlways
Deze vlag zorgt ervoor dat deze neerwaartse schuif zichtbaar wordt, waardoor de snelle terugkeer patroon.
enterAlwaysCollapsed
Wanneer een weergave een heeft verklaard minHeight en als u deze vlag gebruikt, komt de weergave alleen op de minimale hoogte (samengevouwen) uit, maar breidt deze alleen uit naar de volledige hoogte wanneer de scrollweergave zijn top heeft bereikt.
exitUntilCollapsed
Deze vlag zorgt ervoor dat de weergave van het scherm schuift totdat deze is samengevouwen (zijn minHeight is bereikt) voordat u afsluit.
U kunt nu het project uitvoeren of op drukken Control + R, en zie deze techniek in actie.
4. Scroltechniek 2
Deze techniek schuift de werkbalk buiten het scherm terwijl het tabbladbalkgebied verankerd blijft aan de bovenkant. Je kunt deze techniek in actie zien in de volgende video.
Voor deze techniek ga ik de lay-out van de vorige techniek hergebruiken en een toevoegen TabLayout bekijk naast de Toolbar, binnen in de AppBarLayout.
De TabLayout weergave biedt een horizontale lay-out om tabbladen weer te geven. U kunt een willekeurig aantal tabbladen toevoegen met behulp van de nieuw tabblad methode en stel de gedragsmodus in met behulp van de setTabMode. Laten we beginnen met het vullen van de tabbladen.
Door de waarde van de te wijzigen app: layout_scrollFlags attribuut en het toevoegen en verwijderen van het Toolbar en TabLayout, je kunt animaties krijgen zoals die gebruikt worden in:
Google Play Store waar de werkbalk zich verbergt en de tabbalk zichtbaar blijft.
Vierkant waar de tabbalk van het scherm schuift terwijl de werkbalk bovenaan blijft staan.
Speel muziek waarbij zowel de werkbalk als de tabbladbalk van het scherm schuiven.
Bekijk de volgende video's voor voorbeelden van deze schuiftechniek.
U kunt uw project uitvoeren en deze schuiftechniek in actie zien.
5. Scroltechniek 3
Voor deze scrolltechniek ga ik gebruik maken van de flexibele spatie die ik aan het begin van deze tutorial noemde. Ik doe dit om de initiële hoogte van de te verkleinen AppBarLayout terwijl de inhoud omhoog scrollt. De hoogte van de AppBarLayout neemt toe naar zijn oorspronkelijke hoogte terwijl de inhoud naar beneden wordt geschoven. Je kunt deze techniek in actie zien in de volgende video.
Voor deze schuiftechniek ga ik de volgende lay-out gebruiken:
Het ziet er zeker uit als veel code, dus laten we het opsplitsen. In deze lay-out heb ik de volgende wijzigingen aangebracht:
De Toolbar is ingepakt in een CollapsingToolBarLayout en beide elementen worden in de AppBarLayout.
De app: layout_scrollFlags attribuut is verplaatst van de Toolbar naar de CollapsingToolBarLayout, omdat deze container nu verantwoordelijk is voor het reageren op scrolleerevenementen.
Een nieuw kenmerk, app: layout_collapseMode, is toegevoegd aan de Toolbar. Dit kenmerk zorgt ervoor dat de Toolbar blijft vastgemaakt aan de bovenkant van het scherm.
De AppBarLayout heeft een vaste initiële hoogte van 192dp.
EEN FloatingActionButton is toegevoegd aan de lay-out, onder de RecyclerView.
Waar zijn deze nieuwe klassen voor?
CollapsingToolBarLayout
Dit is een nieuwe weergave, speciaal ontworpen voor het inpakken van de Toolbar en implementeer een instortende app-balk. Bij gebruik van de CollapsingToolBarLayout klasse, moet je speciale aandacht besteden aan de volgende attributen:
app: contentScrim
Dit kenmerk geeft de kleur aan die moet worden weergegeven wanneer deze volledig is samengevouwen.
Deze attributen specificeren de marges van de uitgevouwen titel. Ze zijn handig als u van plan bent om het te gebruiken setDisplayHomeAsUpEnabled methode in uw activiteit en vul de nieuwe spaties gemaakt rond de titel.
FloatingActionButton
De zwevende actieknop is een belangrijk onderdeel van Material Design-apps. U kunt zwevende actieknoppen nu opnemen in uw lay-out met slechts enkele regels code. U kunt de app: fabSize kenmerk om uit twee verschillende formaten te kiezen, standaard- (56dp) en mini (40dp). Standaard is de standaardgrootte.
Het verdwijnende effect wordt automatisch bereikt door de zwevende actieknop te verankeren in de AppBarLayout de ... gebruiken app: layout_anchor attribuut. U kunt ook de positie ten opzichte van dit anker opgeven met behulp van de app: layout_anchorGravity attribuut.
Voordat het project wordt uitgevoerd, moeten we in de activiteit specificeren dat het CollapsingToolBarLayout zal de titel weergeven in plaats van de Toolbar. Bekijk het volgende codefragment ter verduidelijking.
Voer het project uit om de derde schuiftechniek in actie te zien.
6. Scroltechniek 4
Deze scrolltechniek maakt gebruik van de extended AppBarLayout, getoond in de vorige techniek, om een afbeelding weer te geven. Je kunt deze techniek zien in de volgende video.
Voor deze techniek ga ik de vorige lay-out opnieuw gebruiken en deze enigszins aanpassen:
In deze lay-out heb ik de volgende wijzigingen aangebracht:
De android: background attribuut is verwijderd uit de AppBarLayout. Omdat het Figuurweergave gaat deze ruimte vullen, het is niet nodig om een achtergrondkleur te hebben.
De app: expandedTitleMarginStart en app: expandedTitleMarginEnd attributen zijn verwijderd, omdat we de. niet gebruiken setDisplayHomeAsUpEnabled methode in de activiteit.
Een Figuurweergave was toegevoegd voor de Toolbar. Dit is belangrijk om te voorkomen dat de AppBarLayout toont een deel van de afbeelding in plaats van de primaire kleur wanneer deze is samengevouwen.
Je hebt misschien ook gemerkt dat het Figuurweergave heeft de app: layout_collapseMode attribuut. De waarde van het attribuut is ingesteld op parallax parallax scrollen implementeren. Bovendien kunt u ook de app: layout_collapseParallaxMultiplier attribuut om een multiplier in te stellen.
Dit zijn alle wijzigingen die u moet aanbrengen om deze schuiftechniek soepel te laten verlopen in uw app. Voer het project uit om deze schuiftechniek in actie te zien.
7. Scroltechniek 5
Voor deze schuiftechniek overlapt de flexibele ruimte de inhoud van de app en scrolt deze buiten het scherm wanneer de inhoud wordt geschoven. Je kunt deze techniek in actie zien in de volgende video.
Voor deze techniek kunt u de lay-out van de vorige techniek opnieuw gebruiken, met een paar kleine wijzigingen.
Voor deze lay-out:
De Figuurweergave en de FloatingActionButton binnen in de CollapsingToolbarLayout zijn verwijderd. Voor deze techniek is geen afbeelding vereist.
In de CollapsingToolbarLayout, de app: contentScrim kenmerk is vervangen door de android: background attribuut. We doen dit, omdat de achtergrondkleur moet overeenkomen met de Toolbar achtergrondkleur netjes bij het verdwijnen.
De android: background attribuut is toegevoegd aan de Toolbar.
De app: behavior_overlapTop attribuut is toegevoegd aan de RecyclerView. Dit is het belangrijkste kenmerk voor deze schuiftechniek aangezien dit kenmerk de mate van overlap aangeeft die de weergave zou moeten hebben met de AppBarLayout. Om dit kenmerk effect te laten hebben, zou het moeten worden toegevoegd aan dezelfde weergave die de app: layout_behavior attribuut.
Als u deze schuiftechniek met deze wijzigingen probeert te gebruiken, krijgt de resulterende lay-out geen titel in de Toolbar. Om dit op te lossen, kunt u een Tekstweergave en voeg het toe aan de Toolbar programmatisch.
Merk op dat u niet elk van deze technieken in uw app hoeft te implementeren. Sommige zijn nuttiger voor uw ontwerp dan andere. Nu u weet hoe u deze allemaal kunt implementeren, kunt u ervoor kiezen en ermee experimenteren.
Ik hoop dat je deze tutorial nuttig hebt gevonden. Vergeet niet om het te delen als je het leuk vond. U kunt eventuele opmerkingen en vragen hieronder achterlaten.
Share
Accentsconagua
