Begynnende Android Komme i gang med Fortune Crunch

Du har lært hvordan du lager Fortune Crunch på iPhone og Appcelerator her på Mobiletuts +. Nå lær hvordan du lager den på Android!

Hvis du ikke er kjent med Fortune Crunch, er det en app opprettet av Mark Hammonds for å vise hvordan du kommer i gang med iPhone-utvikling på dette nettstedet. Det ble senere plukket opp av John Schulz for å vise hvordan å utføre kryssplattformutvikling med Appcelerator. Og nå skal vi bruke den til å vise etableringen av et komplett Android-program fra start til slutt. Fortune Crunch viser en formuekake og lar brukeren trykke på den for å spre den åpne og vise en formue!


Android 101 opplæringsprogrammer:

  • Lær Java for Android Development: Introduksjon til Java
  • Lær Java for Android Development: Java Syntax
  • Lær Java for Android Development: Kontroller objekttype med Instanceof
  • Lær Java for Android Development: Arbeide med Arrays
  • Lær Java for Android Development: Refleksjon Basics
  • Introduksjon til Android SDK Development
  • Begynnende Android: Komme i gang med FortuneCrunch

Starter

Vi antar at du har alle verktøyene som er nødvendige for Android-utvikling allerede installert. Hvis ikke, sørg for at du laster ned og installerer Eclipse og Android SDK. For å fullføre bildestegene på egenhånd, trenger du også et bilderedigeringsprogram som i det minste kan endre størrelsen på bildene. Denne opplæringen er spesifikk for Eclipse, men du kan komfortabelt bruke den på Linux, Mac eller Windows operativsystemer. Du trenger ikke en Android-enhet for å fullføre denne opplæringen.

Hvis du vil følge med uten å skrive koden selv, er den tilgjengelig for nedlasting.

Trinn 1: Opprette Eclipse-prosjektet

Start med å lage et prosjekt som heter FortuneCrunch i Eclipse. Gjør dette ved å velge File-> New ... -> Android Project. Den resulterende skjermen har en rekke felt og alternativer du må fylle ut.

  • Skriv inn "FortuneCrunch" for prosjektnavnet
  • Hold "Opprett nytt prosjekt i arbeidsområde" valgt
  • Du vil kanskje bruke en annen plassering enn standardinnstillingen; ditt valg
  • Velg ditt Build Target for å være Google APIs Nivå 8 (Android 2.2)
  • Skriv inn "Fortune Crunch" som applikasjonsnavnet
  • Velg et passende pakkenavn, for eksempel "com.yourname.tutorial.fortunecrunch"
  • Merk av for "Opprett aktivitet" og merk den "FortuneCrunch"
  • Endelig sett Min SDK-versjonen til 3 (Android 1.5)

Hvis du har gjort alt dette, bør dialogen se slik ut:

Trinn 2: Opprette ressursene dine

Deretter må du opprette bildene applikasjonen skal fungere med. Programmet bruker et par bilder: en hel formue kake og en sprakk fortune cookie.

Du bør vurdere å lage tre forskjellige par bilder for skjermbilder med lav, middels og høy pixel tetthet. De opprinnelige bildene leveres for å redigere, eller du kan bruke bildene som er inkludert i kildekoden last ned.

Resurs kataloger for de spesifikke bildene ble opprettet med prosjektet: lpdi, mdpi og hdpi. Inne i katalogen for hver skjermoppløsning må de to bildes ressursene være de samme. Vi har kalt dem fortune_cracked.jpg og fortune_uncracked.jpg. Når du har gjort dette, viser prosjektutforskervisningen dem:

Tips: Hvis du redigerte dem og lagret dem i disse katalogene utenfor Eclipse, høyreklikker du på prosjektet og velger oppdatering. De skal da dukke opp.

Trinn 3: Definere Fortune String

Når formuekaken er åpnet, viser den brukerens formue. La oss nå definere formuestrengen som en ressurs. Gjør dette ved å åpne ressursfilen /res/values/strings.xml. Lag en ny streng kalt "formue" med teksten "Happy Android Hacking!"

Det skulle nå se ut som:

   Glad Android Hacking! Fortune Crunch 

Trinn 4: Opprette layout

