1. Location:
  2. / Computer learning >> Datamaskin læring >> Kunnskap om programmering >> Mobil Utvikling >>

En introduksjon til Android Transitions

An Introduksjon til Android-Transitions
44
Del
37
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

Android overganger rammeverket lar deg konfigurere utseendet på endringer i din app brukergrensesnitt. Du kan animere endringer i en app-skjermen, definerer hver fase som en scene og kontrollere hvordan overgangen endrer app utseende fra en scene til en annen.

I denne opplæringen, vil vi bygge en enkel app med en animert overgang i det. Dette vil innebære utarbeidelse av layout og strekkbare filer i XML, og deretter konfigurere og bruke overgangen i Java. Vi vil definere to scener hvor de samme visnings elementene er ordnet på en annen måte på skjermen. Som vi bruker en overgang, vil Android automatisk animere endringen fra en scene til en annen.

1. Opprett App

Trinn 1

Start med å skape en ny app i din valgte IDE. Du trenger et minimum SDK av 19 for de overganger klasser, slik at du må ta forholdsregler hvis du har tenkt på å støtte eldre versjoner.

Gi appen en hoved aktivitet og layout fil, velge navnet start_layout.xml
for oppsettet. Vi vil legge til en annen layout filen senere, ved hjelp av overgangen til å endre fra den ene til den andre. Følgende bilder viser prosessen i Android Studio.

Trinn 2

La oss nå forberede noen strekkbare figurer til bruk i overgangen. Vi vil bruke fire sirkel figurer med forskjellige fargede gradert fyll. I appens drawables ressurs katalog, begynne med å lage en ny fil med navnet shape1.xml
. Skriv inn følgende form:?
≪ xml version = "1.0" encoding = "UTF-8" > < form xmlns:? Android = "http://schemas.android.com/apk/res/android "android: dither =" true "android: shape =" oval "> < gradient android: endColor = "# 66ff0000" android: gradientRadius = "150" android: startColor = "# ffffcc00" android: type = "radial" android: useLevel = "false" /> < størrelse android: height = "100dp" android: width = "100dp" /> < /form >

Formen er en sirkel med en radial gradient fyll. Alle fire av formene vil være den samme med unntak av de farger som brukes i dem. Du ønsker kanskje å lage ulike versjoner av drawables for forskjellige enhets tettheter. Legg til shape2.xml
neste:
< xml version = "1.0" encoding = "utf-8" > < shape xmlns:? Android = "http://schemas.android. com /apk /res /android "android: dither =" true "android: shape =" oval "> < gradient android: endColor = "# 66ffcc00" android: gradientRadius = "150" android: startColor = "# ff00ff00" android: type = "radial" android: useLevel = "false" /> < størrelse android: height = "100dp" android: width = "100dp" /> < /form >

Nå kan du legge shape3.xml Bilde:?
< xml version = " 1.0 "encoding =" UTF-8 "? > < shape xmlns: android =" http://schemas.android.com/apk/res/android "android: dither =" true "android: shape =" oval " > < gradient android: endColor = "# 6600ff00" android: gradientRadius = "150" android: startColor = "# ff0000ff" android: type = "radial" android: useLevel = "false" /> < størrelse android: height = "100dp" android: width = "100dp" /> < /form >

Til slutt legger shape4.xml Bilde:?
< xml version = " 1.0 "encoding =" UTF-8 "? > < shape xmlns: android =" http://schemas.android.com/apk/res/android "android: dither =" true "android: shape =" oval " > < gradient android: endColor = "# 660000ff" android: gradientRadius = "150" android: startColor = "# ffff0000" android: type = "radial" android: useLevel = "false" /> < størrelse android: height = "100dp" android: width = "100dp" /> < /form >

Vi vil bruke disse figurene som ImageButtons i de to layout scener

2.. Lage layout Scenes

Trinn 1

