iOS 9 Georganiseerd blijven met storyboard-referenties

Hoewel storyboards al bestaan ​​sinds iOS 5, zijn veel ontwikkelaars terughoudend om ze in hun projecten te gebruiken. Een typische opmerking is dat storyboards geweldig zijn voor kleine projecten, maar tekortschieten voor grotere projecten.

Apple heeft deze feedback ter harte genomen en veel veel voorkomende problemen opgelost door storyboard-referenties te introduceren. In deze zelfstudie laat ik je zien wat de verwijzingen naar het storyboard zijn en hoe ze je kunnen helpen de gebruikersinterfaces van je project op te splitsen in hanteerbare stukken.

1. Het probleem

Vanuit het perspectief van een ontwerper zijn storyboards geweldig. Ze zijn een visuele weergave van de gebruikersinterface van een project. Interface Builder maakt het toevoegen en verbinden van scènes een fluitje van een cent. Helaas hebben storyboards ook een aantal nadelen.

ingewikkeldheid

De meeste projecten hebben één storyboard met de gebruikersinterface van de toepassing. Dat is het doel van storyboards. Rechts? Ja en nee. Het is waar dat het doel van storyboards is om de gebruikersinterface visueel in te delen. Het probleem is dat storyboards snel onoverzichtelijk en complex kunnen worden voor grotere projecten.

Bron controle

Een andere hindernis bij het werken met storyboards is samenwerking. Storyboards kunnen het samenwerken met teamleden tot een ware uitdaging maken. Een storyboard wordt opgeslagen als één bestand. Dit betekent dat elke wijziging die u of een teamlid aanbrengt in een storyboard, hetzelfde bestand beïnvloedt. Op een gegeven moment zal dit onvermijdelijk leiden tot samenvoegingsconflicten. Dit is minder een probleem bij het werken met XIB-bestanden, omdat elk XIB-bestand één scène van de gebruikersinterface vertegenwoordigt.

2. De oplossing

Vóór iOS 9

De oplossing is eenvoudig, het verbreken van storyboards in een reeks kleinere storyboards. Maar hoe verbind je de storyboards? Vóór iOS 9 zouden ontwikkelaars storyboards in code verbinden door het storyboard te laden en aan te roepen instantiateInitialViewController () op het storyboard. Het volgende codefragment laat zien hoe dit werkt.

laat storyboard = UIStoryboard (naam: "DetailView", bundel: NSBundle.mainBundle ()) laat viewController = storyboard.instantiateInitialViewController () als viewController = viewController self.presentViewController (viewController, geanimeerd: true, completion: nil)

Het dwingt ontwikkelaars om de verbinding in code te maken, waardoor het onduidelijk is hoe meerdere storyboards met elkaar verbonden zijn. Het is niet duidelijk hoe een storyboard is verbonden met een ander storyboard. Laten we eens kijken hoe verwijzingen naar storyboards deze problemen oplossen in iOS 9.

iOS 9

Storyboard-verwijzingen zijn een geweldige aanvulling op de storyboard-toolchain. In Interface Builder kan de bestemming van een segue nu ook een ander storyboard zijn. Bovendien kan er meerdere keren naar een storyboard worden verwezen, waardoor storyboards op meerdere plaatsen eenvoudig opnieuw kunnen worden gebruikt. Laten we een eenvoudig project maken om te laten zien hoe eenvoudig het is om aan de slag te gaan met storyboard-referenties.

3. Projectinstellingen

In plaats van te beginnen met een voorbeeldproject, laat ik je zien hoe je vanuit het niets storyboard-referenties kunt gebruiken. Zorg voordat u verder gaat dat Xcode 7 is geïnstalleerd. Storyboard-verwijzingen zijn alleen beschikbaar in iOS 9, waarvoor Xcode 7 vereist is.

Open Xcode 7 en maak een nieuw project door te kiezen Nieuw> Project ... van Xcode's het dossier menu. Selecteer de Applicatie met tabbladen sjabloon van de iOS> Applicatie sectie aan de linkerkant.

Configureer het project door het een naam en instelling te geven apparaten naar iPhone. Voor deze zelfstudie maakt het niet uit of u instelt Taal naar Swift of Objective-C. Vertel Xcode waar het het project moet opslaan en klik creëren.

Als je een nieuweling bent in storyboards, zal je misschien verbaasd zijn dat Xcode twee storyboards voor ons heeft gemaakt. Main.storyboard is het belangrijkste storyboard van het project en bevat de gebruikersinterface van de toepassing. LaunchScreen.storyboard is een storyboard dat Xcode gebruikt om dynamisch een startscherm voor de applicatie te maken. We zullen niet gebruiken LaunchScreen.storyboard in deze tutorial.

4. De gebruikersinterface maken

Ons storyboard bevat momenteel een tabbalkcontroller en twee view controllers. Laten we het een beetje interessanter maken door de beeldcontrollers in te bedden in een navigatiecontroller. Selecteer de bovenaanzicht-controller en selecteer Insluiten> Navigatiecontroller van Xcode's Editor menu. Doe hetzelfde voor de tweede weergavecontroller. Dit is hoe je storyboard er nu uit zou moeten zien.

Hoewel het storyboard niet ingewikkeld is, bevat het genoeg complexiteit om je te laten zien hoe storyboard-referenties werken en hoe ze je projecten ten goede kunnen komen. Het is tijd voor wat refactoring.

5. Storyboards herzien