Deretter må du utforme layoutressursfilen din. Denne filen dikterer hvordan skjermbildet for Fortune Crunch-programmet vises. Prosjektveiviseren lager en standardfil for deg som heter /res/layout/main.xml. Rediger denne filen og fjern alle kontrollene.

Fortune Crunch brukergrensesnittet har to forskjellige tilstander. Den første er et bilde av en komplett formuekake. Den andre er et bilde av en sprakk fortune cookie med tekst som viser over formue inni. Den andre av disse to er de mer komplekse, så la oss designe det først da utformingen av det enklere vil komme ut av det med nesten ingen ekstra innsats.

For å gjøre dette, bruk en RelativeLayout for å inneholde en ImageView og en TextView. ImageView skal senteres horisontalt. Du vil ønske å gi det passende høyde og bredde tall for å begrense visningsstørrelsen. Tekstvisningen skal settes til layout_alignBottom for ImageView. Deretter bruker du layout_marginBottom du kan flytte den for å overlay formue. Dette høres komplisert, så la oss se på den resulterende XML:

     

Dette oppsettet fungerer bra i portrettmodus. Vi bruker dp for alle målinger, så det skaleres på riktig måte med skjermstørrelsen. Vi bruker også dp for tekststørrelsen, slik at den også skaleres med skjermstørrelsen. Du vil ikke bruke sp for teksten, fordi den vil skalere med brukerens skriftstørrelse - ikke hva du vil ha for et slikt layout. Oppsettvisningen vil se slik ut:

Men hvis du bytter landskapsmodus, ser du at dette ikke virker!

Trinn 5: Opprette en alternativ landskapsplanlegging

La oss også gi en egen landskapsoppsettfil. Det er en veldig lik design, bortsett fra at bildestørrelsen er byttet slik at den bruker det vertikale rommet. Følgende xml-fil må oppgi main.xml og plasseres i mappen / res / layout-land, som du må opprette først.

     

Når begge filene er layoutmapper, vil explorervisningen se slik ut:

Oppsettvisningen for landskapsoppsettet ser slik ut:

Trinn 6: Konfigurere oppsettets innledende visning

Nå som du har riktige layoutfiler for både stående og liggende moduser for den sprukne cookie-tilstanden, må du returnere den tilbake til den ikke-sprukne versjonen for opprinnelig visning. Gjør dette ved å bytte src-attributtet til ImageView til @ drawable / fortune_uncracked og legg til et siktattributt til TextView og sett det til "borte".

Trinn 7: Legge til Click Handler

Når brukeren klikker eller tapper på fortune-cookien, bytter den tilstand til den sprukne cookien med formildeteksten. For å aktivere denne funksjonen, legg til klikkbehandleren til riktig kontroll som brukeren klikker på. En rask måte å se på for klikk på hele skjermen er å registrere klikkbehandleren med foreldrekontrollen for alle barnevisninger, i dette tilfellet RelativeLayout du organiserte alle skjermkontrollene. Kontroller at RelativeLayout-kontrollen har sitt klikkbare attributtsett til sant. Legg deretter til påClick-attributtet og sett det til toggleFortune.

Din portrettoppsettfil skal nå se slik ut:

     

Du må gjøre lignende endringer i landskapsoppsettfilen.

Trinn 8: Implementere Click Handler

Oppsettfilene dine er ferdige. Nå må du implementere klikkbehandleren i Java i søknadens eneste aktivitetsklasse. Åpne filen FortuneCrunch.java og legg til følgende metode:

 public void toggleFortune (Vis visning) TextView fortune = (TextView) findViewById (R.id.fortune_text); ImageView cookie = (ImageView) findViewById (R.id.fortune_view); // bruk tekstens synlighet for å bestemme modusen hvis (fortune.getVisibility () == View.GONE) fortune.setVisibility (View.VISIBLE); cookie.setImageResource (R.drawable.fortune_cracked);  ellers fortune.setVisibility (View.GONE); cookie.setImageResource (R.drawable.fortune_uncracked);  

