Introduction til Visual Format Språk
33
Del
12
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Auto Layout har vært tilgjengelig i noen år nå, men med iPhone 6 og 6 Pluss det har blitt en nødvendighet for prosjekter. Selv om det ikke alltid har vært spesielt enkelt å bruke, har Xcode stadig sett forbedringer i Interface Builder å gjøre integrere Auto Layout enklere. I denne opplæringen vil du lære hvordan du bruker Visual Format Språk bruker Swift å skape Auto Layout begrensninger i koden.
1. Innledning
Denne opplæringen forutsetter at du har litt kjennskap til Auto Layout. Hvis du er ny Auto Layout, så jeg oppfordrer deg til å lese innføringen av Joyce Echessa først.
Visual Format Språk er en deklarative språket som brukes til å definere Auto Layout begrensninger for utsikt. Syntaksen er uttrykksfulle og lett å forstå når du er skimming gjennom koden. De tiltenkte begrensninger bør være umiddelbart klart fra å lese en Visual Format Språk erklæringen og de strømmer mye som en setning.
Auto Layout begrensninger med ulike prioriteringer, vertikale oppsett, avstand og dimensjoner kan lages ved hjelp av Visual Format Språk syntaks. Det er definert inne i en streng variabel og deretter gått til klassen nivå metoder constraintsWithVisualFormat: alternativer: beregninger: visninger: og Selge constraintWithItem: attributt: relatedBy: toItem: attributt: multiplier: konstant: av NSLayoutConstraint klassen La oss lage et nytt prosjekt i Xcode for å se hvordan Visual Format Språk brukes, og hvordan prosjektene kan ha nytte av det Deretter navngi prosjektet og skriv inn organisasjonens navn og identifikator. Velg Universal For å begynne, opprette tre variabler av typen UIView. Åpne ViewController.swift og legge til følgende kode over viewDidLoad metode: Lag en funksjon som heter initViews nederst på visningen kontrolleren tomrommet som sin returtype. Denne funksjonen vil initial visninger og legge dem til hierarkiet visning. Pass på å kalle denne funksjonen i viewDidLoad etter ringer superklassen sin viewDidLoad metode Når du bruker Auto Layout på visninger opprettet i koden, er det et par ting å være klar over. Den første er knyttet til verdien av eiendommen translatesAutoresizingMaskIntoConstraints. Denne egenskapen er sant som standard, noe som betyr Auto Layout begrensninger vil bli opprettet basert på visningens autoresizing maske. Vi vil at visningen å respektere autooppsett begrensninger vi vil legge så denne egenskapen bør settes til false. Den andre tingen å huske på er utsikten livssyklus. Før Auto Layout begrensninger kan legges til en visning, må det legges til Super. Ellers er en runtime unntak kastet. Husker at Auto Layout definerer hvor utsikten er plassert basert på relasjoner. Hvis en visning har ingen Super, har operativsystemet ingen referansepunkt å forholde seg Auto Layout begrensninger til La oss begynne med et enkelt eksempel på Visual Format Språk. For den rød-visning, vwRed, vil vi legge til Auto Layout begrensninger som gjør det samme størrelse som sin Super. Dette er nyttig i en situasjon hvor du legger til et bakgrunnsbilde. Før du kan bruke Visual Format Språk, alle visningene som vi trenger må være referert i en ordbok. Dette er hvordan synspunktene vil bli identifisert med Visual Format Språk. Lag en funksjon kalt createConstraints med et tomrom returtype nederst i visningen kontrolleren klassen. Ikke bekymre deg om syntaksen. Vi vil se gjennomføringen av createConstraints funksjon i et øyeblikk Ring denne funksjonen på slutten av initViews funksjon vi opprettet Tidligere. Bygge og drive prosjektet ved å trykke Command + R eller ved å klikke på play-knappen øverst til venstre. IOS Simulator vil kjøre som viser rødt syn tar opp hele skjermen som forutsatt. Når du bruker Visual Format Språk er Auto Layout begrensninger definert enten horisontalt eller vertikalt. Du kan også definere høyde eller bredde av et syn når du erklære en vertikal og horisontal begrensning hhv. La oss ta en nærmere titt på den første strengen vi brukt til å lage den horisontale begrensningen . "H: | [red] |" Først må vi identifisere at dette vil være en horisontal begrensning ved å begynne strengen med bokstaven H. Horisontal er standard, men det er god praksis å inkludere det å gjøre det mer tydelig. Begrensningen retning er etterfulgt av et kolon . | eller rør symbol symboliserer visningens Super. For å legge til mellomrom mellom to elementer, det - er eller dash symbol brukt og heltallsverdiene kan plasseres mellom dem for å lage en fast eller variabel avstand. Visninger er referert av nøklene gitt i ordboken sendes til constraintsWithVisualFormat. Hver visning er innpakket i hakeparentes. Legg merke til hvordan hele strengen visuelt matcher bildet fra simulatoren. Det er skrevet som en setning som ville lese noe sånt som "horisontalt, skal den røde utsikt forlenge hele bredden av sin Super uten polstring." Nå som du har en grunnleggende forståelse av syntaks, kommer vi til å redigere createConstraints fungere å legge Auto Layout begrensninger til to visninger I createConstraints funksjon, redigere horizontalConstraints variable som vist nedenfor. Dette kodebiten virkelig viser fleksibiliteten i Visual Format Språk. Ovennevnte uttalelse skaper en rekke autooppsett begrensninger for oss. Ved siden av navnet på visningen, er horisontale størrelser definert i parentes. For den røde syn bør størrelsen være større enn eller lik 100 poeng, men mindre enn eller lik 200 poeng. Den blå syn angir at det skal ha samme horisontale størrelse som den røde visning ved hjelp == rødt i parentes. Dette er en praktisk måte å angi flere synspunkter bør ha samme størrelse. Bygge og drive appen i iOS Simulator. Resultatet skal se ut skjermbildet vist nedenfor Med applikasjonen kjører i iOS Simulator, trykker du Kommando + Pil venstre for å endre retningen på iOS Simulator til landskapet. Mens programmet fortsatt kjører bra, har en advarsel dukket opp i Xcode konsoll. Advarselen forteller oss at noen autooppsett begrensninger ikke kunne være fornøyd. Selv om dette ikke vil krasje søknaden din, kan det føre til uventede resultater innenfor programmets brukergrensesnitt. Dette skjer fordi de to visningene vi skapte ikke kan være 200 poeng bredt og har ingen avstand mellom dem når enheten eller iOS Simulator er i landskapet. Auto Layout løser disse typer scenarier ved hjelp prioriteringer. Visual Format Språk lar deg definere prioriteringer bruker @ -symbolet. Redigere horizontalConstraints variabel å lese sånt som dette: Fordi de røde og blå visninger har nå en lav prioritet på sin bredde begrensning, angitt med @ 20, Auto Layout systemet vil bryte disse begrensningene og forsyne dem med riktig verdi under kjøring. Kjøre programmet på nytt og endre retningen til liggende. Utsikten nå fylle den ekstra plassen og Xcode ikke gi noen advarsler Deretter vil vi skape begrensninger for den grønne utsikten. Oppdater gjennomføringen av createConstraints funksjon som vist nedenfor Fordi horizontalConstraintsGreen begrensningen ikke definerer en bestemt bredde eller avstanden til dens Super, vil den strekke seg over hele lengden. Den vertikale begrensningen sikre at det vil være 40 poeng høy med 10 poeng av avstanden mellom de røde og blå visninger. Hvis du kjører programmet en gang til, spenner den grønne utsikten hele bredden av skjermen og røde og blå visninger holde seg over det som de var før. Når iOS Simulator roteres til liggende, utsikten beholde sine posisjoner og endre størrelse på riktig For å gjøre alt mer lesbar, vil vi bruke en ordbok med beregninger i de begrensninger erklæringer. Lag en ordbok som vist nedenfor, umiddelbart etter erklære utsikt ordboken Now, stedet for å bruke hardkodede verdier, kan vi bruke verdiene av beregninger ordboken, som gjør uttalelser fra de begrensninger mye mer lesbar Rediger createConstraints fungere en siste gang med den nye beregninger ordboken Du lurer kanskje på hvorfor høyden på den grønne utsikten ble definert to ganger. Dette er fordi Visual Format Språk fungerer i rader og kolonner. Når bruker Visual Format Språk, tenke på å legge begrensninger venstre til høyre på en "rad" av utsikten for horisontale begrensninger. For vertikale begrensninger, må du tenke i form av søyler. De fleste av Auto Layout begrensninger du vil bruke kan uttrykkes med Visual Format Språk. Det er noen som ikke kan, imidlertid. For eksempel kan en fast størrelsesforhold begrensningen ikke bli opprettet ved hjelp av Visual Format Språk. Dette kan ikke oppnås med Visual Format Språk syntaks, fordi følgende strengen ikke kan analyseres: H: | imageView.width = 2 * imageView.height | Du kan fortsatt bruke Auto Layout i koden din for å oppnå disse typer begrensninger ved bruk av tradisjonelle constraintWithItem metoden. Visual Format Språk kan være svært nyttig når du trenger å skape Auto Layout begrensninger i kode. I stedet for å skape begrensninger én etter én, lar Visual Format Språk du oppretter en rekke begrensninger med en linje med kode. Før Auto Layout var tilgjengelig for utviklere, holde styr på hvordan du endrer størrelsen visninger for ulike utstyrskategorier var mye arbeid. Med Auto Layout og Visual Format Språk, dette er nå mer intuitivt, noe som gjør brukergrensesnitt lettere å holde på tvers av enheter.
2. Opprette et nytt prosjekt
Trinn 1:. Prosjekt Mal
< p> Åpne Xcode og velg New > Prosjekt ...
fra Fil
menyen. Velg Enkel visning Application
fra listen over iOS Applikasjons
maler og klikk Neste
Trinn 2:. Prosjekt Configuration
fra Enheter
listen, klikker du Neste
, og velge hvor du vil lagre prosjektet. Velg Swift
som programmeringsspråk.
3. Opprette en begrensning for en enkelt Vis
Trinn 1: definere variabler
Var vwBlue: UIView Var vwRed: UIView Var vwGreen: UIView
Trinn 2: Initial Views
func initViews () - >.; Void {//Initial vwRed = UIView () vwBlue = UIView () vwGreen = UIView () //Prep auto layout vwRed.setTranslatesAutoresizingMaskIntoConstraints (falske) vwBlue.setTranslatesAutoresizingMaskIntoConstraints (falske) vwGreen.setTranslatesAutoresizingMaskIntoConstraints (false) //Coloring vwRed.backgroundColor = UIColor.redColor () vwBlue.backgroundColor = UIColor.blueColor () vwGreen.backgroundColor = UIColor.greenColor () //Legg dem til visningen self.view.addSubview (vwRed) self.view.addSubview (vwBlue) self.view. addSubview (vwGreen)}
Trinn 3:. Opprett restriksjonene for en enkelt visning
func createConstraints () - >.; Void {//Views å legge begrensninger for å la visninger = ordbok (dictionaryLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) //Horisontale begrensninger la horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [red] |", alternativer: nil, beregninger: null, visninger: visninger) self.view.addConstraints (horizontalConstraints) //Vertikale begrensninger la verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("V: | [red] | "alternativer: nil, beregninger: null, visninger: visninger) self.view.addConstraints (verticalConstraints)}
Trinn 4: Bygg og Kjør
4. Analysere Visual Format Språk Syntax
5. Opprette Begrensninger for flere visninger
Trinn 1:. Edit Horisontal begrensning
//Horisontal constraintslet horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[red(>=100,<=200)]-0-[blue(==red)]-10-|", Alternativer: null, beregninger: null, visninger: visninger) self.view.addConstraints (horizontalConstraints)
Trinn 2:. Legge satsinger
//Horisontal constraintslet horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[red(>=100,<=200@20)]-0-[blue(==red)]-10-|", alternativer: nil, beregninger: null, visninger: visninger)
Trinn 3:. Legge begrensninger i forhold til undersiden
func createConstraints () - >.; Void {//Views å legge begrensninger for å la visninger = ordbok (dictionaryLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) //Horisontale begrensninger la horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[red(>=100,<=200@20)]-0-[blue(==red)]-10-|", Alternativer: null, beregninger: null, utsikt: visninger) self.view.addConstraints (horizontalConstraintsRedBlue) la horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [green] |", alternativer: nil, beregninger: null, visninger: visninger) selv .view.addConstraints (horizontalConstraintsGreen) //Vertikale begrensninger la verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat ("V: | [red] -10- [grønt (40)] |", alternativer: nil, beregninger: null, visninger: visninger) selv .view.addConstraints (verticalConstraintsRed) la verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat ("V: | [blue] -10- [grønt (40)] |", alternativer: nil, beregninger: null, visninger: visninger) self.view.addConstraints (verticalConstraintsBlue)}
Trinn 4:. Legge Metrics
la beregninger = Dictionary (dictionaryLiteral:. ("Mellomrom", 10),("lowWidth",100),("highWidth",200),("priority",20),("redBlueSpacing",0),("greenHeight",40))
func createConstraints ().. - > Void {//Views å legge begrensninger for å la visninger = ordbok (dictionaryLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) //Metrics for Visual Format streng la beregninger = Dictionary (dictionaryLiteral: ("spacing", 10), («lowWidth", 100), («highWidth", 200), ("prioritet", 20), («redBlueSpacing", 0), ("greenHeight" , 40)) //Horisontale begrensninger la horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat("H:|-spacing-[red(>=lowWidth,<=highWidth@priority)]-redBlueSpacing-[blue(==red)]-spacing-|", Alternativer: null, beregninger: beregninger, visninger: visninger) self.view.addConstraints (horizontalConstraintsRedBlue) la horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [green] |", alternativer: null, metrics: nil, utsikt: visninger) selv .view.addConstraints (horizontalConstraintsGreen) //Vertikale begrensninger la verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat ("V: | [red] -spacing- [grønt (greenHeight)] |", alternativer: nil, beregninger: beregninger, visninger: visninger) selv .view.addConstraints (verticalConstraintsRed) la verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat ("V: | [blå] -spacing- [grønn (greenHeight)] |", Alternativer: nil, metrics: metrics, utsikt: visninger) self.view.addConstraints (verticalConstraintsBlue)}
6. Begrensninger av Visual Format Språk
Konklusjon