Komme i gang med iOS-visninger og visningskontrollere: Del 1

Visninger og visningskontrollere er de grunnleggende elementene som utgjør brukergrensesnittet til enhver app, og det er rikelig med informasjon om dem i Apples dokumentasjon. Det er faktisk så mye informasjon at det å lære hvordan de jobber sammen kan være noe overveldende for den nye iOS-programmereren. Heldigvis er det egentlig bare noen få grunnleggende ting du trenger å vite for å komme i gang. I denne første delen av en to-delt artikkel, bygger vi en enkel app for å forstå hvordan brukergrensesnittet (UI) faktisk gjør det på skjermen. La oss komme i gang med figur A, som viser et eksempel på brukergrensesnittet og hvordan det er representert i Cocoa Touch.

Figur A

UIScreen-objektet representerer den fysiske iPhone- eller iPad-skjermen. Annet enn å spørre om størrelsen (de såkalte grensene ) på skjermen, vil du vanligvis ikke samhandle mye med UIScreen-objektet.

UIWindow-objektet gir tegningsstøtte for skjermen, og appen din vil vanligvis bare ha en. Bortsett fra å stille inn den første rotvisningskontrolleren til UIWindow-objektet (diskutert nedenfor), vil du heller ikke samhandle med UIWindow-objektet veldig mye.

Visninger

UIView-objekter er der den virkelige magien begynner å skje. De er festet til UIWindow-objektet og tegner innholdet når det blir bedt om det ved vinduet. Det visuelle grensesnittet til appen din er egentlig et sett med UIView-objekter, som selv administreres av UIViewController-objekter.

De viktigste tingene å forstå om UIView-objekter, eller bare synspunkter, på dette tidspunktet er:

  • En visning representerer et enkelt element på brukergrensesnittet. Det kan være en kontroll som knapp eller glidebryter, et tekstfelt for inndata, eller kanskje et bilde. En visning dekker et bestemt område på skjermen og kan konfigureres til å svare på berøringshendelser.
  • Visninger kan nestes i andre visninger, noe som fører til forestillingen om et visningshierarki. Visninger som er plassert i en annen visning, blir referert til som undervisninger av den visningen. Undervisninger refererer til den som inneholder "overordnet" -visning som deres tilsynsvisning. Undervisninger tegnes og plasseres i forhold til overvåkningen, så hvis for eksempel overvåkningen flyttes til et nytt sted, beveger delvisningene seg med det. I figur A er UIButton- og UILabel-objektene undervisninger av hoved UIV-visningen.
  • Visninger er ikke stedet der hoveddelen av programlogikken din er bosatt. Visninger kan oppdage når en bruker samhandler med dem, for eksempel et trykk på en knappkontroll, men når disse interaksjonene skjer, sender visninger meldinger til andre objekter i appen din, vanligvis en visningskontroller, for å håndtere behandlingen.
  • Visninger understøtter mange andre objekter i iOS. For eksempel er alle brukergrensesnittkontrollene underklasser av UIControl, som igjen er en underklasse for UIView. Resultatet er at alle grensesnittkontroller arver funksjonaliteten og egenskapene til visninger. Dette blir viktig, for eksempel når du prøver å finne ut hvordan du kan manipulere en knapps egenskap. Hvis du ikke finner det du leter etter i UIButton-delen av dokumentasjonen, kan du kanskje finne det under UIView.

UIViewController-objekter samhandler med UIViews for å bestemme hva som vises av visningene, håndtere eventuelle interaksjoner med brukeren og utføre logikken i programmet ditt.

Det er all teorien vi trenger for vår eksempelapp, men det er verdt å investere tid på å lære detaljene i Apples View Programming Guide for iOS. Vi vil nå bygge en app fra grunnen av for å forstå nøyaktig hvordan den første visningen gjør den på skjermen.

Bygg appen

Åpne Xcode, og velg Ny fra Fil-menyen og deretter Ny prosjekt. Et nytt arbeidsområdevindu vises, og du vil bli presentert med flere applikasjonsmaler du kan velge mellom.

På applikasjonen til venstre velger du Program fra iOS-delen. Velg Tom applikasjon og klikk på Neste-knappen.

Figur B

I neste rute skriver du inn ViewMe for produktnavnet og com.myappcompany som firmaidentifikator. (Du må gjerne bytte ut ditt eget produktnavn og firmanavn).

La klasseprefikset være som den er. Det skal være blankt - XYZ er bare et hint til et sted.

Vi vil at bare boksen merket Bruk automatisk referansetelling er merket, så sørg for å fjerne merket for de andre.

Sett Device Family til iPhone, og klikk Neste.

Figur C

En ny rute vises der du spør hvor du vil lagre prosjektet. XCode oppretter en ViewMe-prosjektmappe i katalogen du velger.

Når prosjektet er opprettet, vil Xcode åpne det i et arbeidsområdevindu som vist i figur D.

Figur D

På dette tidspunktet har vi bare en søknadsdelegat. Klikk på AppDelegate.m og finn koden vist i figur E.

Figur E

Her blir appens hovedvindu tildelt og initialisert. Samtalen til UIScreen mainScreen grenser returnerer en struktur som inneholder størrelsen på den fysiske skjermen, noe som resulterer i at vinduet blir dimensjonert for å fylle hele skjermen. Deretter er vindusets bakgrunnsfarge satt til hvit. Oppfordringen til makeKeyAndVisible gjør dette til hovedvinduet og viser det foran andre vinduer (husk at iOS-apper vanligvis har bare ett vindu, men teknisk sett kunne de ha mer). På dette tidspunktet resulterer bygging og drift av app i en blank skjerm, som vist i figur F.

