Da jeg for godt 1 år siden startede rigtigt på iPhone udvikling, var det med ideen til iOddser.
iOddser er en app der kan udregne odds for forskellige kampe og returnere den mulige gevinst.
Kender du det ikke kan du læse mere om programmet her.

Jeg vil med udgangspunkt i mine tidligere erfaringer med iOddser, prøve at lave en simpel lommeregner sammen med jer.
Dette er Del 1 hvor vi skal bygge vores interface op i interfacebuilder og lave outlets til de forskellige knapper, labels og tekst felter.
Denne tutorial kan bruges til meget mere end en simpel lommeregner. Du vil få indblik i datahåndtering, input, output, og meget mere.
Alt i alt skal denne guide gerne give dig et grundlæggende kendskab til Coca Touch og Objective-C, så du selv kan udvikle dine egne apps.

Hvis du ikke allerede har hentet Xcode og de andre udviklingsværktøker, så gør det her.

Når du har installeret udviklingsværktøjerne skal vi igang med vores første projekt.
Åben Xcode og vælg filer -> New Project
Her vælger du en View-based Application. Ved at vælge denne skabelon har Apple allerede skrevet noget af koden for os, så det sparer noget tid.
Vælg herefter dit projektnavn, jeg har nangivet den “Lommeregner”.

Jeg vil ikke bruge så meget tid på at gennemgå de forskellige funktioner i Xcode før vi skal bruge dem. Aner du slet ikke hvad du skal gøre nu er det nok en god idé at læse et par af de guides der er på iPhoneguide.dk for at komme igang.

Dit Xcode vindue skulle nu gerne se ca. således ud:

Udvid fanen Resources og dobbeltklik på filen “LommeregnerViewController.xib” (hvis du har kaldt din App Lommeregner, ellers hedder den DetvalgtenavnViewController.xib).
Dette skulle gerne åbne Interfacebuilder hvor vi kan bygge vores App op. Man kan gøre denne rækkefølge på mange forskellige måder, f.eks. at lade Interfacebuilder lave dine outlets til knapper osv. Det er ikke helt sådan jeg griber det an, hver sin arbejdsgang, så håber i kan følge med :)

Tryk på din View i Interfacebuilder og træk en stor knap over i din view. Lav den i størrelsen 245 x 50, enten ved at trække den, eller ved at indtaste målene under Size (lineal ikonet).

Tryk herefter enable fra under Button Attributes. Dette gøres da knappen danner rammen for vores label og ikke skal fungere som regulær knap. Som du nok har gættet skal du nu trække en label over oven på knappen så den dækker knappen. Slet Label teksten og skriv “0″.

Er du med så langt bliver resten en leg. Vi skal nu have bygget vores lommeregner op med de forskellige knapper, 1,2,3,4, +, – osv. Træk en knap over og lav den i målene 60 x 60. Hold herefter Alt nede mens du trækker knappen væk. På den måde kopiere du den og de attributter du har givet den. Lav en række med tre knapper og kopier dem nedad og giv dem titel efter deres navn.

Fortsæt sådan indtil du har ca. samme resultat som billedet nedenunder:

Lommeregneren får alle de simple funktioner som +, -, * og /, men vi ligger også en Rand funktion ind. Denne knap skal senere kunne skabe et tilfældigt tal og skrive det til vores label. Når du er færdig burde den gerne se ud som på billedet ved siden af.

Gem nu projektet og luk Interfacebuilder. Det var så det for Del 1. Næste gang skal vi igang med at “kode” vores App og koble vores outlets sammen med vores knapper i Interfacebuilder.

Er du stået helt af så skriv gerne i kommentarfeltet herunder, så skal jeg assistere så godt jeg kan.

Vores fremskridt kan også hentes i en Zip fil her.