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, [email protected]
-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, [email protected]
-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, [email protected]
-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, [email protected]
-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, [email protected]
-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, [email protected]
-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, [email protected]
-7-
Högskoleingenjör Datateknik: http://www.kth.se/utbildning/hogskoleingenjor/datateknik
Kontakt: Anders Lindström, [email protected]
-8-