La oss definere de to scenene vi vil overgangen mellom som XML-oppsett. Start med de viktigste layout filen du har lagt da du opprettet app, start_layout.xml. Åpne den, og bytt til kategorien XML redigering. Bruk en RelativeLayout som vist nedenfor:
< RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android.com/tools "android: layout_width =" match_parent "android: layout_height =" match_parent "android: bakgrunn =" # ff000000 "android: id =" + id /base "verktøy: kontekst =". TransitionsActivity "> < /RelativeLayout > < p> Vi vil legge til en bakgrunnsfarge og ID for layout. ID er viktig å sikre at Android overganger mellom scenene, vi skal bruke samme ID i den andre scenen. Når du overgang mellom to scener, vil Android animere endringene så lenge hver visning har samme ID i begge scener, ellers vil den behandle synspunktene som annerledes og bare visne dem inn eller ut når overgangen skjer.

Inne i RelativeLayout, legger en ImageButton for hver form vi laget:
< ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn1" android: src = " @ teikne /shape1 "android: bakgrunn =" # 00000000 "android: contentDescription =" shape "android: layout_alignParentLeft =" true "android: layout_alignParentTop =" true "android: onclick =" changeScene "/> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn2" android: src = "@ teikne /shape2" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentRight = "true" android: layout_alignParentTop = "true" android: onclick = "changeScene" /> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn3" android : src = "@ teikne /shape3" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentLeft = "true" android: layout_alignParentBottom = "true" android: onclick = "changeScene" /> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn4" android: src = "@ teikne /shape4" android: bakgrunn = "# 00000000" android: contentDescription = "form "android: layout_alignParentRight =" true "android: layout_alignParentBottom =" true "android: onclick =" changeScene "/>

Legg merke til at hver figur knappen har en ID, som vil være den samme i den andre layouten vi skaper, og en onClick attributt. Vi vil inkludere denne metoden i hoved aktivitet senere og vil starte overgangen når brukeren klikker noen av figurene.

Du vil se en forhåndsvisning av oppsettet i din IDE, men i enkelte tilfeller gradient og /eller åpenhet vil ikke vises før du faktisk kjøre programmet på en enhet eller emulator. Formene er arrangert for å sitte i hvert hjørne av skjermen, som vist nedenfor.

Trinn 2

Den første layouten vi laget vil representere starten på overgangen. La oss nå lage en ny layout fil for scenen overgangen vil endre til. Legg til en ny fil i programmet ditt layout ressurser katalogen, og kalte den end_layout.xml
. Bytt til fanen tekstredigering, og oppgi følgende:
< RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android .com /verktøy "android: layout_width =" match_parent "android: layout_height =" match_parent "android: bakgrunn =" # ff000000 "android: id =" + id /base "verktøy: kontekst =". TransitionsActivity "> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn1" android: src = "@ teikne /shape1" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentRight = "true" android: layout_alignParentBottom = "true" android: onclick = "changeScene" /> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn2" android: src = "@ teikne /shape2" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentLeft = "true" android: layout_alignParentBottom = "true" android: onclick = "changeScene" /> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn3" android: src = "@ teikne /shape3" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentRight = "true" android: layout_alignParentTop = "true" android: onclick = "changeScene" /> < ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: id = "+ id /btn4" android: src = "@ teikne /shape4" android: bakgrunn = "# 00000000" android: contentDescription = "shape" android: layout_alignParentLeft = "true" android: layout_alignParentTop = "true" android: onclick = "changeScene" /> < /RelativeLayout >

Ta deg tid til å se på oppsettet kode. Den er identisk med den første utformingen med unntak av posisjoner av form knappene. Hver form er i motsatt hjørne fra sin posisjon i det første oppsettet. Overgangen vil derfor bytte figurer, flytte sine posisjoner diagonalt over skjermen.

3. Overgangen mellom scener

Trinn 1

Vi har de to oppsettene definert, la oss nå bruke en overgang å flytte mellom dem. Åpne app hovedaktivitet klasse. Du trenger følgende import uttalelser:
import android.transition.AutoTransition, importere android.transition.Scene, importere android.transition.Transition, import android.view.View, import android.view.ViewGroup; import android.view .animation.AccelerateDecelerateInterpolator, import android.widget.RelativeLayout, import android.transition.TransitionManager;

