Share
Auto Layout is al een paar jaar beschikbaar, maar met de iPhone 6 en 6 Plus is dit een noodzaak geworden voor projecten. Hoewel het niet altijd bijzonder gemakkelijk te gebruiken was, heeft Xcode de verbeteringen in Interface Builder gestaag zien verbeteren om het integreren van de Auto-indeling eenvoudiger te maken. In deze zelfstudie leert u hoe u de Visual Format-taal met Swift gebruikt om beperkingen voor de Auto-indeling in code te maken.
Deze tutorial gaat ervan uit dat je wat kennis hebt van Auto Layout. Als je een nieuwe Auto-indeling hebt, moedig ik je aan eerst de introductie door Joyce Echessa te lezen.
De Visual Format Language is een declaratieve taal die wordt gebruikt om Auto Layout-beperkingen voor weergaven te definiëren. De syntaxis is expressief en gemakkelijk te begrijpen wanneer je door de code bladert. De beoogde beperkingen moeten meteen duidelijk zijn na het lezen van een Visual Format Language-statement en ze vloeien bijna als een zin.
Auto-opmaakbeperkingen met verschillende prioriteiten, verticale lay-outs, spatiëring en dimensies kunnen worden gemaakt met behulp van de syntaxis Visual Format Language. Het wordt gedefinieerd binnen een stringvariabele en vervolgens doorgegeven aan de methoden op klasseniveau constraintsWithVisualFormat: options: metrics: views: en
constraintWithItem: attribuut: relatedBy: toItem: attribuut: multiplier: constant: van de NSLayoutConstraint klasse.
De Visual Format-taal kan vooral handig zijn als Interface Builder geen optie is om beperkingen voor Auto-opmaak toe te voegen, bijvoorbeeld wanneer een gedeelte van de gebruikersinterface van uw toepassing programmatisch moet worden gemaakt.
Laten we een nieuw project in Xcode maken om te zien hoe de Visual Format-taal wordt gebruikt en hoe uw projecten hiervan kunnen profiteren.
Open Xcode en selecteer Nieuw> Project ... van de het dossier menu. Kiezen Toepassing enkele weergave uit de lijst van iOS-applicatie sjablonen en klik volgende.
Geef vervolgens uw project een naam en voer de naam en identificatie van uw organisatie in. Kiezen universeel van de apparaten lijst, klik volgende, en kies een locatie om het project op te slaan. kiezen Snel als de programmeertaal.
Maak om te beginnen drie variabelen van het type UIView. Open ViewController.swift en voeg de volgende code toe boven de viewDidLoad methode:
var vwBlue: UIView! var vwRed: UIView! var vwGreen: UIView!
Maak een functie genaamd initViews onderaan de view controller leegte als zijn terugkeer type. Deze functie initialiseert de weergaven en voegt ze toe aan de weergavehiërarchie. Zorg ervoor dat u deze functie oproept viewDidLoad na het aanroepen van de superklassen viewDidLoad methode.
func initViews () -> Void // Initialize vwRed = UIView () vwBlue = UIView () vwGreen = UIView () // Prep auto-layout vwRed.setTranslatesAutoresizingMaskIntoConstraints (false) vwBlue.setTranslatesAutoresizingMaskIntoConstraints (false) vwGreen.setTranslatesAutoresizingMaskIntoConstraints (false) / / Coloring vwRed.backgroundColor = UIColor.redColor () vwBlue.backgroundColor = UIColor.blueColor () vwGreen.backgroundColor = UIColor.greenColor () // Voeg ze toe aan de weergave self.view.addSubview (vwRed) self.view.addSubview ( vwBlue) self.view.addSubview (vwGreen)
Wanneer u Auto Layout gebruikt voor weergaven die in code zijn gemaakt, zijn er enkele kanttekeningen waar u rekening mee moet houden. De eerste heeft betrekking op de waarde van het onroerend goed translatesAutoresizingMaskIntoConstraints. Deze eigenschap is waar Standaard betekent dit dat er beperkingen voor Auto-opmaak worden gemaakt op basis van de weergave autoresizing masker. We willen dat de weergave voldoet aan de Auto Layout-beperkingen die we zullen toevoegen, dus deze eigenschap moet worden ingesteld op vals.
Het tweede ding om in gedachten te houden is de levenscyclus van het uitzicht. Voordat Auto Layout-beperkingen aan een weergave kunnen worden toegevoegd, moet deze aan superview worden toegevoegd. Anders wordt een runtime-uitzondering gegenereerd. Bedenk dat Auto Layout definieert waar weergaven worden gepositioneerd op basis van relaties. Als een weergave geen superview heeft, heeft het besturingssysteem geen referentiepunt om de Auto Layout-beperkingen aan te relateren.
Laten we beginnen met een eenvoudig voorbeeld van de Visual Format Language. Voor de rode weergave, vwRed, we zullen Auto Layout-beperkingen toevoegen die dezelfde grootte hebben als de superview. Dit is handig in een scenario waarin u een achtergrondafbeelding toevoegt.
Voordat de Visual Format-taal kan worden gebruikt, moeten alle weergaven die we nodig hebben binnen een woordenboek worden geraadpleegd. Dit is hoe de views worden geïdentificeerd door de Visual Format Language.
Maak een functie genaamd createConstraints met een leegte retourneer type onderaan de klasse view controller. Maak je geen zorgen over de syntaxis. We zullen de implementatie van de createConstraints functioneer in een moment.
Accentsconagua
func createConstraints () -> Void // Views om beperkingen toe te voegen om views te laten = Woordenboek (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Horizontale beperkingen laat horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [red] |", options: nil, metrics: nil, views: views) self.view.addConstraints (horizontalConstraints) // Vertical constraints laat verticalConstraints = NSLayoutConstraint.constraintsWithVisualOpmaak ("V : | [rood] | ", options: nil, metrics: nil, views: views) self.view.addConstraints (verticalConstraints)Roep deze functie aan het einde van de initViews functie die we eerder hebben gecreëerd. Bouw het project en voer het uit door op te drukken Command + R of door op de knop Afspelen links bovenaan te klikken. De iOS-simulator wordt weergegeven met de rode weergave die het volledige scherm opneemt zoals bedoeld.
Bij gebruik van de Visual Format-taal worden de beperkingen voor de automatische lay-out zowel horizontaal als verticaal gedefinieerd. U kunt ook de hoogte of breedte van een weergave definiëren als u respectievelijk een verticale en horizontale beperking opgeeft. Laten we de eerste reeks die we hebben gebruikt om de horizontale beperking te maken, van naderbij bekijken.
"H: | [red] |"
Eerst identificeren we dat dit een horizontale beperking zal zijn door de string met de letter te beginnen H. Horizontaal is de standaard, maar het is een goede gewoonte om het op te nemen om het duidelijker te maken. De richting van de beperking wordt gevolgd door een dubbele punt.
De | of pijpsymbool symboliseert de superview van de weergave. Om ruimte tussen twee elementen toe te voegen, de - of het dash-symbool wordt gebruikt en integerwaarden kunnen daartussen worden geplaatst om een vaste of variabele tussenruimte te creëren. Aanzichten worden gerefereerd door de toetsen in het woordenboek waaraan is doorgegeven constraintsWithVisualFormat. Elke weergave staat tussen vierkante haken.
Merk op hoe de hele string visueel overeenkomt met de afbeelding van de simulator. Het is geschreven als een zin die als volgt zou kunnen worden gelezen: "Horizontaal zou de rode weergave de gehele breedte van zijn superview moeten uitbreiden zonder vulling."
Nu je een basiskennis hebt van de syntaxis, gaan we het createConstraints functie om Auto Layout-beperkingen toe te voegen aan twee weergaven.
In de createConstraints functie, bewerk de horizontalConstraints variabele zoals hieronder getoond.
// Horizontale beperkingen laten horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraints)Dit codefragment geeft de flexibiliteit van de Visual Format-taal echt weer. De bovenstaande verklaring creëert een aantal Auto Layout-beperkingen voor ons. Naast de naam van het aanzicht worden horizontale grootten tussen haakjes gedefinieerd. Voor de rode weergave moet de grootte groter zijn dan of gelijk aan 100 punten, maar kleiner dan of gelijk aan 200 punten.
De blauwe weergave geeft aan dat deze dezelfde horizontale grootte moet hebben als de rode weergave met behulp van == rood tussen haakjes. Dit is een handige manier om aan te geven dat meerdere weergaven dezelfde grootte moeten hebben. Bouw en voer de app uit in de iOS Simulator. Het resultaat zou moeten lijken op de onderstaande schermafbeelding.
Druk op als de toepassing in de iOS-simulator wordt uitgevoerd Command + pijl-links om de oriëntatie van de iOS Simulator in landschap te veranderen. Hoewel de applicatie nog steeds prima werkt, is er een waarschuwing verschenen in de console van Xcode. De waarschuwing meldt dat aan bepaalde beperkingen voor de Auto-indeling niet kan worden voldaan. Hoewel dit uw toepassing niet zal laten crashen, kan dit leiden tot onverwachte resultaten in de gebruikersinterface van uw toepassing.
Dit gebeurt omdat de twee weergaven die we hebben gemaakt, niet 200 punten breed kunnen zijn en geen onderlinge afstand hebben wanneer het apparaat of de iOS-simulator in landschap is. Automatische lay-out lost dit soort scenario's op met behulp van prioriteiten. Met de Visual Format-taal kunt u prioriteiten definiëren met behulp van de @ symbool. Bewerk de horizontalConstraints variabele om als volgt te lezen:
// Horizontale beperkingen laten horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)Omdat de rode en blauwe weergaven nu een lage prioriteit hebben op hun breedtebeperking, aangeduid met @ 20, het Auto Layout-systeem zal deze beperkingen doorbreken en ze tijdens runtime de juiste waarde geven. Start de applicatie opnieuw en wijzig de oriëntatie in landscape. De views vullen nu de extra ruimte in en Xcode produceert geen waarschuwingen.
Vervolgens zullen we beperkingen voor de groene weergave creëren. Update de implementatie van de createConstraints functie zoals hieronder getoond.
func createConstraints () -> Void // Views om beperkingen toe te voegen om views te laten = Woordenboek (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Horizontale beperkingen laat horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsBlue) Omdat het horizontalConstraintsGreen constraint definieert geen specifieke breedte of spatiëring naar zijn superview, deze zal de volledige lengte overspannen. De verticale beperking zorgt ervoor dat deze 40 punten hoog is met 10 punten tussen de rode en blauwe weergaven.
Als u de toepassing nog een keer uitvoert, loopt de groene weergave over de volledige breedte van het scherm en blijven de rode en blauwe weergaven erboven zoals ze eerder waren. Wanneer de iOS-simulator wordt geroteerd naar liggend, behouden de weergaven hun posities en worden ze passend aangepast.
Om alles leesbaarder te maken, gebruiken we een woordenboek met statistieken in de beperkingsverklaringen. Maak een woordenboek zoals hieronder getoond, onmiddellijk na het declareren van de keer bekeken woordenboek.
let metrics = Dictionary (dictionaryLiteral: ("spacing", 10), ("lowWidth", 100), ("highWidth", 200), ("priority", 20), ("redBlueSpacing", 0), ("greenHeight " 40))In plaats van het gebruik van hardgecodeerde waarden, kunnen we nu de waarden van de metriek woordenboek, waardoor de verklaringen van de beperkingen veel leesbaarder worden. Bewerk de createConstraints nog een laatste keer werken met de nieuwe metriek woordenboek.
func createConstraints () -> Void // Views om beperkingen toe te voegen om views te laten = Woordenboek (dictionaryLiteral: ("red", vwRed), ("blue", vwBlue), ("green", vwGreen)) // Statistieken voor Visual Format string let metrics = Dictionary (dictionaryLiteral: ("spacing", 10), ("lowWidth", 100), ("highWidth", 200), ("priority", 20), ("redBlueSpacing", 0), ("greenHeight", 40)) // Horizontale beperkingen laten horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -spacing- [red (> = lowWidth,<=highWidth@priority)]-redBlueSpacing-[blue(==red)]-spacing-|", options: nil, metrics: metrics, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsBlue) U vraagt zich misschien af waarom de hoogte van de groene weergave twee keer is gedefinieerd. Dit komt omdat de Visual Format Language in rijen en kolommen werkt. Denk bij het gebruik van de Visual Format Language aan het toevoegen van beperkingen van links naar rechts op één "rij" van de weergave voor horizontale beperkingen. Voor verticale beperkingen moet u denken in termen van kolommen.
De meeste Auto Layout-beperkingen die u gebruikt, kunnen worden uitgedrukt met de Visual Format-taal. Er zijn er een paar die dat echter niet kunnen. U kunt bijvoorbeeld een beperking voor een vaste beeldverhouding niet maken met de Visual Format-taal. Dit kan niet worden bereikt met de syntaxis van Visual Format Language, omdat de volgende tekenreeks niet kan worden geparseerd:
H: | imageView.width = 2 * imageView.height |
U kunt Auto-indeling nog steeds gebruiken in uw code om dit soort beperkingen te bereiken met behulp van het traditionele constraintWithItem methode.
De Visual Format-taal kan erg handig zijn wanneer u beperkingen voor Auto-opmaak in code moet maken. In plaats van een voor een beperkingen te creëren, kunt u met de Visual Format-taal een aantal beperkingen creëren met één regel code.
Voordat Auto Layout beschikbaar was voor ontwikkelaars, was het een hele klus om bij te houden hoe weergaven van weergaven voor verschillende apparaatcategorieën te wijzigen. Met Auto Layout en de Visual Format-taal is dit nu meer intuïtief, waardoor gebruikersinterfaces gemakkelijker te onderhouden zijn op verschillende apparaten.
