Share
Dankzij de opmerkelijke veelzijdigheid, de ConstraintLayout widget is het "Zwitserse zakmes" geworden van lay-outs voor Android-app-ontwikkelaars. Het toevoegen van complexe animaties aan de inhoud ervan, hoewel mogelijk, kan echter behoorlijk tijdrovend zijn. Daarom introduceerde Google het MotionLayout widget in I / O 2018.
De MotionLayout widget, die nu deel uitmaakt van de ondersteuningsbibliotheek van Android, breidt het ConstraintLayout widget. Het is een unieke widget waarmee u de inhoud declaratief kunt animeren met alleen XML. Bovendien biedt het fijnmazige controle over al zijn animaties.
In deze zelfstudie laat ik je zien hoe je deze kunt toevoegen aan je Android Studio-projecten en er een paar verschillende animaties mee kunt maken.
Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:
Accentsconagua
ConstraintLayout widgetOm de. Te kunnen gebruiken MotionLayout widget in uw Android Studio-project, moet u de nieuwste versie van de ondersteuningsbibliotheek Constraint-lay-out hebben als een implementatie afhankelijkheid. Bovendien, om versieconflicten te voorkomen, moet u ervoor zorgen dat u een afhankelijkheid toevoegt voor de nieuwste stabiele versie van de ondersteuningsbibliotheek met ondersteuning voor v7..
Voeg daarom de volgende code toe aan de app module build.gradle het dossier:
implementatie 'com.android.support:appcompat-v7:27.0.2' implementatie 'com.android.support.constraint: constraint-layout: 2.0.0-alpha1'
De MotionLayout widget kan alles doen ConstraintLayout widget kan. Daarom kunt u elk exemplaar van het laatste vrij vervangen door het eerste. Voor nu, echter, stel ik voor dat je een nieuw lay-out XML-bestand maakt en de MotionLayout widget ernaar als het rootelement.
In deze zelfstudie animeren we een Figuurweergave widget. Dus voeg het toe als het eerste kind van de lay-out.
Je bent vrij om een drawable te gebruiken als de bron van de Figuurweergave widget. In de bovenstaande code gebruik ik een kleur die kan worden getekend.
Voeg vervolgens een knop toe waarop u kunt drukken om de animaties te starten. De volgende code laat zien hoe u deze in het midden van de lay-out plaatst:
Voeg bovendien een toe om de voortgang van de animaties te controleren SeekBar widget naar de lay-out en plaats deze onder de knop. Hier is hoe:
Als laatste, omdat er een gebeurtenishandler op de klik is gekoppeld aan de knop, moet u deze definiëren in uw activiteit.
leuke start (v: weergave) // Meer code hier
U hebt misschien gemerkt dat we geen beperkingen hebben toegevoegd aan de Figuurweergave widget tijdens het definiëren van de lay-out. Dat komt omdat we ze in plaats daarvan aan een bewegende scène toevoegen. Een bewegingscène is een XML-bestand dat details bevat over de animatie die u wilt maken met een MotionLayout widget.
Maak een XML-bronbestand en voeg een toe om een nieuwe bewegingscène te maken MotionScene element ervan.
Een bewegende scène bevat ConstraintSet elementen die de beperkingen specificeren die op verschillende punten in de animatie op een widget moeten worden toegepast. Bewegingscène-bestanden bevatten meestal twee constraintsets: één voor het begin van de animatie en één voor het einde.
De volgende code laat zien hoe je twee constraintsets maakt die de MotionLayout widget verplaats de Figuurweergave widget van de rechterbenedenhoek van het scherm naar de linkerbovenhoek:
Merk op dat elk ConstraintSet element moet altijd zowel de gewenste positie als de gewenste grootte opgeven. Dit is belangrijk omdat het alle eerder ingestelde lay-outinformatie zal overschrijven.
Om de. Te helpen MotionLayout widget begrijpt de volgorde waarin de beperkingssets moeten worden toegepast, u moet vervolgens een maken Overgang element. Door het intuïtief te noemen constraintSetStart en constraintSetEnd attributen, kunt u opgeven welke set het eerst moet worden toegepast en welke laatste. De Overgang element kunt u ook de duur van de animatie opgeven.
Op dit punt is de bewegingsscène voltooid. echter, de MotionLayout widget is er nog steeds niet van op de hoogte. Dus ga terug naar het XML-lay-outbestand, voeg een toe layoutDescription attribuut aan de widget en stel de waarde ervan in op de naam van het bewegende scènebestand.
Als de naam van je bewegingsscènesbestand dat is my_scene.xml, jouw MotionLayout widget zou er nu als volgt uit moeten zien:
...
Wanneer u de app uitvoert, is de MotionLayout widget past automatisch de beperkende reeks toe die is opgegeven in de constraintSetStart attribuut van de Overgang element. Daarom, om de animatie te starten, hoeft u alleen de. Te bellen transitionToEnd () methode van de widget. De volgende code, die moet worden toegevoegd aan de gebeurtenishandler on-click die u in een eerdere stap hebt gemaakt, toont u hoe:
motion_container.transitionToEnd ()
Als u de app nu uitvoert en op de knop drukt, zou u het moeten kunnen zien Figuurweergave widget beweegt soepel over het scherm.
Door een TransitionListener bezwaar tegen de MotionLayout widget, kunt u de voortgang van de animatie van dichtbij volgen.
motion_container.setTransitionListener (object: MotionLayout.TransitionListener // Meer code hier)
De TransitionListener interface heeft twee abstracte methoden en Android Studio genereert automatisch stubs voor hen.
De onTransitionCompleted () methode wordt aangeroepen wanneer een overgang van de ene constraintset naar een andere is voltooid. Laten we het voor nu gebruiken om de beperkingen van de Figuurweergave widget door de transitionToStart () methode erin.
onderdrukt plezier onTransitionCompleted (motionLayout: MotionLayout ?, currentId: Int) if (currentId == R.id.ending_set) // Keer terug naar oorspronkelijke constraint set motion_container.transitionToStart ()
De onTransitionChange () methode wordt aangeroepen elke keer dat de voortgang van de animatie verandert. Als zodanig is de voortgang een drijvende-kommawaarde die tussen nul en één ligt. De volgende code laat zien hoe u de SeekBar op basis van de voortgang van de animatie:
override plezier onTransitionChange (motionLayout: MotionLayout ?, startId: Int, endId: Int, progress: Float) seekbar.progress = ceil (progress * 100) .toInt ()
Ga je gang en voer de app opnieuw uit om nu twee animaties te bekijken.
In onze animatie, de Figuurweergave widget beweegt in een pad dat op een rechte lijn lijkt. Dat komt omdat het MotionLayout widget krijgt slechts twee punten om mee te werken: het startpunt, dat zich in de rechterbenedenhoek van het scherm bevindt, en het eindpunt, dat zich in de linkerbovenhoek van het scherm bevindt. Als u de vorm van het pad wilt wijzigen, moet u enkele tussenliggende punten opgeven, die tussen de begin- en eindpunten liggen. Om dit te doen, moet u nieuwe keyframes maken.
Voordat u begint met het maken van keyframes, moet u echter een KeyFrameSet element voor de Overgang element van je bewegingsscène. Binnen het nieuwe element bent u vrij om een onbeperkt aantal keyframes te maken.
De MotionLayout widget ondersteunt veel verschillende soorten keyframes. In deze zelfstudie werken we met slechts twee typen: KeyPosition frames en KeyCycle frames.
KeyPosition frames zijn degenen die u helpen de vorm van het pad te wijzigen. Zorg er tijdens het maken voor dat u de ID van de doelwidget opgeeft, een positie langs de tijdlijn, een getal tussen 0 en 100 en de gewenste X- of Y-coördinaten opgegeven als een percentage. De coördinaten kunnen ofwel relatief zijn ten opzichte van de werkelijke X- of Y-assen of relatief zijn ten opzichte van het pad zelf.
De volgende code laat zien hoe je twee keyframes maakt die de Figuurweergave widget om een pad te volgen dat botsingen met de knop en de zoekbalk vermijdt:
Als u de app nu uitvoert, ziet u een animatie die er als volgt uitziet:
U bent natuurlijk vrij om meer keyframes toe te voegen. Als u bijvoorbeeld het volgende sleutelframe aan het einde van de tijdlijn toevoegt, kunt u het volgende maken Figuurweergave widget volgt een meer golvend pad:
Door een KeyCycle kader samen met de KeyPosition frames, kunt u oscillaties toevoegen aan de animatie. Tijdens het maken moet u opnieuw de ID van de doelwidget opgeven, een positie langs de tijdlijn en de gewenste waarde van de eigenschap die heen en weer moet oscilleren. Bovendien moet u een oscillator configureren door details te geven, zoals de te gebruiken golfvorm en de golfperiode.
De volgende code maakt een KeyCycle frame dat een sinusgolfoscillator gebruikt om periodiek de Figuurweergave widget op 50 graden:
Wanneer u de app opnieuw uitvoert, ziet u een animatie die er als volgt uitziet:
Dit alles terwijl je op een knop hebt gedrukt om de animatie te starten. Zo'n knop is echter niet altijd nodig omdat de MotionLayout Met widget kunt u touch-eventhandlers rechtstreeks aan de widgets koppelen die worden geanimeerd. Momenteel ondersteunt het de on-click en de on-swipe-evenementen.
U kunt bijvoorbeeld het volgende toevoegen Bij klikken element, dat zich richt op de Figuurweergave widget, binnen de Overgang element van je bewegingsscène om de knop overbodig te maken:
Evenzo kunt u een OnSwipe element om de gebruiker toe te staan de Figuurweergave widget over het scherm. Bij het maken van het element moet u ervoor zorgen dat u de juiste richting voor het slepen en de zijkant van de widget opgeeft die als sleephandvat moet fungeren.
Als u de app opnieuw uitvoert, kunt u nu de. Slepen Figuurweergave widget.
Je weet nu hoe je de MotionLayout widget om snel complexe, interactieve animaties toe te voegen aan je Android-apps. U kunt er zeker van zijn dat de animaties zonder enige vertraging of jitter zullen worden uitgevoerd op de meeste apparaten, zolang u genestelde weergaven vermijdt.
Het is vermeldenswaard dat de komende releases van Android Studio een visuele Motion Editor bevatten, die de bruikbaarheid van de widget waarschijnlijk nog verder zal verbeteren..
Raadpleeg de officiële documentatie voor meer informatie.