Wanneer de codebase van een project onhandelbaar of te complex wordt om te onderhouden, is het tijd voor refactoring. Refactoring betekent eenvoudigweg reorganiseren of herstructureren van de codebasis om het onderhoud eenvoudiger te maken. Dit omvat vaak het opsplitsen van grote stukken code in kleinere stukjes, het modulariseren van de codebasis.

Hoewel storyboards een geweldig hulpmiddel zijn om gebruikersinterfaces te maken, kunnen storyboards ook te complex of te groot worden om te onderhouden. In iOS 9 kan een storyboard worden opgesplitst in meerdere kleinere storyboards. Apple verwijst naar dit proces als refactoring.

Omdat elke weergavecontroller van de tabbalkcontroller kan worden gezien als een afzonderlijke gebruikersinterface, is het zinvol om elk tabblad van de tabbalkcontroller in een afzonderlijk storyboard te plaatsen. Dit is heel gemakkelijk in Xcode 7.

Begin met het selecteren van de bovenaanzicht-controller en de navigatie-controller. Van Xcode's Editor menu, kies Refactor to Storyboard. Xcode vraagt ​​je om het storyboard te benoemen dat het gaat creëren voor de selectie die je hebt gemaakt. Geef het storyboard een naam FirstTab.storyboard en klik Opslaan.

Xcode maakt een nieuw storyboard met de navigatiecontroller en de rootview-controller. In dit storyboard wordt de navigatiecontroller automatisch de aanvankelijke weergavecontroller van het storyboard, zoals u kunt zien in de onderstaande schermafbeelding.

Let daar op Main.storyboard is veel eenvoudiger geworden. De navigatiecontroller en de rootview-controller zijn vervangen door een genoemde storyboard-referentie FirstTab. Als u dubbelklikt op de storyboardreferentie, wordt Xcode automatisch geopend FirstTab.storyboard, het storyboard waarnaar het verwijst.

6. Verklaringen in het storyboard verkennen

Storyboard-referenties zijn behoorlijk krachtig. Een storyboard-verwijzing zal standaard de initiële view-controller van het storyboard waarnaar wordt verwezen, instantiëren, maar het is mogelijk om een ​​link te maken naar elke scène in het storyboard met een Storyboard-ID.

Maak een nieuw UIViewController subklasse en noem deze ThirdViewController. Open FirstTab.storyboard en sleep een nieuwe view controller van de Objectbibliotheek aan de rechterkant. Van de Objectbibliotheek, voeg een label toe aan de weergave van de nieuwe view controller en stel de tekst ervan in Derde blik. Zorg dat de nieuwe beeldcontroller in het storyboard is geselecteerd Klasse naar ThirdViewController en Storyboard-ID naar ThirdView in de Identiteitsinspecteur aan de rechterkant.

Ga terug naar Main.storyboard en selecteer de storyboardreferentie die je eerder hebt gemaakt. Open de Kenmerken Inspector aan de rechterkant om de attributen van de storyboard-referentie te zien. De Kenmerken Inspector laat ons zien dat de verwijzing naar het storyboard verwijst naar de FirstTab storyboard. De ID waarnaar wordt verwezen is op dit moment leeg.

set ID waarnaar wordt verwezen naar ThirdView en je zult zien dat de storyboard-referentie zijn label bijwerkt om de verandering te weerspiegelen. Start de applicatie in de iOS Simulator om het resultaat te zien. Dit illustreert dat je storyboard-verwijzingen kunt gebruiken om naar elke scène in een storyboard te linken, zelfs als de scène niet is verbonden door een segue met andere scènes in het storyboard.

Merk op dat we ook de bundel van het storyboard waarnaar verwezen wordt kunnen specificeren. Dit is vooral handig als u naar een scène in een storyboard van een extern framework moet linken.

Voordat we verder gaan met onze verkenning van storyboard-verwijzingen, wil ik erop wijzen dat het storyboard van een storyboard-verwijzing hetzelfde storyboard kan zijn waartoe de referentie behoort. Dit klinkt misschien vreemd, maar het kan erg handig zijn als je bepaalde scènes op een storyboard wilt hergebruiken of als je met een heel complex storyboard werkt.

7. Toevoegen van Storyboard-verwijzingen

We hebben gemaakt FirstTab.storyboard door te kiezen Refactor to Storyboard van Xcode's Editor menu. Storyboard-referenties zijn ook beschikbaar via de Objectbibliotheek. Open de Objectbibliotheek aan de rechterkant en voeg een storyboard-verwijzing toe aan Main.storyboard.

Selecteer de tabbalkcontroller in het storyboard en maak een segue naar de storyboard-referentie door deze ingedrukt te houden Controle en slepen naar de nieuwe storyboard-referentie.

Kies uit het menu dat wordt weergegeven bekijk controllers van de Relatie Segue sectie.

Selecteer de nieuwe storyboard-referentie en stel in Storyboard-ID naar FirstTab. Start de applicatie in de iOS Simulator om het resultaat te zien. Merk op dat het tweede tabblad van de tabbalkcontroller de derde aanzichtbesturing toont, terwijl het derde tabblad de eerste aanzichtbesturing toont die is ingebed in een navigatiebesturing.

Conclusie

Storyboard-referenties zijn krachtig. Niet alleen maken ze storyboards beheersbaar en modulair, ze maken het heel eenvoudig om storyboards te hergebruiken en hangen zelfs storyboards aan op willekeurige plaatsen.

Ik ben ervan overtuigd dat de verwijzingen naar het storyboard zullen resulteren in een veel hogere acceptatiegraad van storyboards door ontwikkelaars. Storyboard-referenties zijn precies waar ontwikkelaars om hebben gevraagd.