Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Grafisk grensesnitt 1 Mildrid Ljosland 01.02.2011 Lærestoffet er utviklet for faget LN350D Applikasjonsutvikling for mobile enheter 2 Grafisk grensesnitt 1 Resymé: I denne leksjonen ser vi på hvordan vi kan definere ulike ressurser, konfigurere manifest-filen og lage veldig enkle brukergrensesnitt. Det er den første av tre leksjoner om grafiske grensesnitt. 2 GRAFISK GRENSESNITT 1... 1 2.1 GJENNOMGANG AV UKENS KAPITLER I LÆREBOKA... 2 Kapittel 4... 2 Kaptittel 5... 2 Kapittel 6... 2 2.2 EKSEMPEL... 3 Versjon 1... 3 Versjon 2... 4 Versjon 3... 5 2.3 REFERANSER... 6
Grafisk grensesnitt 1 side 2 av 6 2.1 Gjennomgang av ukens kapitler i læreboka Tema for denne leksjonen er lærebokas kapittel 4, 5 og 6. Kapittel 4 Kapitlet gjennomgår de viktigste ressursene, både de som er basert på xml-standarden og andre filer, så som bildefiler og rådatafiler. Hvis du er ukjent med xml, anbefales det at du setter deg inn i det mest grunnleggende. Du kan for eksempel lese de første ni kapitlene (sidene), samt kapitlet om navnerom (namespace), i [W3scools]. Når det gjelder ressurser basert på xml-standarden, er det definisjoner av tekststrenger, farger og dimensjoner, samt layout, som er de viktigste. De tre første lagres alle i katalogen values, mens layoutene (en for hver sidevisning i applikasjonen vår) lagres i katalogen layout. Les gjennom kapittel 4 og prøv det som står under Try it yourself. På side 70 står det at to viktige faner er outline og properties. Hvis en eller begge disse fanene ikke kommer opp automatisk, kan de hentes fram ved å velge Window/Show View/Others/General, eventuelt kan det hende de finnes i lista foran Others. Du vil få bruk for begge disse fanene stadig vekk, og det er lurt å gjøre som boka anbefaler, nemlig å dra properties-fanen bort til høyre og bruke hele skjermens høyde, slik at de fleste egenskapene vises fram uten scrolling. Den viktigste å merke seg fra dette kapitlet er hvordan filstrukturen er bygd opp, at mange typer ressurser kan defineres ved hjelp av xml slik at de kan endres uavhengig av programkoden, og at de samme ressursene kan hentes inn og (om ønskelig) endres i programkoden. Lær deg hvordan ressurs-editoren i Eclipse fungerer, og prøv ut noen av mulighetene. Kaptittel 5 Her er det manifest-filen som er i fokus. Også den er basert på xml. Det meste av kapitlet er stoff som du vil få bruk for når du skal lage virkelige applikasjoner, men som ikke er essensielt på det nåværende tidspunktet. Det viktigste akkurat nå er det som som står om å definere aktiviteter. Kapittel 6 Nå begynner vi (endelig!) å lage en applikasjon. Denne applikasjonen (Been there Done that!) utvides gjennom det meste av boka, så det er lurt å gjøre det som står i Implementing an Appliction Prototype slik at du har kode å bygge videre på i de neste kapitlene. I tillegg kan du eventuelt laste ned koden fra web. Merk at alle aktivitetene må registeres i manifest-filen, så den vil se noe slikt ut: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidbook.triviaquiz6" android:versioncode="1" android:versionname="1.0"> <application android:label="@string/app_name" android:debuggable="true" android:icon="@drawable/quizicon">
Grafisk grensesnitt 1 side 3 av 6 android:name=".quizsplashactivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> android:name="quizgameactivity"></activity> android:name="quizsettingsactivity"></activity> android:name="quizscoresactivity"></activity> android:name="quizhelpactivity"></activity> android:name="quizmenuactivity"></activity> </application> <uses-sdk android:minsdkversion="7" /> </manifest> Hvis du kjører applikasjonen, vil splash-vinduet komme opp. For å se de andre vinduene, må du flytte intent-filter-elementet (med innhold) til den aktiviteten du ønsker å få fram. I eksemplet nedenfor skal vi lage en enkel meny slik at vi kan skifte mellom ulike aktiviteter. 2.2 Eksempel Vi skal lage en applikasjon som viser fram flagg. I dette eksemplet skal vi bare bytte mellom norsk og britisk flagg, men i den tilhørende øvingen får du i oppgave å utvide dette til flere flagg. Versjon 1 Først definerer jeg et nytt prosjekt med navn Flagg og aktiviteten FlaggAktivitet og plasserer tre png-bilder i de tre drawable-katalogene. Det ene bildet, som jeg har kalt icon.png, er et norsk flagg i liten størrelse, egnet som icon for applikasjonen. Deretter har jeg to større bilder, et av norsk flagg (norway.png) og et av det britiske flagget (uk.png). Alle flaggbildene har jeg funnet på Internett, og det er lett å finne mange flere. (Husk at filnavn ikke kan inneholde store bokstaver, bindestrek og diverse andre tegn, så filnavnene må vanligvis endres.) Deretter endrer jeg navn på main.xml til norge.xml, fjerner det TextView-elementet som finnes der og legger i stedet inn et ImageView (ved å dra det inn i bildet av skjermen). I properties-vinduet setter jeg Scr til norway.png, og får vist fram dette flagget i resurseditorens grafiske vindu. Så kopierer jeg denne xml-filen, endrer navnet på kopien til storbritannia.xml og endrer Scr til uk.png. Neste trinn er å kopiere Flaggaktivitet.java og endre navnet på kopien til StorbritanniaAktivitet.java. Klassenavnet endrer seg automatisk tilsvarende. setcontentview settes til henholdsvis R.layout.norge og R.layout.storbritannia i de to aktivitetene. StorbritanniaAktivitet må registeres i manifest-filen ved å legge den til i Application-fanen. Der setter jeg også Debuggable=true.
Grafisk grensesnitt 1 side 4 av 6 Da gjenstår bare å kople til en virtuell enhet (jeg bruker den jeg laget i kapittel 1), så kan applikasjonen vises fram. Vi ser at Flagg har fått det norske flagget som icon, og vi får vist det fram. For å få vist fram det britiske flagget må vi flytte intent-filter fra FlaggAktivitet til StorbritanniaAktivitet i manifest-filen. Versjon 2 Det er noe uhensiktsmessig å måtte gå inn i manifest-filen for å få vist fram det britiske flagget. Det ville vært mye kjekkere om bruker kunne styrt det fra applikasjonen. Det kan vi få til ved å legge inn en meny. Menyer behandles ikke før i kapittel 8, men jeg velger å ta med litt om det her likevel. Inni klassen FlaggAktivitet legger vi til to metoder: public boolean oncreateoptionsmenu(menu meny){ super.oncreateoptionsmenu(meny); meny.add("bytt flagg");
Grafisk grensesnitt 1 side 5 av 6 public boolean onoptionsitemselected(menuitem item){ if (item.gettitle().equals("bytt flagg")){ startactivity(new Intent(this, StorbritanniaAktivitet.class)); Den første metoden definerer menyen. Her har vi bare ett valg, men vi kan lage flere ved å ha flere add-setninger. Valgene vises fram som knapper nederst på skjermen når bruker trykker på menu-knappen i emulatoren eller telefonen. Den neste metoden definerer hva som skal hende når de ulike knappene trykkes. Her sier vi at vi skal starte en ny aktivitet. Hvilken aktivitet som skal startes, defineres i en Intent, og der sender vi altså med hvem som har bedt om den nye aktiviten (this) og hvilken aktivitet det er snakk om (StorbritanniaAktivitet). Intents får du høre mer om i senere leksjoner, men du kan tenke på det som en budbrinner mellom aktiviteter. Versjon 3 Vi ønsker også å kunne skifte fra britisk til norsk flagg, og legger inn de samme metodene i StorbritanniaAktivitet.java. Men her skal vi i tillegg legge inn muligheten av å skifte flagg uten å skifte aktivitet. Bytt aktivitet fører oss tilbake til Flaggaktivitet, mens Bytt flagg skifter flagg i StorbritanniaAktivitet. Her er programkoden: public boolean oncreateoptionsmenu(menu meny){ super.oncreateoptionsmenu(meny); meny.add("bytt aktivitet"); meny.add("bytt flagg");
Grafisk grensesnitt 1 side 6 av 6 public boolean onoptionsitemselected(menuitem item){ if (item.gettitle().equals("bytt aktivitet")){ startactivity(new Intent(this, Flaggaktivitet.class)); else if (item.gettitle().equals("bytt flagg")) { if (flaggverdi == R.drawable.norway){ flaggverdi = R.drawable.uk; else { flaggverdi = R.drawable.norway; ImageView flagg=(imageview)findviewbyid(r.id.imageview01); flagg.setimageresource(flaggverdi); For å holde rede på hvilket flagg som er satt, har jeg innført objektvariabelen flaggverdi. Den viser i utgangspunktet til det britiske flagget, men endres hver gang vi velger Bytt flagg. Merk at dette er et heltall. Ta fram R.java, så ser du hele lista over mulige ressurser. Men det er bare de som er drawable som kan brukes i ImageView. 2.3 Referanser [W3scools] http://www.w3schools.com/xml/