Figur F

La oss nå legge til en View and View-kontroller. Velg Fil-menyen, velg Ny og velg deretter Fil. Velg Objekt-C-klasse fra Cocoa Touch-malene ( figur G ) og klikk Neste.

Figur G

Navn den nye klassen MyViewController på neste skjermbilde ( figur H ). Forsikre deg om at "Med XIB for brukergrensesnitt" er merket av, og klikk Neste.

Figur H

Klikk på Opprett på skjermen som følger, og resultatet skal se ut som figur I. En header (.h), implementering (.m) og nib (.xib) fil er opprettet for å representere MyViewController. Hvis MyViewController.xib ikke allerede er åpen, klikker du på den i Files & Groups-panelet for å åpne Interface Builder (IB).

Figur I

Den første tingen å merke seg er at UIView er opprettet for oss i filen .xib (uttales "nib"). Den blir lastet når View Controller er opprettet av appen vår. Legg også merke til klagen i konsollvinduet om behovet for en root view-kontroller. Vi håndterer det bare litt.

På dette tidspunktet inneholder vår xib-fil bare et enkelt UIView-objekt. Å høyreklikke på Filens eier viser de aktuelle utløpstilkoblingene . Uttak brukes til å opprette forbindelser mellom objekter i brukergrensesnittet og forekomstvariabler i koden din som vist i figur J. Merk at et utsalg som heter "visning" automatisk er opprettet og koblet til UIView-objektet. Hvor kom dette fra?

Figur J

En "view" -forekomstvariabel deklareres i basen UIViewController-klassen og er arvet av MyViewController-underklassen. XCode vet om denne variabelen og opprettet automatisk en stikkontaktforbindelse for deg da du opprettet MyViewController. Ved bruk av uttak kan MyViewController samhandle med grensesnittkontrollene, som vi vil se i del 2 av denne artikkelen.

Interface

La oss bygge ut grensesnittet litt før vi endelig binder hele bildet sammen. Klikk på Vis i listen over objekter slik at den blir aktiv i inspektørruten på høyre side av arbeidsområdet. Forsikre deg om at Attributtsinspektøren er valgt, og endre deretter bakgrunnsfargen på visningen til blå. ( Figur K )

Figur K

Gå nå til høyre på arbeidsområdet og finn bibliotekdelen. Velg etikettobjektet og dra det på utsikten. Sentrer den både horisontalt og vertikalt. Legg merke til hjelperinjene som vises når du har den perfekt sentrert. Velg deretter en rund Rect-knapp og dra den under etiketten. ( Figur L )

Figur L

Du kan endre størrelse på begge gjenstandene ved å gripe tak og dra størrelseshåndtakene på hjørnene til det ser ut som på figur M.

Figur M

La oss gå tilbake til koden. Klikk på AppDelegate.m i Files & Groups-delen for å få frem implementeringsfilen igjen og legge til koden som vises nedenfor med fet skrift.

 #import "AppDelegate.h" 
 #import "MyViewController.h" 
 @ implementering AppDelegate 
 - (BOOL) applikasjon: (UIApplication *) søknad didFinishLaunchingWithOptions: (NSDictionary *) launchOptions 
 { 
 self.window = UIWindow alloc initWithFrame: UIScreen mainScreen grenser; 
 // Overstyringspunkt for tilpasning etter programstart. 
 MyViewController * myViewController = MyViewController alloc initWithNibName: @ "MyViewController" -bunt: nil; 
 self.window setRootViewController: myViewController; 
 self.window.backgroundColor = UIColor whiteColor; 
 self.window makeKeyAndVisible; 
 return YES; 
 } 

Når vi oppretter myViewController, kaller vi initWithNibName-metoden for å initialisere den ved å bruke filen "MyViewController.xib" (filtypen .xib antas av metoden), som du vil huske inneholder UIView-objektet. Oppfordringen til setRootViewController gjør to viktige ting.

For det første etablerer den myViewController som den første visningskontrolleren i visningskontrollhierarkiet, som vil tilfredsstille advarselen vi så tidligere om rotvisningskontrollere. For det andre legger den til myViewController-visningen som den første undervisningen av vinduet, som er magien som får brukergrensesnittet vårt til å vises. Hvis vi nå bygger og kjører applikasjonen, ser vi vårt skinnende nye grensesnitt. ( Figur N )

Figur N

Å forstå hvordan den første visningen er koblet til hovedvinduet er en viktig grunnleggende å forstå. Når du begynner å utvikle mer kompliserte apper og bruke maler som bruker objekter som navigasjons- og fanekontrollere, kan det å forstå nøyaktig hva som skjer på dette tidlige stadiet av oppstart av applikasjoner være nøkkelen til å finne ut hva som skjer når appen din ikke vil kompilere eller oppføre seg som forventet.

I den andre delen av denne artikkelen kobler vi etiketten og knappene til visningskontrolleren for å forstå hvordan visningskontrollere faktisk samhandler med visninger.

Les også:

  • Unngå disse klassiske feilene ved programvareutvikling
  • App store avgifter, prosenter og utbetalinger: Hva utviklere trenger å vite
  • iOS utviklerprogram applikasjonshodepine og tips

© Copyright 2021 | pepebotifarra.com