Storyboard för iOS-utveckling

Storyboards introducerades först för utvecklare i lanseringen av iOS 5. De sparar utvecklaren besväret med att utforma varje skärms gränssnitt i en annan fil. Storyboard låter dig se den konceptuella mockupen för din app som helhet och interaktionerna mellan varje skärm. Med hjälp av segment kan du ställa in hur appen kommer att övergå mellan givna skärmar och skicka data vidare. I den här handledningen visar jag dig hur du skapar en enkel inloggningsskärm för en app.

Komma igång

Det första du vill göra är att göra ett nytt projekt. Du vill ha en ny applikation med en enda skärm som ställer in språket till Swift och enheterna till universal. Om du navigerar till storyboard borde du se en tom kontrollscen. Pilen till vänster om visningskontrollen indikerar att den är rotkontrollen.

För att lägga till etiketter för användarnamnet och lösenordet måste du gå till rutan längst ner till höger på skärmen, markera cirkeln med en kvadrat i och dra och släpp två etiketter på din vy. Genom att välja inställningar i sidofältet kan du ange många viktiga parametrar. Det finns för många att gå över men de flesta är självförklarande.

De två viktiga för oss är platshållartexten och kryssrutan för säker textinmatning. Vi vill använda platshållartext för att låta användaren veta vilken information som krävs av dem och säker post för att dölja användarens lösenord från att visas. När detta är klart behöver vi en knapp för att utlösa vårt segment. Vi kan dra en på samma sätt som vi gjorde ett textfält. När du har gett knappen en titel och ordnat dina objekt på skärmen ska de se ut så här:

Nu är vår första skärm av appen klar så vi måste skapa en annan att övergå till. Gör detta genom att dra en andra vykontroll på skärmen. För att ansluta de två skärmarna måste du göra två saker. Först måste du kontrollera klicka på knappen och dra den till den nya skärmen du lade till. Därefter måste du välja cirkeln mellan de två vyerna. Du måste sedan ändra identifieraren till segmentet; för det här exemplet kommer jag att använda “nextScreen”

Slutligen sätter vi en etikett på den nya skärmen så att vi kan se användaren och se om vår app fungerar. För att kunna komma åt fälten från storyboard programmatiskt måste vi skapa uttag för dem i klassen som använder dem så:

klass FirstScreen: UIViewController {

@IBOutlet svag var användarnamn: UITextField!
@IBAction func loginButton (avsändare: AnyObject) {
perfromSegueWithIdentifier (“nextScreen”, avsändare: själv)
}
}

klass SecondScreen: UIViewController {
var användare: String!
@IBOutlet svag var användarnamn: UILabel!

åsidosätta func viewDidload () {
användarnamn.text = användare
}
}

När detta är gjort, se till att länka objekten från storyboard med anslutningsinspektören på varje skärm. Dina försäljningsställen ska visas och du kan klicka på cirkeln till höger om dem för att länka dem.

Den sista funktionen som ska implementeras är preparatForSegue-funktionen i den första skärmens klass. Detta gör att du kan skicka data till den nya vyn så:

åsidosätta fun prepareForSegue (följer: UIStoryboardFollow, avsändare: AnyObject?) {
if segue.identifier == “nextScreen” {
låt destVC = fortsätter.destinationViewController som UIViewController
destVC.user = self.username
}
}

Nu har du en grundläggande förståelse för hur du byter skärm och skickar data mellan dem. Detta kommer att ge dig en bra start på att skapa funktionella appar, glad programmering!