Share
Et av de største verktøyene Apple gir til sine iPhone-utviklere, er Interface Builder. Interface Builder er et program som lar deg, utvikleren, lage det grafiske brukergrensesnittet (GUI) for appen din i en WYSIWYG-stilredigeringsprogramvare (Hva du er hva du får). Når appen er kompilert, genererer IB så all nødvendig kode for deg. Dette gjør at du raskt og enkelt kan lage grensesnitt. Denne opplæringen vil veilede deg gjennom etableringen av grensesnitt i Interface Builder og bruken av de forskjellige elementene Apple gir
Før du fortsetter med noen av eksemplene i denne opplæringen, bør du lese Apples iPhone Human Interface Retningslinjer. Disse dokumentene inneholder viktig informasjon om opprettelsen av grensesnitt for iPhone, og det kan føre til at appen din blir avvist når den sendes til App Store, hvis du ikke overholder retningslinjene. Dette dokumentet vil bli diskutert mer detaljert når vi går sammen, og alle eksemplene i denne opplæringen vil være i samsvar med disse retningslinjene.
Interface Builder har et ganske enkelt layout. Den består av fire hovedvinduer, utsikten, biblioteket, nib (eller xib) dokumentleseren og inspektøren. Så hva gjør hver av disse vinduene? Visningen er hvor du konstruerer grensesnittet ditt. Du vil dra elementer fra bibliotekets vindu og til utsikten for å plassere dem. Dokumentleseren lar deg bla gjennom, hierarkisk, elementene du har plassert i din nib-fil. Endelig viser inspektøren alle de forskjellige egenskapene til det valgte elementet, og lar deg redigere dem.
På den mer tekniske siden tillater Interface Builder at programkilden din kan kommunisere med grensesnittet på to grunnleggende måter: uttak og handlinger. Outlets definerer et element som du vil få tilgang til i kildekoden din, så kan du danne forbindelse fra dine utsalgssteder til de spesifikke brukergrensesnittelementene i Interface Builder.
Et uttak er definert som dette:
IBOutlet id someElement;
IBOutlet-erklæringen kan også settes med eiendomserklæringen slik:
@property (nonatomic, behold) IBOutlet id someElement;
Uansett er det akseptabelt. En handling er en spesiell type metode som kalles som svar på en hendelse (dvs. brukeren tapper en knapp) som du definerer i Interface Builder. En handling er definert ved at metodene returnerer IBAction typen, slik:
-(IBAction) someAction: (id) sender;
Vi diskuterer uttak og handlinger senere senere.
Det første du må gjøre før du kan spille med Interface Builder, er å lage et nytt Xcode-prosjekt. Åpne Xcode Klikk på Opprett et nytt Xcode-prosjekt, og velg deretter et visningsbasert prosjekt. Tittel det "teller".
MERK:
Pass på at du har satt målet ditt til iPhone og ikke iPad i Xcode.
Nå som du har et Xcode-prosjekt, ønsker vi å endre den automatisk opprettede CounterViewController for å definere våre utsalgssteder og handlinger. Åpne CounterViewController.h filen og endre den slik at den ser ut som følgende:
#importere@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger teller; @property (nonatomic, behold) UILabel * countLabel; @property (nonatomic) NSInteger count; - (IBAction) legg til: (UIButton *) avsender; - (IBAction) sub: (UIButton *) avsender; - (ugyldig) displayCount; @slutt
Dette definerer et heltall for å holde tellingen og et uttak til en etikett som vil vise denne tellingen. Det definerer også et sett med metoder som vil motta hendelser fra IB. Nå må vi definere en implementering for denne handlingen, så åpne den tilsvarende CounterViewController.m filen og gjør følgende endringer:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) legg til: (UIButton *) avsender count ++; [self displayCount]; - (IBAction) sub: (UIButton *) avsender count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloker] initWithFormat: @ "% d", self.count]]; ... - (void) dealloc [countLabel release]; [super dealloc]; @slutt
Dette er ganske enkelt fil. Alt det gjør er når handlingen kalles, er å endre tellingen enten opp eller ned, og viser deretter som teller på etiketten.
Utvid nå ressursmappen i Xcode, og du vil se tre filer. To av disse er Interfcae Builder .xib-filer. For nå kan du ignorere MainWindow.xib, vi skal fokusere på CounterViewController.xib. Åpne den nå, dette vil starte grensesnittbyggeren, og du får se en skjerm som denne:
Det er på tide å begynne å bygge grensesnittet vårt! Gå over til biblioteket kategorien, og ta en knapp og dra den på visningen din. Hvis du drar knappen rundt et øyeblikk, vil du legge merke til at blå guider kommer opp. Interfcae Builder vil gi deg forskjellige guider som hjelper deg med å plassere elementet i visningen. Du vil se dette mer når vi begynner å plassere flere elementer. Gjør det to ganger. Deretter finner du en etikett og legger den på visningen din.
Velg nå en av knappene, gå til attributter-fanen i inspektøren, og endre tittelen til "+". Gjør det samme for den andre knappen, men i stedet endre tittelen til "-". Dobbeltklikk vil også gi deg muligheten til å endre tittelen. Dobbeltklikk på etiketten og endre teksten til "0", du kan også ønske å endre sin tekstjustering til senteret, som kan gjøres på inspektørens attributter.
Nå bør du ha et grensesnitt som ser omtrent slik ut:
Det siste du må gjøre for å gjøre disken din, er å koble til grensesnittet og kilden.
Koble CountLabel-uttaket til selve etiketten. Dette kan gjøres ved å klikke på og dra fra objektets fil-objekt, i dokumentvinduet til etiketten, i visningen. Et lite, grå vindu vil dukke opp med to alternativer, det ene vil være countLabel vi definerte tidligere, og det andre blir visningen (dette er et standardutløp som kreves for visningskontrollere, det vil ha en dash for å indikere at den allerede er koblet til noe ). Klikk på countLabel-alternativet for å velge det.
Nå skal vi koble våre knapper til våre tilleggs- og trekkhandlinger. For våre formål kan du bare styre-klikk og dra fra knappene til filens eierobjekt (og velg den aktuelle handlingen for hver knapp), men vær oppmerksom på at hvis du åpner tilkoblingspanelet på inspektøren (som du kan komme til ved å trykke på kommando + 2), viser den en rekke forskjellige hendelser som du kan bruke til å utløse handlinger og lar deg lage et stort utvalg av funksjoner fra en enkel knapp. Som standard bruker den Touch Up Inside-hendelsen.
Nå kan du bytte tilbake til Xcode og klikke på bygge og kjøre, og søknaden din skal starte i simulatoren. Hvis du har koblet alt opp riktig, bør du kunne legge til og trekke fra tallet, og du bør se etikettendringen for å gjenspeile det.
En uisegmentert kontroll er som et par knapper som sitter fast sammen, med en stor forskjell. Den generelle hensikten med en UISegmentedControl er ikke å være som en trykknapp, men for valg. Lar oss utvide funksjonen til Counter-appen vår, ved hjelp av en segemtned-kontroll for å tillate brukeren å velge mellom enten «count for one» eller «count by two».
Det første du må gjøre er å åpne CounterViewController.h filen i Xcode og legge til en IBAction-definisjon og et heltall for å lagre vår modus.
Endre det slik at det ser ut som dette:
#importere@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger teller; NSInteger-modus @property (ikkeatomisk, behold) UILabel * countLabel; @property (nonatomic) NSInteger count; @property (nonatomic) NSInteger modus; - (IBAction) legg til: (UIButton *) avsender; - (IBAction) sub: (UIButton *) avsender; - (IBAction) modus: (UISegmentedControl) avsender; - (ugyldig) displayCount; @slutt
Dette er en god tid å påpeke det faktum at så langt har handlingsdefinisjonene i denne opplæringen alle definert en klassetype for avsender, som begrenser objekter som kan kalle denne handlingen til de av denne klassetypen. Jeg synes dette er en nyttig praksis fordi den hindrer deg i å koble ting feil. Det skal imidlertid bemerkes at dette er ikke et krav, disse definisjonene kan like lett ha vært:
- (IBAction) tilsett: (id) sender; - (IBAction) sub: (id) avsender; - (IBAction) modus: (id) avsender;
Tillater gjenstand å ringe til dem. Uansett må du gjennomføre implementeringen av disse handlingene, så åpne CounterViewController.m og gjør disse endringene:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; @synthesize modus; - (IBAction) legg til: (UIButton *) avsender switch (modus) tilfelle 0: count ++; gå i stykker; tilfelle 1: telle + = 2; gå i stykker; standard: break; [self displayCount]; - (IBAction) sub: (UIButton *) avsender switch (modus) tilfelle 0: telle--; gå i stykker; tilfelle 1: telle - = 2; gå i stykker; standard: break; [self displayCount]; - (IBAction) modus: (UISegmentedControl) avsender mode = sender.selectedSegmentIndex; … @slutt
Nå må vi endre grensesnittet. Så åpne CounterViewController.xib.
Gå over til biblioteket og dra i en segmentert kontroll. Nå må vi konfigurere det. Kontroller at den segmenterte kontrollen er valgt, og åpne attributterpanelet til inspektøren. Flytter ned en liten vei under segmentet nedtrekk, som skal lese "segment 0 - først", vi vil endre tittelen til "One". Nå trekker du ned segmentmenyen og bytter til segmentet "segment 1 - sekund", og endrer tittelen til "To".
Vi må også koble dette til vår handling. Åpne koblingspanelet og dra fra "Verdi endret" til Fil Eier. Velg modusen "handling".
Det er det. Du bør nå ha en teller app som kan telle opp og ned av en eller to.
Så langt de elementene vi har snakket om, har mange mulige bruksområder og svært få restriksjoner. Verktøylinjen er det første elementet vi vil diskutere som har begrensninger i retningslinjene for menneskelig grensesnitt for iPhone. Hvis du planlegger å bruke verktøylinjer tungt, bør du konsultere disse retningslinjene, men kort sagt bør verktøylinjer alltid plasseres nederst i grensesnittet, og de bør bestå av knapper med ikoner som ikke er større enn 44px med 44px. Det er ikke et navigasjonselement, og det er et viktig skille. Hvis du vil bruke den til å endre visning eller moduser i appen din, bruker du en faneblad i stedet. Men hvis du følger disse retningslinjene enn verktøylinjen er veldig enkel; det er enkelt en samling knapper på en bar, og kan derfor brukes akkurat som du ville ha en masse knapper. Den eneste forskjellen er at Apple gir et større sett med systemforvalg enn de gjør for standardknapper. Du kan også plassere mellomrom i verktøylinjen mellom knappene for å endre posisjoner. La oss prøve det ut.
Gå tilbake til CounterViewController.h og legg til følgende linje etter dine tidligere handlingsdeklarasjoner.
- (IBAction) tilbakestilt: (UIBarButtonItem *) sender;
Merk:
Avsenderen her er en UIBarButtonItem, ikke en UIToolbar. Hver UIBarButtonItem sender den til egen hendelse, UIToolbar er bare en beholder.
Legg nå dette til CounterViewController.m, følg handlingene vi definerte tidligere:
- (IBAction) reset: (UIBarButtonItem *) avsender count = 0; [self displayCount];
Tilbake i IB, la oss slippe en UIToolbar fra biblioteket til utsikten, merk at den allerede har en knapp på den. For å velge den knappen må du dobbeltklikke på den (første klikk velger verktøylinjen, den andre velger knappen).
Gå til attributter i inspektøren. Du vil merke at det er betydelig færre alternativer for en UIBarButtonItem enn for andre elementer. Det skyldes at verktøylinjer er ment å være ensartede, slik at ting som farge må settes for hele verktøylinjen (du kan prøve dette ut ved å bare klikke en gang på verktøylinjen og deretter åpne attributter inspektøren). Endre identifikatoren for knappen til "Papirkurv".
Koble deretter knappen til tilbakestill acton ved å dra kontroll over til filens eier. Hvis du kjører appen din, bør du nå kunne telle tellingen ved å trykke på papirkurven.
Bryteren er sannsynligvis det mest begrensede elementet som tilbys av Interface Builder. Den har nesten ingen tilpasningsalternativer. Den har en "På" -status og en "Off" -status. Du kan ikke endre etikettene eller farger. Brytere må alltid se ut like uansett hva. Til tross for at de er svært begrenset, er brytere nyttige ved anledninger. Innstillinger har for eksempel en tendens til å gjøre bruk av svitsjer tungt, og bryteren kan være nyttig for å slå på og av funksjoner i appen din - det er akkurat det vi skal gjøre. Vi skal lage en bryter som slår på og av om vi kan telle negativer i appen vår.
Det første du må gjøre er å gjøre følgende modifikasjoner på CounterViewController.h:
#importere@interface CounterViewController: UIViewController ... Boolsk negativ; ... @property (nonatomic) Boolean negativ; ... - (IBAction) negativeSwitch: (UISwitch *) avsender; ... @end
Dette definerer bare en boolesk som vil lagre hvis vi er negativ modus eller ikke, og en handling sendt av en UISwitch som vil endre den boolske. Så nå kan vi definere vår handling og få resten av søknaden til å svare på vår nye negative boolske. Endre CounterViewController.m-filen for å matche følgende:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize negative; ... - (IBAction) sub: (UIButton *) avsender switch (modus) tilfelle 0: telle--; gå i stykker; tilfelle 1: telle - = 2; gå i stykker; standard: break; hvis (negativ) // Dette kontrollerer bare om negativ modus er slått av hvis (telle < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Alt som gjøres her, er å sette den negative modusen basert på statusen til bryteren, og når en subtraksjon skjer, sjekker hvilken modus bryteren er i øyeblikket (lagret i negativ boolesk).
Bytt tilbake til grensesnittbyggeren, finn en bryter i biblioteket og slipp den inn i visningen. Nå må vi koble bryteren til handlingen, men når det gjelder bryteren som den segmenterte kontrollen, ønsker vi å bruke verdiendret hendelse, ikke rør innvendig. Så gå til tilkoblingsfanen i inspektøren, og dra over til filens eier og koble til negativeMode: -handlingen. Du kan også ønske å legge inn en etikett for å markere hva bryteren gjør.
På dette tidspunktet bør søknaden din se ut som om ovenfor.
Det siste og det mest kompliserte elementet vi vil diskutere er glidebryteren. Skyvekontrollene representerer en rekke verdier (som du kan spesifisere), som endres når du beveger deg langs skyveknappen. Dette elementet er svært tilpassbart, men de fleste av disse tilpasningene må gjøres i kode og er utenfor omfanget av denne opplæringen. Vi skal bruke den til å lage en multiplikator og divider for vår disk.
Det første vi trenger, er, du gjettet det, en annen handling. Legg til følgende i CounterViewController.h med resten av handlingsdeklarasjonene dine:
- (IBAction) multiplikator: (UISlider *) sender;
Deretter må vi implementere multiplikasjons- og delingsfunksjonen for vår teller, så modifiser CounterViewController.m slik som:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult; ... - (IBAction) legg til: (UIButton *) avsender count + = modus; telle * = mult; hvis (! negativ) if (count < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Nå når du legger til eller trekker tallet, multipliseres eller deles med verdien av skyveknappen. Hvis glidebryteren er på 1 (som vil være den nedre grensen) virker telleren normalt på 9 (som vil være maksimum).
Tilbake i IB, ta tak i og slipp en glidebryter fra biblioteket inn i visningen, og åpne dets attributter i inspektøren. Det første du bør legge merke til her er verdiene. Vi vil endre dem litt. Som nevnt tidligere vil du at minimumsverdien skal være 1, maksimumverdien skal være 9 og den opprinnelige verdien skal være 1. Fjern merket for fortsettelsesboksen, slik at vi ikke får noen desimalpunkt der inne, og det er det. Bare koble "verdi endret" hendelsen til skyvekontrollen til filens eier og du har multiplikatoren din!
Din siste app bør se ut som den som vises nedenfor:
Denne opplæringen har knapt skrapt overflaten av det som er mulig i Interface Builder. Det er et ekstremt kraftig program. I dag har vi dekket den grunnleggende bruken av IB og de mest grunnleggende elementene i IB-biblioteket. Denne opplæringen har vist hvordan du kan lage et fullt funksjonelt program, ved hjelp av Interface Builder, uten veldig mye kode. Husk alltid å konsultere iPhone Human Interface Retningslinjer før du gjør noe drastisk, og for mer grensesnittinspirasjon og hjelp, vær sikker på å sjekke Apples UICatalog.
Accentsconagua