Inne i aktivitet klassen erklæring, før onCreate metoden, legge til følgende eksempel variabler vil vi bruke til å gjelde overgangen: Twitter //scener til transitionprivate Scene scene1, Scene2; //overgang å flytte mellom scenesprivate Transition overgang; //flagg for å bytte mellom scenesprivate boolsk starte;
Trinn 2

La oss nå forberede seg på overgangen, som vil begynne når brukeren klikker på en form. I onCreate, etter den eksisterende koden din IDE har kommet inn, legger du til følgende:
//få oppsettet IDRelativeLayout baseLayout = (RelativeLayout) findViewById (R.id.base); //først sceneViewGroup startViews = (ViewGroup) getLayoutInflater ( ) .inflate (R.layout.start_layout, baseLayout, false); //andre sceneViewGroup endViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.end_layout, baseLayout, false);

Først definerer vi basen scene , som er ID vi ga den inneholder oppsettet i både sceneoppsettfiler. Neste vi definerer de to scenene vi er overgangen mellom, med angivelse deres layout filnavn og den inneholder basen scenen. Dette vil fortelle Android vi vil overgangen visninger innen to scener, behandling av enhver visning med samme ID i begge scener som samme objekt, slik at det animerer endringen fra en scene til en annen.

Neste definerer vi de to scenene vi ønsker å overgang mellom, fortsatt i onCreate:
//skape de to scenesscene1 = new Scene (baseLayout, startViews); Scene2 = new Scene (baseLayout, endViews);

Vi passerer basen layout og relevante scene oppsett til hver konstruktør. Nå kan vi referere til disse scenene når du definerer overgangen

Trinn 3

La oss komme i overgangen forberedt, fremdeles i onCreate.
//Lage overgang, satt propertiestransition = new AutoTransition ( ); transition.setDuration (5000); transition.setInterpolator (ny AccelerateDecelerateInterpolator ()); //initial flagstart = true;

Android tilbyr en rekke overgangs typer avhengig av hvordan du vil at endringene i scenene for å være animert. I dette tilfellet velger vi en AutoTransition, så Android vil beregne hvordan å gjøre endringen basert på egenskapene som er endret mellom scener. Se Transitions referanse for flere alternativer.

Vi satt en varighet og interpolator for overgangen. Du kan eventuelt også angi en forsinket start for endringen. Endelig initial vi boolsk flagg for å true. For enkelhets skyld vil vi bruke dette til å bytte mellom de to scenene når brukeren klikker en form, men dette er bare for å demonstrere funksjonaliteten involvert.

Trinn 4

Husk at vi har lagt en onClick attributt til formen knappene når vi opprettet oppsettet XML. La oss legge til at metoden til den aktivitet nå:
public void changeScene (Vis v) {//sjekker flagg if (start) {TransitionManager.go (Scene2, overgang); start = false; } Else {TransitionManager.go (scene1, overgang); start = true; }}

Vi bruker TransitionManager å overgang fra dagens scene til den andre scenen, med boolsk flagg holde styr på hvilke vi er på. Vi spesifiserer Transition objektet vi opprettet for å skreddersy hvordan endringen utfolder seg.

Du skal nå være i stand til å kjøre programmet ditt og se overgangen når du klikker på en form. Hver gang du klikker, overgangen bør flytte figurene sakte til de motsatte hjørnene, deretter bytte dem tilbake når du klikker på nytt.

Konklusjon

I denne opplæringen vi har egentlig bare begynt å utforske hva du kan gjøre med Android overganger rammeverket. Å utvikle dine overganger videre, sjekk ut de ekstra metoder i TransitionManager klassen, for eksempel beginDelayedTransition og transitionTo. Du kan også bruke en TransitionSet å kombinere flere overganger, for eksempel for å konfigurere falming og flytte effekter. Avhengig av kompleksiteten i overgangene, kan du også dra nytte av TransitionValues ​​klassen, noe som gir en referanse til dataverdier som er relevante for overgangen. For mer om hva du kan gjøre med scener, sjekk ut Scene klassen også.