En hund halter i en salong: En tutorial på Android's ViewFlipper-widget

Med Halloween rett bak oss har jeg nå en bøtte med godteri som sitter foran og midt på kjøkkenbenken min. Det kaller navnet mitt når ingen andre er rundt for å høre. Så må jeg spille stum når sønnen min spør hva som skjedde med den lilla Laffy Taffy han hadde reddet. Den med den forferdelige vitsen på innsiden av innpakningen, om en hund som haltet ned i en salong og kunngjør: "Jeg leter etter mannen som skjøt labben min!" Jeg antar at hvis sønnen min tilfeldigvis leste innlegget mitt denne uken, blir jeg bustet. Men jeg bestemte meg for å inkludere den spesielle Laffy Taffy-perlen i denne opplæringen som demonstrerer Androids ViewFlipper-widget.

Hva er en ViewFlipper?

ViewFlipper er en fin widget som kan brukes til å skyve visninger inn og ut av brukerens nåværende visningsport. Noen ganger synes jeg det er en praktisk UI-erstatning for fanevidget (som jeg har uttalt før jeg ikke er altfor glad i). Det jeg liker mest med ViewFlipper er den glatte brukeropplevelsen. Det er den samme typen effekt som er utbredt på Windows Phone 7, og ble brukt av Google til å jazz opp den siste inkarnasjonen av Android Market.

Til tross for at widgeten bare nylig fikk popularitet på Android, har den eksistert siden versjon 1.0 av API. (Les den offisielle ViewFlipper-dokumentasjonen.) Jeg tror imidlertid ikke at utviklerdokumentasjonen gjør det umiddelbart åpenbart hvordan du bruker widgeten i applikasjonene dine. Spesielt kan det være litt tøft å gå gjennom å skyve inn og ut animasjonsoverganger. Kanskje ikke så tøft som å ignorere godteribollen som sitter på kjøkkenbenken min, og forsikre meg om at ingen vil legge merke til om jeg tar bare en Laffy Taffy til, men det krever likevel at du tar på deg tankegodset ditt. Hvis du vil laste ned og importere hele prosjektet som er detaljert i denne opplæringen, kan du gjøre det her. Ellers, la oss begynne med et nytt prosjekt i Eclipse.

ViewFlipper widget-opplæring

1. Lag et nytt Android-prosjekt. Målrett et hvilket som helst API som er større enn 1.6.

2. I mappen / res må du ha en main.xml-layout. Legg merke til hvordan ViewFlipper-kontrollen inneholder to lineære oppsett; disse layoutene er det widgeten vil itere gjennom når du ringer til neste () og forrige () metoder i koden. Oppsettene våre er enkle og inneholder bare en enkelt tekstvisning, men du kan bruke alle slags oppsett du trenger i applikasjonen din.

 main.xml 
 "1.0" encoding = "utf-8" ?> 
 "Http://schemas.android.com/apk/res/android" 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" 
 android: orientering = "vertikal" > 
 android: layout_width = "fill_parent" 
 android: layout_height = "wrap_content" 
 android: gravitasjon = "sentrum" 
 android: text = "Vis Flipper Demo" /> 
 android: layout_margin = "6dip" 
 android: id = "@ + id / view_flipper" 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" > 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" 
 android: gravitasjon = "sentrum" > 
 android: layout_height = "wrap_content" 
 android: layout_width = "wrap_content" 
 android: textStyle = "fet" 
 android: textColor = "# 00ff00" 
 android: textSize = "14sp" 
 android: text = "En hund halter i en salong og sier ..." > 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" 
 android: gravitasjon = "sentrum" > 
 android: layout_height = "wrap_content" 
 android: layout_width = "wrap_content" 
 android: textStyle = "fet" 
 android: textColor = "# 00ff00" 
 android: textSize = "14sp" 
 android: text = "Jeg ser etter mannen som skjøt labben min!" > 

