iOS 9: Komme i gang med UIStackView
32
Del
6
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Som alle gjentakelse av iOS, iOS 9 bringer frem en rekke nye funksjoner. UIKit forandrer seg med hver utgivelse av iOS, men en spesiell tillegg i iOS 9 vil endre hvordan utviklere fundamentalt tenke på å lage brukergrensesnitt på iOS, UIStackView. I denne opplæringen vil du lære hvordan du bruker UIStackView å lage brukergrensesnitt.
Denne artikkelen forutsetter at du er kjent med det grunnleggende Auto Layout. Hvis dette faget er nytt for deg, så vår innledende tutorial om Auto Layout er et godt sted å begynne. For å forstå hvorfor stabelen utsikten er så hjelpsomme og hvordan de opererer, er en solid forståelse av Auto Layout nødvendig.
1. Demo Preview
Ved hjelp UIStackView, skal vi bygge en mock-skjerm som ber brukeren om å forlate en karakter for sin app. Brukeren kan legge til eller fjerne stjerner i brukergrensesnittet for å indikere deres vurdering. Det vil se slik ut når vi er ferdig.
Last ned den starter prosjektet fra GitHub og åpne den. Du vil se at det er to stack utsikt innenfor Main.Storyboard.
Vi vil bruke de to stakk utsikt til å legge ut brukergrensesnittet. Før vi begynner koding, la oss først ta kort titt på hvordan en stabel vise verk.
2. UIStackView Oversikt
I kjernen, er stabelvisning et grensesnitt for å legge ut flere subviews, enten vertikalt eller horisontalt. Hvis du har Android utvikling erfaring, er det ligner på LinearLayout kontroll.
En av de viktigste fordelene av stabelen syn er at det vil automatisk opprette Auto Layout begrensninger for hver subview som er lagt til den. Du har også endelig kontroll over hvordan disse subviews er dimensjonert og plassert. Det finnes alternativer til å konfigurere dimensjonering av visningene, hvor de skal ordnes, samt hvor mye polstring skal ligge mellom subviews.
Legging ut Content
For å se alternativene for en stablet, åpen Main.Storyboard og velg ett av av visningene stabelen. I attributter Inspector, merke alternativene under Stack View.
Axis
avgjør om stabelvisning arrangerer sine subviews horisontalt eller vertikalt. Justering styrer hvordan den faktiske subviews bør være på linje. Distribusjon definerer hvordan subviews er størrelse og avstand styrer minimum avstand mellom subviews av stabelvisning.
For å forenkle disse vilkårene, tenk på det slik. Alignment styrer X- og Y-verdiene mens Distribusjon styrer høyde og bredde. De to andre verdier kan også påvirke justeringen. Baseline Relativ, hvis valgt, vil utlede vertikal avstand mellom hver subview fra sin baseline. Layoutmargene Relative plasserer subviews forhold til standard layoutmargene hvis valgt.
En annen viktig ting å huske på når du arbeider med en stabel syn er at det er bygget for å være en beholder utsikten. På grunn av det, er det en nonrendering underklasse av UIView. Det er ikke trekke til lerretet som andre UIView underklasser. Dette betyr at innstillingen egenskaper som bakgrunnsfarge eller overstyrer drawRect: metode vil ha noen effekt på stabelvisning
subviews og arrangedSubviews
Før vi begynner å jobbe med utsikt stack, jeg. d liker å fokusere på forskjellen mellom en stabel vise sin subviews og arrangedSubviews egenskaper. Hvis du ønsker å legge en subview for stabelvisning for å administrere, gjør du det ved å ringe addArrangedSubview: eller insertArrangedSubview: atIndex :. Den arrangedSubViews matrise er en undergruppe av sin subviews eiendom
For å fjerne en subview at stabelvisning styrer, du må ringe både Nå som vi har en solid forståelse av hvordan stabelvisning fungerer på, la oss begynne å bruke en stabel utsikt. Åpne Main.Storyboard og velge det øverste stabelvisning. I attributter Inspector, gjøre følgende endringer: Dette vil fortelle stabelvisning for å prøve og legge begrensninger som senter alle subviews vertikalt og størrelse dem slik at de fyller stabelvisning akse jevnt. I tillegg vil det legge 30 poeng av padding til subviews. Hvis subviews ikke er i stand til å passe inn i bunken utsikt, det vil krympe dem basert på deres respektive trykkmotstandighet prioriteringer. Dette kan skje hvis du skulle legge subviews til stabelvisning under kjøring som vi skal se senere. Hvis det er noen tvetydighet, vil stabelvisning falle tilbake til krymper subviews basert på deres indeks i sin arrangedSubviews rekke til de passer bunken vise sin grenser. Legg til en etikett, et bilde visning, og en knapp til toppen stabelvisning ved å dra dem i dokumentet disposisjonen. Sørg for at etiketten er på toppen, bildevisningen i midten, og den knappen nederst. Dreieboken dokument disposisjon skal se slik ut etter at du har lagt til disse subviews: Deretter vil vi trenger å redigere noen av egenskapene til de subviews vi nettopp har lagt, ved hjelp av attributter Inspector. For etiketten, endre tekst til "Hvordan liker du vår app?" og velg Senter for Tekstjustering. Som for bildevisningen, skriv "logo" for bilde og Aspect Fit for innhold Mode. For på knappen, setter sin tekst til "Legg til Star!". Gå videre og kjøre programmet. Du vil se at med svært lite arbeid, har du lagt til tre subviews som reagerer på eventuelle endringer i orientering, størrelsesklasse, etc. Faktisk har du ikke engang å legge noen begrensninger manuelt. Mens app kjører, klikker du på Debug Vis Hierarki knappen nederst i Xcode vinduet for å starte live view debugging. Velg en av de tre subviews du har lagt tidligere. Se på størrelsen inspektør og legge merke til de begrensninger som ble lagt ved stabelvisning. Bildet nedenfor viser begrensningene lagt på knappen. knappen for å legge til stjerner for vår mock app ikke er koblet opp ennå. La oss fikse det nå. Stoppe programmet og åpne storyboard. Opprett en IBAction med et navn på addStar for Touch Up Inside hendelsen Legg til følgende kode inne i addStar (_ :) metode. Vi legger en stjerne bilde til den horisontale stabelvisning med en animasjon. Husk, siden utsikt stack klarer Auto Layout begrensninger for oss, vi trenger bare å ringe layoutIfNeeded å lage en animasjon. Bygg og kjøre programmet på nytt og legge til en stjerne. Du vil se at sluttresultatet er ikke hva vi håpet på. Hvis du ser på den attributter Inspector med bunnen stabelvisning velges, bør problemet være klart. Siden både Alignment and Distribution er satt til å fylle, er stabelvisning strekker stjernen for å fylle sine grenser. Dette vil også føre til mer problemer når flere stjerner er lagt til. Vi ønsker stjernene å være sentrert, ikke strukket til å passe bredden av stabelen visning. Endre Justering av Senter og Distribusjon til Fill Like. Endelig oppdatere addStar (_ :) metoden ved å sette bildevisningen innholds Mode til Aspect Fit Bygg og kjør programmet en gang til. Tilsett noen stjerner og merker hvordan stabelvisning sentre dem riktig sammen sin egen akse. Vår app ville ikke være veldig nyttig uten evne til å fjerne stjerner. Åpne dreieboken og legge en horisontal stabel utsikt til toppen stabelvisning syn hierarki. Sørg for at det er plassert under bildevisningen for logoen og over knappen. Dra "Legg Star!" knappen inne i nylig lagt stabelvisning og legge til andre knappen til den nye stabelvisning. Endre knappen tittel "Fjern Star" og velge rødt for tekstfarge. Dokumentet omrisset skal nå se slik ut: Rediger attributtene til ny bunke visning i Attributter Inspector, gjør følgende endringer: Opprett en IBAction for "Fjern Star" knappen med navnet removeStar for Touch Up Inside hendelsen Legg til følgende kode i removeAction (_ :) metode:. bygge og drive programmet. Du skal nå være i stand til å både legge til og fjerne stjerner. Endre retningen på iOS Simulator eller rotere testing enhet for å se hvordan programmet oppfører seg ved å justere sitt brukergrensesnitt. Husk at vi har bygget brukergrensesnittet til dette programmet uten å måtte legge en eneste begrensningen manuelt. Husk at removeFromSuperview samtalen i removeStar (_ :) metode er viktig for å fjerne subview fra hierarkiet visning. Husker at removeArrangedSubview (_ :) bare forteller stabelen oppfatning at det ikke lenger er behov for å administrere subview sin begrensninger. Den subview, men er fortsatt i hierarkiet utsikten før vi tar den ut av Super ved å ringe removeFromSuperview på den. UIStackView klasse forenkler utvikling av brukergrensesnitt. Dette er en god ting, spesielt når maskinvaren programmet kjører på kan variere så mye. Med UIStackView, kan utviklere bruke mindre tid på å sette opp kjedelige begrensninger for enkle scenarier, skiftende de tunge løftene til UIKit. Hvis du ble sittende fast på noe tidspunkt i løpet av denne opplæringen, gjerne laste ned det ferdige prosjektet fra GitHub.
removeArrangedSubview. Og removeFromSuperview. Fjerne et arrangert subview sikrer stabelvisning vil ikke lenger klarer det vise sin begrensninger. Det trenger ikke ta den ut av hierarkiet visning. Dette er veldig viktig å huske.
3. Konfigurering av Vertical Stack Vis
sette Justering av Senter
sette Distribusjon til lik avstand
sette Avstand til 30
4. Legge Vertical Stack subviews
5. Legge Stars
IBAction Func addStar (avsender: AnyObject) {la starImgVw: UIImageView = UIImageView (bilde: UIImage (kalt: "stjerne")) self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0,25, animasjoner: {self.horizontalStackView.layoutIfNeeded ()})}
IBAction func addStar (avsender. AnyObject) {la starImgVw: UIImageView = UIImageView (bilde: UIImage (kalt: "stjerne" )) starImgVw.contentMode = .ScaleAspectFit self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0,25, animasjoner: {self.horizontalStackView.layoutIfNeeded ()})}
6. Nesting Stack Views
sette Justering av Senter
< li> sette Distribusjon
til lik avstand
sette avstanden til 10
7. Fjerne Stars
IBAction func removeStar (avsender: AnyObject) {la stjerne: UIView? = Self.horizontalStackView.arrangedSubviews.last hvis la Astar = stjerners {self.horizontalStackView.removeArrangedSubview (Astar) aStar.removeFromSuperview () UIView.animateWithDuration (0,25, animasjoner: {self.horizontalStackView.layoutIfNeeded ()})}}
Konklusjon