Share
Zoals elke iteratie van iOS brengt iOS 9 veel nieuwe functies met zich mee. Veranderingen in UIKit bij elke release van iOS, maar een specifieke toevoeging in iOS 9 zal veranderen hoe ontwikkelaars fundamenteel denken over het maken van gebruikersinterfaces op iOS, UIStackView. In deze zelfstudie leer je hoe te gebruiken UIStackView om gebruikersinterfaces te maken.
In dit artikel wordt ervan uitgegaan dat u bekend bent met de basisprincipes van Auto Layout. Als dit onderwerp nieuw voor je is, is onze introductietutorial over Auto Layout een goede start. Om te begrijpen waarom stackweergaven zo nuttig zijn en hoe ze werken, is een goed begrip van Auto-layout vereist.
Gebruik makend van UIStackView, we gaan een schijnscherm maken dat de gebruiker vraagt een beoordeling voor zijn app achter te laten. De gebruiker kan in de gebruikersinterface sterren toevoegen of verwijderen om hun beoordeling aan te geven. Het zal er als volgt uitzien als we klaar zijn.
Download het startersproject van GitHub en open het. Je zult zien dat er binnenin twee stapelweergaven zijn Main.Storyboard.
We gebruiken de twee stapelweergaven om de gebruikersinterface op te maken. Voordat we beginnen met het coderen, laten we eerst een korte blik werpen op hoe een stapelweergave werkt.
Accentsconagua
UIStackView OverzichtIn de kern is de stapelweergave een interface voor het opstellen van verschillende subweergaven, zowel verticaal als horizontaal. Als je Android-ontwikkelervaring hebt, is deze vergelijkbaar met de LinearLayout controle.
Een van de belangrijkste voordelen van de stapelweergave is dat er automatisch Auto-indelingsbeperkingen worden gemaakt voor elke subweergave die eraan is toegevoegd. U hebt ook eindige controle over hoe deze subweergaven zijn bemeten en gepositioneerd. Er zijn opties om de grootte van de views te configureren, waar ze moeten worden gerangschikt, en hoeveel opvulling er tussen de subweergaven moet zijn.
Als u de opties van een stapelweergave wilt zien, opent u Main.Storyboard en selecteer een van de stapelweergaven. In de Kenmerken Inspector, let op de opties die hieronder worden vermeld Stapelweergave.
De Asbepaalt of de stapelweergave de subweergaven horizontaal of verticaal rangschikt. De opstelling bepaalt hoe de daadwerkelijke subweergaven moeten worden uitgelijnd. Distributie definieert hoe de subweergaven zijn gedimensioneerd en tussenruimte regelt de minimale afstand tussen de subweergaven van de stapelweergave.
Om deze voorwaarden te vereenvoudigen, denk er zo over na. alignment bestuurt de X en Y waarden terwijl Distributie controls hoogte en breedte. De andere twee waarden kunnen ook van invloed zijn op de uitlijning. Basislijn relatief, indien aangevinkt, zal de verticale spatiëring van elk subbeeld worden afgeleid van zijn basislijn. Lay-outmarges relatief plaatst de subweergaven ten opzichte van de standaard lay-outmarges indien geselecteerd.
Een ander belangrijk ding om te onthouden bij het werken met een stapelweergave is dat het is gebouwd als een containermodus. Daarom is het een nonrendering subklasse van UIView. Het is geen teken van het canvas zoals de andere UIView subklassen. Dit betekent dat het instellen van eigenschappen zoals Achtergrond kleur of de drawRect: methode heeft geen effect op de stapelweergave.
subviews en arrangedSubviews Voordat we gaan werken met stapelweergaven, zou ik me willen concentreren op het verschil tussen een stapelweergave subviews en arrangedSubviews eigenschappen. Als u een subweergave wilt toevoegen voor beheer van de stapelweergave, doet u dit door te bellen addArrangedSubview: of insertArrangedSubview: atIndex:. De arrangedSubViews array is een subset van zijn subviews eigendom.
Als u een subweergave wilt verwijderen die door de stapelweergave wordt beheerd, moet u bellen beide removeArrangedSubview: en removeFromSuperview. Het verwijderen van een geordende subweergave zorgt ervoor dat de stapelweergave niet langer de beperkingen van die weergave beheert. Het haalt het niet uit de weergavehiërarchie. Dit is erg belangrijk om te onthouden.
Nu we goed begrijpen hoe de stapelweergave werkt, laten we beginnen met het gebruik van een stapelweergave.
Open Main.Storyboard en selecteer de bovenste stapelweergave. In de Kenmerken Inspector, breng de volgende wijzigingen aan:
Hierdoor wordt aan de stapelweergave gerapporteerd om te proberen beperkingen toe te voegen die alle subvensters verticaal centreren en deze zo te maken dat ze de as van de stapelweergave gelijkmatig vullen. Daarnaast worden 30 opvulpunten toegevoegd aan de subweergaven.
Als de subweergaven niet in de stapelweergave kunnen passen, worden ze verkleind op basis van hun respectieve prioriteiten voor compressieweerstand. Dit kan gebeuren als u tijdens runtime subviews aan de stapelweergave toevoegt, zoals we later zullen zien.
Als er sprake is van onduidelijkheid, zal de stack-weergave terugvallen op het verkleinen van de subweergaven op basis van hun index in de arrangedSubviews array totdat ze passen in de grenzen van het stapelbeeld.
Voeg een label, een afbeeldingsweergave en een knop toe aan de bovenste stapelweergave door ze in de documentomtrek te slepen. Zorg ervoor dat het label bovenaan staat, de afbeelding in het midden en de knop onderaan. Het documentoverzicht van het storyboard zou er als volgt uit moeten zien nadat je deze subweergaven hebt toegevoegd:
Vervolgens moeten we enkele van de eigenschappen van de zojuist toegevoegde subweergaven bewerken met behulp van de Kenmerken Inspector. Voor het label, verander het Tekst naar "Hoe vind je onze app?" en selecteer Centrum voor Tekstuitlijning. Wat betreft de afbeeldingweergave, voer "logo" in voor de Beeld en EENspect Fit voor de Inhoudsmodus. Stel de knop in voor de knop Tekst om "Ster toe te voegen!".
Ga je gang en start de app. Je zult zien dat je met heel weinig werk drie subweergaven hebt toegevoegd die reageren op elke verandering in oriëntatie, grootteklasse, enz. Eigenlijk hoefde je niet eens handmatig beperkingen toe te voegen.
Terwijl de app actief is, klikt u op de Debug View Hierarchy knop onderaan het Xcode-venster om live view-foutopsporing te starten.
Selecteer een van de drie subweergaven die u eerder hebt toegevoegd. Kijk naar de formaatcontrole en let op de beperkingen die door de stapelweergave zijn toegevoegd. De onderstaande afbeelding toont de beperkingen die zijn toegevoegd voor de knop.
De knop om sterren toe te voegen voor onze mock-app is nog niet aangesloten. Laten we dat nu oplossen. Stop de app en open het storyboard. Creëer een IBAction met de naam addStar voor de Touch Up Inside evenement.
Voeg de volgende code toe binnen de addStar (_ :) methode:
@IBAction func addStar (afzender: AnyObject) let starImgVw: UIImageView = UIImageView (afbeelding: UIImage (named: "star")) self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0.25, animations: self.horizontalStackView.layoutIfNeeded ())
We voegen een sterafbeelding toe aan de horizontale stapelweergave met een animatie. Houd er rekening mee dat we alleen hoeven te bellen omdat stackweergaven de Auto Layout-beperkingen voor ons beheren layoutIfNeeded om een animatie te maken.
Bouw en voer de app opnieuw uit en voeg een ster toe. Je zult zien dat het eindresultaat niet is waar we op hoopten.
Als je naar de Kenmerken Inspector als de onderste stapelweergave is geselecteerd, moet het probleem duidelijk zijn. Aangezien beide opstelling en Distributie zijn ingesteld op Vullen, in de stapelweergave wordt de ster uitgerekt om de grenzen te vullen.
Dit zal ook meer problemen veroorzaken als er meer sterren worden toegevoegd. We willen dat de sterren gecentreerd zijn, niet uitgerekt om in de breedte van de stapelweergave te passen. Verandering opstelling naar Centrum en Distributie naar Gelijk vullen. Werk ten slotte het addStar (_ :) methode door de beeldweergave in te stellen Inhoudsmodus naar Aspect Fit.
@IBAction func addStar (afzender: AnyObject) let starImgVw: UIImageView = UIImageView (afbeelding: UIImage (named: "star")) starImgVw.contentMode = .ScaleAspectFit self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0.25, animaties: self.horizontalStackView.layoutIfNeeded ())
Bouw en run de app nog een keer. Voeg een paar sterren toe en zie hoe het stapelaanzicht ze op de juiste manier centreert.
Onze app zou niet erg behulpzaam zijn zonder de mogelijkheid om sterren te verwijderen. Open het storyboard en voeg een toe horizontaal stapelweergave naar de weergavehiërarchie van de bovenste stapelweergave. Zorg ervoor dat deze zich onder de afbeeldingweergave voor het logo en boven de knop bevindt.
Sleep de "ster toevoegen!" knop in de nieuw toegevoegde stapelweergave en voeg een tweede knop toe aan de nieuwe stapelweergave. Verander de titel van de knop naar "Ster verwijderen" en selecteer rood voor de tekstkleur. Het documentoverzicht zou er nu als volgt uit moeten zien:
Bewerk de kenmerken van de nieuwe stapelweergave in de Kenmerken Inspector, de volgende wijzigingen aanbrengen:
Creëer een IBAction voor de knop "Ster verwijderen" met een naam van removeStar voor de Touch Up Inside evenement.
Voeg de volgende code toe aan de removeAction (_ :) methode:
@IBAction func removeStar (afzender: AnyObject) let star: UIView? = self.horizontalStackView.arrangedSubviews.last if let aStar = star self.horizontalStackView.removeArrangedSubview (aStar) aStar.removeFromSuperview () UIView.animateWithDuration (0.25, animations: self.horizontalStackView.layoutIfNeeded ())
Bouw en voer de app uit. Je zou nu in staat moeten zijn om zowel sterren toe te voegen als te verwijderen. Verander de oriëntatie van de iOS Simulator of draai uw testapparaat om te zien hoe de app zich gedraagt door de gebruikersinterface aan te passen. Vergeet niet dat we de gebruikersinterface van deze app hebben gebouwd zonder handmatig een enkele beperking toe te voegen.
Houd er rekening mee dat de removeFromSuperview bel in de removeStar (_ :) methode is essentieel om de subview uit de weergavehiërarchie te verwijderen. Herhaal dat removeArrangedSubview (_ :) vertelt alleen de stapelweergave dat het niet langer nodig is om de beperkingen van de subweergave te beheren. De subweergave blijft echter in de weergavehiërarchie totdat we deze uit de superview verwijderen door te bellen removeFromSuperview ben ermee bezig.
De UIStackView klasse vereenvoudigt de ontwikkeling van gebruikersinterfaces. Dit is een goede zaak, vooral wanneer de hardware waarop de applicatie draait zoveel kan verschillen. Met UIStackView, ontwikkelaars kunnen minder tijd besteden aan het opzetten van vervelende beperkingen voor eenvoudige scenario's, waarbij ze het zware werk naar UIKit verplaatsen.
Als je tijdens deze tutorial op een bepaald moment vastloopt, kun je het voltooide project van GitHub downloaden.
