Storyboard pre vývoj iOS

Storyboardy boli vývojárom predstavené prvýkrát vo vydaní iOS 5. Ukladajú vývojárom problémy s navrhovaním rozhraní každej obrazovky v inom súbore. Storyboard vám umožní vidieť koncepčnú maketu vašej aplikácie ako celku a interakcie medzi jednotlivými obrazovkami. Pomocou segues môžete nastaviť, ako bude aplikácia prechádzať medzi danými obrazovkami a odovzdávať údaje. V tomto tutoriále vám ukážem, ako vytvoriť jednoduchú prihlasovaciu obrazovku pre aplikáciu.

Začíname

Prvá vec, ktorú budete chcieť urobiť, je vytvoriť nový projekt. Budete chcieť novú aplikáciu pre jednu obrazovku, ktorá nastaví jazyk na Swift a zariadenia na univerzálny. Ak prejdete na scenár, mala by sa vám zobraziť prázdna scéna ovládača pohľadu. Šípka na ľavej strane radiča pohľadu označuje, že ide o koreňový radič.

Ak chcete pridať štítky pre meno používateľa a heslo, musíte prejsť do poľa v pravom dolnom rohu obrazovky, vybrať kruh so štvorcom a presunúť dva štítky na svoje zobrazenie. Výberom predvolieb na bočnom paneli môžete určiť veľa dôležitých parametrov. Je ich príliš veľa na prejdenie, ale väčšina má vysvetlenie.

Dva dôležité pre nás sú zástupný text a začiarkavacie políčko bezpečné zadávanie textu. Chceme pomocou zástupného textu dať používateľovi vedieť, aké informácie sa od neho požadujú, a zabezpečeným vstupom zakryť zobrazovanie hesla používateľa. Potom, čo to urobíme, potrebujeme tlačidlo, aby sme spustili náš prechod. Jeden môžeme pretiahnuť rovnakým spôsobom, ako sme vytvorili textové pole. Keď dáte tlačidlu názov a usporiadanie vašich objektov na obrazovke by malo vyzerať takto:

Teraz je naša prvá obrazovka aplikácie hotová, takže musíme urobiť ďalšiu na prechod. Urobíte to tak, že na obrazovku presuniete druhý ovládač zobrazenia. Aby ste mohli spojiť dve obrazovky, musíte urobiť dve veci. Najskôr budete musieť kliknúť na dané tlačidlo a presunúť ho na novú pridanú obrazovku. Ďalej budete musieť vybrať kruh medzi dvoma zobrazeniami. Budete musieť potom zmeniť identifikátor na segue; pre tento príklad použijem „nextScreen“

Nakoniec na novú obrazovku umiestnime štítok, aby sme mohli používateľa zobraziť a zistiť, či naša aplikácia funguje. Aby sme mohli programovo získať prístup k poliam zo scenára, budeme pre ne musieť vytvoriť zásuvky v triede, ktorá ich používa takto:

trieda FirstScreen: UIViewController {

@IBOutlet slabé var užívateľské meno: UITextField!
@IBAction func loginButton (odosielateľ: AnyObject) {
perfromSegueWithIdentifier (“nextScreen”, odosielateľ: sám)
}
}

trieda SecondScreen: UIViewController {
var user: Reťazec!
@IBOutlet slabé var užívateľské meno: UILabel!

prepísať func viewDidload () {
username.text = užívateľ
}
}

Po dokončení tohto postupu nezabudnite prepojiť objekty zo scenára pomocou inšpektora pripojení na každej obrazovke. Mali by sa zobraziť vaše predajné miesta. Kliknutím na kruh napravo od nich ich prepojíte.

Poslednou funkciou, ktorá sa má implementovať, je funkcia prepareForSegue v triede prvej obrazovky. Toto vám umožňuje preniesť údaje do nového zobrazenia takto:

prepísať zábavu prepareForSegue (nasleduje: UIStoryboardFollow, sender: AnyObject?) {
if segue.identifier == “nextScreen” {
nechajte destVC = continue.destinationViewController ako UIViewController
destVC.user = self.username
}
}

Teraz máte základné znalosti o tom, ako meniť obrazovky a prenášať medzi nimi údaje. To vám dá dobrý štart do vytvárania funkčných aplikácií, šťastné programovanie!