Denne metoden henter Java-objekter som representerer både TextView og ImageView. For det første er synligheten til TextView bestemt. Denne informasjonen kan brukes til å skifte skjermtilstanden mellom den sprukne og hele informasjonskapselen. Basert på fortune-teksttilstanden, er visningen av Vis-visning og kilde som skal vises, bestemt. Kildebildet i ImageView endres ved å kalle metoden setImageViewResource () med identifikatoren for det riktige bildet som skal vises.

Trinn 9: Undersøk onCreate () Metoden

Mens du redigerte FortuneCrunch.java, merket du sannsynligvis aktivitetens onCreate () -metode. Det ser slik ud og blir opprettet når prosjektet er opprettet:

 / ** Kalt når aktiviteten er først opprettet. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);  

Den eneste metoden ring her du bryr deg om akkurat nå, er setContentView () -metoden. Den refererer til layoutfilen du opprettet: main.xml. Derfor må landskaps- og portrettmodusoppsettfilene dele samme filnavn. Hvis du hadde kalt dem begge "crunch.xml", måtte anropet endres til:

 setContentView (R.layout.crunch); 

Nå vil Android-plattformen laste den aktuelle main.xml-layoutfilen basert på om enheten er i liggende eller stående modus. Hvis filene ble oppnevnt annerledes, ville systemet enten ikke finne layoutressursen eller ikke laste den riktig.

Trinn 10: Opprette en feilsøkingskonfigurasjon

Nå som du er ferdig med koding, vil du sannsynligvis kjøre og teste søknaden din. Det første du bør gjøre er å opprette en Eclipse Debug Configuration. Gjør dette ved å klikke på Run-> Debug Configurations ... På Android-fanen, sett prosjektet til FortuneCrunch. Du kan navngi konfigurasjonen din slik du vil. Jeg liker å navngi konfigurasjonene mine nøyaktig det samme som prosjektet.

I Mål-fanen foretrekker jeg manuelt å velge målet hver gang. Du kan også bruke feilsøkingskonfigurasjonen til å konfigurere nettverkshastigheter for emulatoren, og mange andre alternativer. Disse gjelder ikke for Fortune Crunch.

Trinn 11: Kjører Fortune Crunch i emulatoren og på enheten

Du kan kjøre Fortune Crunch ved å velge Debug Configuration og velge Debug. Velg enten en tilkoblet Android-enhet, en kjørende emulator, eller start en ny emulator. Denne skjermen håndterer hvordan du starter appen din:

Og der har du det!

Her er Fortune Crunch kjører i HVGA-emulatoren i liggende modus:

Her er Fortune Crunch kjører på Nexus One i portrettmodus, ved hjelp av DDMS-perspektivet av Eclipse for å fange det:

Konklusjon

I denne opplæringen har du lært hvordan du implementerer Fortune Crunch-programmet på Android-plattformen. Du gjorde dette ved å lage grafikk på riktig størrelse. Deretter opprettet du layoutfiler for både landskap og portrettmoduser. Til slutt tok du alt sammen ved å håndtere klikk på skjermen for å knuse den cookien. Du har bare ripet overflaten av Android-utviklingen. Sjekk ut alle de andre gode opplæringene på Mobiletuts + for å dykke dypere inn i Android-utviklingen.

Vi håper du likte dette og ser frem til din tilbakemelding.

Glad Android Hacking!

Om forfatterne

Mobilutviklere Lauren Darcey og Shane Conder har medforfatter flere bøker om Android-utvikling: en grundig programmeringsbok med tittel Android Wireless Application Development og Sams TeachYourself Android Application Development i 24 timer. Når de ikke skriver, bruker de sin tid på å utvikle mobil programvare hos deres firma og tilby konsulenttjenester. De kan nås via e-post til [email protected], via bloggen deres på androidbook.blogspot.com, og på Twitter @androidwireless.

Trenger du flere hjelpeskrivende Android-apper? Se våre nyeste bøker og ressurser!

   


Relaterte opplæringsprogrammer:

  • Lær Java for Android Development: Introduksjon til Java
  • Lær Java for Android Development: Java Syntax
  • Introduksjon til Android SDK Development
  • Vanlige Android Virtual Device Configurations
  • Starte Maps In-App
  • Aktivere brukere til å sende e-post i app
  • Bruke varsler, skåler og varsler
  • Opprette enkle brukerformularer