3. Nå kommer den vanskelige delen. Lag en mappe kalt / anim i / res-katalogen. I mappen vil du opprette fire XML-filer for å representere de fire overgangene vi trenger. Bruk noen minutter på å se på x deltaverdiene, så er du sikker på at du forstår effekten vi håper å oppnå.

 out_to_left.xml 
 "Http://schemas.android.com/apk/res/android" 
 android: shareInterpolator = "falsk" > 
 android: fromXDelta = "0%" android: toXDelta = "-100%" 
 android: fromYDelta = "0%" android: toYDelta = "0%" 
 android: varighet = "1400" /> 
 out_to_right.xml 
 "Http://schemas.android.com/apk/res/android" 
 android: shareInterpolator = "falsk" > 
 android: fromXDelta = "0%" android: toXDelta = "100%" 
 android: fromYDelta = "0%" android: toYDelta = "0%" 
 android: varighet = "1400" /> 
 in_from_left.xml 
 "Http://schemas.android.com/apk/res/android" 
 android: shareInterpolator = "falsk" > 
 android: fromXDelta = "-100%" android: toXDelta = "0%" 
 android: fromYDelta = "0%" android: toYDelta = "0%" 
 android: varighet = "1400" /> 
 in_from_right.xml 
 "Http://schemas.android.com/apk/res/android" 
 android: shareInterpolator = "falsk" > 
 android: fromXDelta = "100%" android: toXDelta = "0%" 
 android: fromYDelta = "0%" android: toYDelta = "0%" 
 android: varighet = "1400" /> 

4. La oss nå gå til mappen / src og legge til Main.java-filen. Vi oppretter et par private variabler, og bruker on create-metoden for å legge ved ViewFlipper-widgeten vår.

 Main.java 
 pakke com.authorwjf; 
 import android.app.Aktivitet; 
 import android.os.Bundle; 
 import android.view.MotionEvent; 
 import android.widget.ViewFlipper; 
 offentlig klasse Hoved utvider aktivitet { 
 privat ViewFlipper vf; 
 privat float lastX; 
 / ** Ringes når aktiviteten først opprettes. * / 
 @Overstyring 
 public void onCreate (Bundle savedInstanceState) { 
 super .onCreate (savedInstanceState); 
 setContentView (R.layout. main ); 
 vf = (ViewFlipper) findViewById (R.id. view_flipper ); 
 } 
 } 

5. Det siste trinnet er å legge til en berøringsbehandler til Main.java-aktiviteten vår. Berøringsbehandleren vil bruke en enkel teknikk for å sammenligne vår siste x-posisjon med den gjeldende for å bestemme om brukeren sveiper venstre mot høyre eller høyre mot venstre. Vi bruker denne informasjonen når vi bestemmer hvilke animasjoner som skal tilordnes ViewFlipper og om vi skal påkalle neste () eller forrige () metode på kontrollen.

 Main.java 
 @Overstyring 
 offentlig boolsk onTouchEvent (MotionEvent touchevent) { 
 bryter (touchevent.getAction ()) 
 { 
 sak MotionEvent. ACTION_DOWN : 
 { 
 lastX = touchevent.getX (); 
 pause ; 
 } 
 sak MotionEvent. ACTION_UP : 
 { 
 float currentX = touchevent.getX (); 
 if (lastX <currentX) 
 { 
 hvis (vf.getDisplayedChild () == 0) bryte ; 
 vf.setInAnimation ( dette, R.anim. in_from_left ); 
 vf.setOutAnimation ( dette, R.anim. out_to_right ); 
 vf.showNext (); 
 } 
 if (lastX> currentX) 
 { 
 hvis (vf.getDisplayedChild () == 1) bryte ; 
 vf.setInAnimation ( dette, R.anim. i_from_right ); 
 vf.setOutAnimation ( dette, R.anim. out_to_left ); 
 vf.showPrevious (); 
 } 
 pause ; 
 } 
 } 
 return falsk ; 
 } 

Der har du det - en ganske lun måte å presentere en ganske halt vits på. Du kan spille med varighetseiendommen i / anim-mappen for å fremskynde eller senke overgangen. Et stillbilde gjør det ikke rettferdighet, så hvis du får et øyeblikk, laster APK-en på telefonen eller en av emulatorene og tar en titt.

Inntil neste gang kan du glede deg over resterende Halloween-godteri. Jeg vet at jeg vil.

Figur A

Figur B

© Copyright 2021 | pepebotifarra.com