En hund halder ind i en saloon: En tutorial på Android's ViewFlipper-widget

Med Halloween lige bag os har jeg nu en spand slik, der sidder foran og midt på min køkkenbord. Det kalder mit navn, når ingen andre er rundt for at høre. Så er jeg nødt til at spille stum, når min søn spørger, hvad der skete med den lilla Laffy Taffy, han havde reddet. Den med den forfærdelige vittighed på indersiden af ​​indpakningen, om en hund, der haltede ned i en saloon og meddeler: "Jeg leder efter den mand, der skød min pote!" Jeg gætter på, at hvis min søn tilfældigvis læser mit indlæg i denne uge, bliver jeg buset. Men jeg besluttede at inkludere den særlige Laffy Taffy perle i denne tutorial, der demonstrerer Android's ViewFlipper-widget.

Hvad er en ViewFlipper?

ViewFlipper er en smart widget, der kan bruges til at skyde visninger ind og ud af brugerens aktuelle visningsport. Til tider synes jeg det er en praktisk UI-erstatning for faneblad-widget'en (som jeg tidligere har sagt, at jeg ikke er alt for glad for). Hvad jeg mest kan lide ved ViewFlipper er den smarte brugeroplevelse. Det er den samme slags effekt, der er fremherskende på Windows Phone 7, og blev brugt af Google til at jazze den seneste inkarnation af Android Market.

På trods af, at widgeten først for nylig er blevet popularitet på Android, har den eksisteret siden version 1.0 af API. (Læs den officielle ViewFlipper-dokumentation.) Jeg tror dog ikke, at udviklerdokumentationen gør det øjeblikkeligt indlysende, hvordan man bruger widget'en i dine applikationer. Især kan det være lidt hårdt at forvirre gennem glide ind og ud animation overgange. Måske ikke så hård som at ignorere den slik skål, der sidder på min køkkenbænken, og forsikre mig om, at ingen vil lægge mærke til, hvis jeg kun tager en Laffy Taffy til, men alligevel kræver det, at du tager dit tænkehætte på. Hvis du gerne vil downloade og importere hele projektet, der er beskrevet i denne tutorial, kan du gøre det her. Ellers, lad os begynde med et nyt projekt i Eclipse.

ViewFlipper widget-tutorial

1. Opret et nyt Android-projekt. Målret mod ethvert API større end 1, 6.

2. I din mappe / res skal du bruge et main.xml-layout. Bemærk, hvordan ViewFlipper-kontrollen indeholder to lineære layouts; disse layout er, hvad widgeten vil iterere, når du kalder de næste () og forrige () metoder i din kode. Vores layout er enkle og indeholder bare en enkelt tekstvisning, men du kan bruge enhver form for layout, du har brug for i din applikation.

 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 = "lodret" > 
 android: layout_width = "fill_parent" 
 android: layout_height = "wrap_content" 
 android: tyngdekraft = "center" 
 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: gravitation = "center" > 
 android: layout_height = "wrap_content" 
 android: layout_width = "wrap_content" 
 android: textStyle = "fed" 
 android: textColor = "# 00ff00" 
 android: textSize = "14sp" 
 android: text = "En hund halder ind i en salong og siger ..." > 
 android: layout_width = "fill_parent" 
 android: layout_height = "fill_parent" 
 android: gravitation = "center" > 
 android: layout_height = "wrap_content" 
 android: layout_width = "wrap_content" 
 android: textStyle = "fed" 
 android: textColor = "# 00ff00" 
 android: textSize = "14sp" 
 android: text = "Jeg leder efter den mand, der skød min pote!" > 

3. Nu kommer den vanskelige del. Opret en mappe kaldet / anim i dit / res-bibliotek. I mappen skal du oprette fire XML-filer til at repræsentere de fire overgange, vi har brug for. Brug et par minutter på at se på x delta-værdierne, så du er sikker på, at du forstår den virkning, vi håber at opnå.

 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: varighed = "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: varighed = "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: varighed = "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: varighed = "1400" /> 

4. Lad os nu gå til vores / src-mappe og tilføje Main.java-filen. Vi opretter et par private variabler og bruger on create metoden til at vedhæfte vores ViewFlipper-widget.

 Main.java 
 pakke com.authorwjf; 
 import android.app.Aktivitet; 
 import android.os.Bundle; 
 import android.view.MotionEvent; 
 import android.widget.ViewFlipper; 
 public class Main udvider aktivitet { 
 privat ViewFlipper vf; 
 privat float lastX; 
 / ** Ringes op, når aktiviteten først oprettes. * / 
 @Override 
 offentligt tomrum onCreate (Bundle gemtInstanceState) { 
 super .onCreate (gemtInstanceState); 
 setContentView (R.layout. main ); 
 vf = (ViewFlipper) findViewById (R.id. view_flipper ); 
 } 
 } 

5. Det sidste trin er at tilføje en touch handler til vores Main.java-aktivitet. On-touch-behandleren bruger en simpel teknik til at sammenligne vores sidste x-position med den nuværende til at bestemme, om brugeren stryger fra venstre mod højre eller højre mod venstre. Vi bruger disse oplysninger, når vi beslutter, hvilke animationer der skal tildeles til ViewFlipper, og om vi skal påkalde den næste () eller forrige () metode på kontrollen.

 Main.java 
 @Override 
 offentlig boolsk onTouchEvent (MotionEvent touchevent) { 
 switch (touchevent.getAction ()) 
 { 
 sag MotionEvent. ACTION_DOWN : 
 { 
 lastX = touchevent.getX (); 
 pause ; 
 } 
 sag MotionEvent. ACTION_UP : 
 { 
 float currentX = touchevent.getX (); 
 if (lastX <nuværendeX) 
 { 
 hvis (vf.getDisplayedChild () == 0) brud ; 
 vf.setInAnimation ( dette, R.anim. in_from_left ); 
 vf.setOutAnimation ( dette, R.anim. out_to_right ); 
 vf.showNext (); 
 } 
 hvis (lastX> nuværendeX) 
 { 
 hvis (vf.getDisplayedChild () == 1) brud ; 
 vf.setInAnimation ( dette, R.anim. i_from_right ); 
 vf.setOutAnimation ( dette, R.anim. out_to_left ); 
 vf.showPrevious (); 
 } 
 pause ; 
 } 
 } 
 vende tilbage falsk ; 
 } 

Der har du det - en ret snazet måde at præsentere en temmelig halt vittighed på. Du kan lege med egenskaben varighed i mappen / anim for at fremskynde eller bremse overgangen. Et stillbillede gør det ikke retfærdigt, så hvis du får et minut, skal APK'en indlæses på din telefon eller en af ​​emulatorerne og kigge efter.

Indtil næste gang kan du nyde den resterende Halloween-slik. Jeg ved det.

Figur A

Figur B

© Copyright 2021 | pepebotifarra.com