Ett enkelt Androidspel, tutorial Detta är en introduktion till hur du kommer igång med Android-programmering för smart phones. I huvuduppgiften gör du ett enkelt spel, ”Vilket ord tänker jag på?”, och laddar ned det till en telefon. Vill du gå vidare på egen hand hittar du mer information på https://www.kth.se/social/program/tidaa/page/prova-pa-android/. Första applikationen, Hello World Skapa ett nytt projekt Öppna utvecklingsmiljön Android Studio. Välj alternativet ”Start a new Android Studio project” alternativt File > new project… från menyn. Skriv, i den nya vyn vid ”Application Name”, ett namn på din applikation, t.ex. Hello World. Låt i övrigt de förvalda värdena stå kvar oförändrade. Klicka på Next. I nästa vy kontrollerar du att (endast) alternativet ”Phone and Tablet” är förbockat samt att ”Minimum SDK” är satt till ”API 8, Android 2.2 (Froyo)”. Välj Next och i den nya vyn ”Blank Activity”, och därefter Next igen. I den sista vyn kan du låta de förvalda värdena stå kvar. ”Activity Name” syftar på den klass som kommer att hålla det grafiska gränssnittet och andra viktiga komponenter i applikationen; ”Layout Name” syftar på den fil som kommer att innehålla definitionen av alla grafiska komponenter och hur dessa ska presenteras. Välj Finish (det tar ett tag innan alla komponenter i projektet har skapats). Studera filerna i projektet Du ser nu ditt nya projekt till vänster i Android Studio. Om det inte redan är öppet, öppna projektet (klicka på den lilla triangeln) och därefter java o.s.v. tills du ser din Activity-klass (här: MainActivity). Öppna filen. Det enda denna kod gör är att, i metoden ”onCreate”, skapa en vy, vars layout definieras i filen activity_main.xml. Öppna filen res/res/layout/activity_main.xml. Notera att du, via tabbarna “Design” och ”Text” längst ned, kan växla mellan hur layouten kommer att se ut på en telefon respektive den XML-kod som definierar layouten. Testa applikationen Testkör applikationen genom att, från menyn, välja Run/Run ”app”. I det fönster som visas, ”Choose Device”, kan du använda det förvalda alternativet; välj ”OK”. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -1- En emulator startar (det tar ett tag). Emulatorn är en ”virtuell telefon” som du kan testa din applikation med. I emulatorn visas en rubrikrad med applikationens namn samt en hälsningsfras, som är hämtad från filen res/values/strings.xml. • • Öppna denna fil i editorn, leta upp ”hello_world” och ändra värdet på hälsningsfrasen till något annat. Testkör applikationen igen. Emulatorn fungerar i stort sett som en verklig telefon (men den är långsammare) – testa! Föra över applikationen till en mobiltelefon För att föra över ett program till en verklig telefon, utan att gå omvägen via en ”App Store” som t.ex. Google Play, måste du först skapa en s.k. applikations-fil (apk-fil) och därefter göra själva överföringen. Du kan läsa om hur du gör detta här: https://developer.android.com/tools/building/index.html. För att föra över apk-filen till telefonen behöver du också någon form av fil-hanterare, t.ex. Astro File manager, som kan laddas ner fån Google Play. USB debugging Enklaste sättet att testa din applikation på en verklig telefon är via s.k. USB-debugging. Du behöver då en Micro-USB-kabel. Börja med att, på telefonen, välja Settings > Developer options > Enable USB debugging. Koppla sedan in telefonen till datorn där du har Android Studio (eventuellt behöver du vänta ett tag då drivrutiner för telefonen laddas ned på datorn). När detta är klart kan du välja ”Run app” i Android Studio. Du ser då telefonen som en enhet i fönstret ”Choose Device” och kan välja att testköra applikationen på denna. Du kan läsa mer om USB-debugging här: http://developer.android.com/tools/device.html. Notera att för vissa telefoner behöver först en specifik drivrutin laddas ned, se http://developer.android.com/tools/extras/oem-usb.html. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -2- Gissa ordet Stäng det tidigare projektet, File > Close Project, innan du börjar med denna uppgift. Importera ett projekt att utgå ifrån Du ska nu skriva (delar av) spelet Gissa ordet. Du kommer att utgå från ett projekt där vissa delar redan är klara. På sidan https://www.kth.se/social/program/tidaa/page/prova-pa-android/ finns ett antal projekt, i form av zip-filer, att bygga vidare på. Ladda ned projektet GuessMyWord, t.ex. till skrivbordet. Importera projektet GuessMyWord till Android Studio på följande sätt: Packa upp projektmappen ur zip-filen (i Windows öppnar du zip-filen, kopierar den mapp du hittar inuti och placerar sedan denna på lämpligt ställe). Starta Android Studio och välj File > Import project… och bläddra sedan fram till den uppackade projektmappen. Om du inte ser allt innehåll i projektet, klicka på pil/triangel-symbolen vid projekthuvudet (”app”). Projektet innehåller en fil med logiken för spelet, GuessMyWordModel, och en fil, MainActivity, som bland annat ska knyta ihop användargränssnittet med logiken i spelet. Layout Det första du ska göra är att skapa ett användargränssnitt, d.v.s. de komponenter där användaren kan mata in text och där programmet kan skriva ut status i spelet. Öppna mappen res/layout och dubbelklicka på filen activity_main.xml. I denna fil beskrivs hur layouten för användargränssnittet ska se ut. Markera fliken ”Design” underst för att se hur designen ser ut (om du markerar fliken ”Text” får du se den egentliga XML-kod som genererar designen). För tillfället ser du endast en s.k. TextView, med en välkomsttext. Du ska nu lägga till en vy där användaren kan mata in bokstäver, en tidtagare samt knappar för att registrera en gissning och starta en ny omgång. Tanken är att det till slut ska se ut som i figuren till höger. Hur du gör detta ser du på nästa sida. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -3- Lägg till en knapp Klicka och dra en knapp, Button, från paletten till vänster in i layouten. Släpp knappen under textvyn. Ändra texten på knappen genom under ”Properties”, till höger, scrolla ned till alternativet ”text” och skriva in texten som du vill ska synas på knappen, i vårt fall ”New game”, se nedan. Lägg till fler komponenter Dra på samma sätt in ett inmatningsfält, EditText 1, under knappen. Du hittar inmatningsfältet under Text Fields, välj den översta komponenten, Plain Text. Markera din EditText, scrolla under Properties till ”Hint” och ange ”Enter a letter”. Sätt också egenskapen ”input type” till ”textCapCharacters” (klicka på pilen vid ”input type” för alternativ); användaren får då ett tangentbord med enbart stora bokstäver. 1 I en EditText kan användaren mata in text; i en TextView visas text, utan möjlighet till inmatning. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -4- Lägg sedan till ytterligare en knapp, med texten ”Submit guess”. Lägg till sist till en tidtagare, Chronometer. Du hittar tidtagaren under Time and Date. Det bör se ut ungefär som på föregående sida. Testkör Vi kan nu testköra applikationen för att bättre se hur layouten ser ut. Välj Run > Run app från menyn. Kontrollera att du får upp ett tangentbord med endast stora bokstäver om du trycker på inmatningsfältet, EditText. Inget händer om du trycker på någon av knapparna; vi kommer strax att lägga till det. Logiken i programmet Steg 1, Läsa av en inmatad bokstav Öppna filen MainActivity.java. I denna fil knyts användargränssnittet och logiken samman. Börja med att ”avkommentera”, d.v.s. ta bort ”//”, på raderna 30-36 2. Kontrollera att inga röda markeringar syns i koden (i annat fall be en assistent om hjälp). Dessa rader gör att vi i programmet kan referera till de komponenter du just lagt till i layouten. Gå till ”SubmitClicklistener”, ner till rad 44, under ”onClick”. Här ska vi skriva kod för vad som ska hända om användaren klickar på submit-knappen. Vi börjar med att lägga till kod som läser av vad användaren matat in och skriver ut detta i textvyn överst på displayen. Byt ut kommentaren på rad 44 mot följande text (före raden med ”}”). String inputString = textInput.getText().toString(); char guess = inputString.charAt(0); textOutput.setText("The character = " + guess); Provkör igen, Run > Run app, och se vad som händer när användaren matar in en bokstav och sedan trycker på submit-knappen. Prova också vad som händer om användaren trycker på knappen utan att ha matat in en bokstav. Vi måste tydligen kontrollera om användaren matat in något innan vi läser av texten. Ändra koden till (fortfarande fr.o.m. rad 44) String inputString = textInput.getText().toString(); if(inputString.length() > 0) { char guess = inputString.charAt(0); textOutput.setText("The character = " + guess); } else { 2 Om radnummeren inte visas, välj från menyn File > Settings. I det dialogfönster som öppnas väljer letar du upp Editor > Appearance och bockar för rutan ”Show line numbers”. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -5- showToast("Please enter a letter!"); } Testkör igen. Steg 2, Spelet Vi ska nu använda oss av spellogiken, så att användaren kan se vad hon hittills gissat rätt samt antalet gissningar. Så här ska det se ut från rad 44: String inputString = textInput.getText().toString(); if(inputString.length() > 0) { char guess = inputString.charAt(0); guessModel.handleGuess(guess); } else { } int n = guessModel.getNoOfGuesses(); String soFar = guessModel.getGuessSoFar(); textOutput.setText(soFar + ", guesses = " + n); textInput.selectAll(); showToast("Please enter a letter!"); Förklaring: • • • guessModel.handleGuess(guess) lägger till en gissning till modellen guessModel.getNoOfGuesses() returnerar antalet gissningar hittills guessModel.getGuessSoFar() returnerar en text där de korrekt gissade tecken syns men övriga är markerade med stjärnor Testkör programmet igen. Steg 3, Gratulerar Det som saknas är att programmet talar om när man gissat hela ordet. Vi kan testa om spelet är klart med guessModel.isSolved(), som svar med en boolean, true eller false. Lägg till följande på raden efter textOutput.setText(...) if(guessModel.isSolved()) { showToast("CONGRATULATIONS"); } Testkör igen. Om du inte sett det redan, så kan du hitta de ord som slumpas ut någonstans i en av java-filerna (fusk?). Steg 4, Tidtagning och nytt spel Vi vill att ett nytt spel och tidtagning ska startas om användaren trycker på knappen ”New game”. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -6- Gå till raden som börjar ”private class NewGameClickListener”. Två rader nedanför denna rad hittar du ett nytt ”onCLick”. Det är här vi ska definiera vad som händer när användaren trycker på denna knapp. Lägg till följande på raden efter ”onClick”. guessModel.reset(); String soFar = guessModel.getGuessSoFar(); textOutput.setText("The word: " + soFar); stopWatch.setBase(SystemClock.elapsedRealtime()); stopWatch.start(); Denna kod startar om spelet (slumpar ett nytt hemligt ord), skriver ut stjärnor för varje bokstav samt nollställer klockan och startar den. När du lägger till denna kod blir klassen SystemClock rödmarkerad, vi har inte importerat denna klass. Du kan importera denna ”automatiskt” genom att markera texten SystemClock” och sedan trycka ALT + ENTER. Vi bör också lägga till att klockan stoppas när ett spel är klart. Den tidigare if-satsen som kontrollerar om gissningen är korrekt (någonstans efter rad 44) utökas till if(guessModel.isSolved()) { showToast("CONGRATULATIONS!!!"); stopWatch.stop(); } Testkör programmet. Börja med att välja ”New game”, notera att ett nytt ord slumpas och klockan startas. Lägg till sist till att ett nytt spel initieras när applikationen startas, på samma sätt som när knappen ”New game” trycks. Placera samma kod allra sist i metoden ”onCreate”. Metoden är den första som exekveras när applikationen startar. Testkör igen. För över programmet till en telefon Och nu till det bästa – spela på en telefon. Se instruktionerna i början av detta dokument. Prova ditt program på riktigt. Steg 4, Customize? Kanske du har en egen idé om hur programmet kan förbättras. Fråga en assistent som kanske kan hjälpa dig med det. Det färdiga programmet finns i filen GuessMyWordFinal.zip. Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -7- Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik Kontakt: Anders Lindström, anders.lindstrom@sth.kth.se -8-
© Copyright 2024