Storyboard til iOS-udvikling

Storyboards blev først introduceret til udviklere i udgivelsen af ​​iOS 5. De sparer udvikleren besværet med at designe hver skærmgrænseflade i en anden fil. Storyboardet giver dig mulighed for at se den konceptuelle mockup af din app som helhed og interaktionerne mellem hver skærm. Ved hjælp af segmenter er du i stand til at indstille, hvordan appen overgår mellem givne skærme og videregiver data. I denne vejledning viser jeg dig, hvordan du laver en enkel login-skærm til en app.

Kom godt i gang

Det første du vil gøre er at lave et nyt projekt. Du vil have en ny applikation til en enkelt skærm, der indstiller sproget til Swift og enhederne til universelle. Hvis du navigerer til storyboardet, skal du se en tom visningscontrolerscene. Pilen på venstre side af visningscontrolleren angiver, at det er rodcontrolleren.

For at tilføje etiketter til brugernavnet og adgangskoden skal du gå til feltet nederst til højre på skærmen, vælge cirklen med en firkant i og trække og slippe to etiketter på din visning. Ved at vælge præferencer på sidelinjen kan du angive mange vigtige parametre. Der er for mange at gå over, men de fleste er selvforklarende.

De to vigtige for os er pladsholderteksten og afkrydsningsfeltet til sikker tekstindtastning. Vi vil bruge pladsholdertekst til at lade brugeren vide, hvilke oplysninger der kræves af dem, og den sikre indtastning for at skjule brugerens adgangskode fra at blive vist. Når dette er gjort, har vi brug for en knap for at udløse vores segment. Vi kan trække en videre på samme måde, som vi lavede et tekstfelt. Når du har givet knappen en titel og arrangeret dine objekter på skærmen, skal de se sådan ud:

Nu er vores første skærmbillede af appen færdig, så vi er nødt til at lave en anden til at gå over til. Gør dette ved at trække en anden visningscontroller på skærmen. For at forbinde de to skærme skal du gøre to ting. Først skal du kontrollere, klik på knappen og træk den til den nye skærm, du tilføjede. Derefter skal du vælge cirklen mellem de to visninger. Du bliver nødt til at ændre identifikatoren til segmentet; til dette eksempel vil jeg bruge “nextScreen”

Endelig sætter vi en etiket på den nye skærm, så vi kan se brugeren og se, om vores app fungerer. For at kunne få adgang til felterne fra storyboard programmatisk, bliver vi nødt til at oprette afsætningsmuligheder for dem i den klasse, der bruger dem sådan:

klasse FirstScreen: UIViewController {

@IBOutlet svag var brugernavn: UITextField!
@IBAction func loginButton (afsender: AnyObject) {
perfromSegueWithIdentifier (“næste skærm”, afsender: selv)
}
}

klasse SecondScreen: UIViewController {
var bruger: String!
@IBOutlet svagt var brugernavn: UILabel!

tilsidesætte func viewDidload () {
brugernavn.text = bruger
}
}

Når dette er gjort, skal du sørge for at linke objekterne fra storyboard ved hjælp af forbindelsesinspektøren på hver skærm. Dine forretninger skal vises, og du kan klikke på cirklen til højre for dem for at linke dem.

Den sidste funktion, der skal implementeres, er præparatForSegue-funktionen i første skærmklasse. Dette giver dig mulighed for at videregive data til den nye visning som sådan:

tilsidesætte sjov prepareForSegue (følger: UIStoryboardFollow, sender: AnyObject?) {
if segue.identifier == “nextScreen” {
lad destVC = fortsætter.destinationViewController som UIViewController
destVC.user = self.username
}
}

Nu har du en grundlæggende forståelse af, hvordan du skifter skærm og videregiver data mellem dem. Dette giver dig en god start på at lave funktionelle apps, glad programmering!