Share
Auto Layout har vært tilgjengelig i noen år nå, men med iPhone 6 og 6 Plus er det 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 for å gjøre integrering av Auto Layout enklere. I denne veiledningen lærer du hvordan du bruker Visual Format Language ved hjelp av Swift for å opprette begrensninger for automatisk oppsett i kode.
Denne opplæringen antar at du har litt kunnskap om Auto Layout. Hvis du er ny Auto Layout, oppfordrer jeg deg til å lese introduksjonen av Joyce Echessa først.
De Visual Format Language er et deklarativt språk som brukes til å definere begrensninger for automatisk oppsett for visninger. Syntaxen er uttrykksfulle og enkle å forstå når du skummer gjennom kode. De påtatte begrensningene bør umiddelbart være tydelige når de leser et setningsspråk for visuelt format og de flyter mye som en setning.
Auto Layout-begrensninger med forskjellige prioriteringer, vertikale oppsett, mellomrom og dimensjoner kan opprettes ved hjelp av Syntaks for Visual Format Language. Det er definert i en strengvariabel og deretter bestått til klassenivåmetodene constraintsWithVisualFormat: alternativer: beregninger: visninger: og
constraintWithItem: attributt: relatedBy: toItem: attributt: multiplier: konstant: av NSLayoutConstraint klasse.
Visual Format Language kan være spesielt nyttig når Interface Builder ikke er et alternativ for å legge til begrensninger for automatisk oppsett, for eksempel når en del av programmets brukergrensesnitt må opprettes programmatisk.
La oss lage et nytt prosjekt i Xcode for å se hvordan Visual Format Language brukes og hvordan prosjektene dine kan dra nytte av det.
Åpne Xcode og velg Nytt> Prosjekt ... fra Fil Meny. Velge Enkeltvisningsprogram fra listen over iOS-applikasjon maler og klikk neste.
Neste, navn prosjektet ditt og skriv inn organisasjonens navn og ID. Velge Universell fra enheter liste, klikk neste, og velg et sted for å lagre prosjektet. Å velge Fort som programmeringsspråk.
For å begynne, opprett tre variabler av typen UIView. Åpen ViewController.swift og legg til følgende kode over viewDidLoad metode:
var vwBlue: UIView! var vwRed: UIView! var vwGreen: UIView!
Lag en funksjon som heter initViews nederst på visningsregulatoren tomrom som retur type. Denne funksjonen vil initialisere visningene og legge dem til visningshierarkiet. Husk å ringe denne funksjonen inn viewDidLoad etter å ha ringt superklassens viewDidLoad metode.
func initViews () -> Slett // Initialize vwRed = UIView () vwBlue = UIView () vwGreen = UIView () // Prep automatisk oppsett vwRed.setTranslatesAutoresizingMaskIntoConstraints (false) vwBlue.setTranslatesAutoresizingMaskIntoConstraints (false) vwGreen.setTranslaterAutoresizingMaskIntoConstraints (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)
Når du bruker Auto Layout på visninger opprettet i kode, er det noen advarsler å være klar over. Den første er relatert til verdien av eiendommen translatesAutoresizingMaskIntoConstraints. Denne eiendommen er ekte som standard, noe som betyr at automatisk oppsett begrensninger vil bli opprettet basert på visningens autoresiserende maske. Vi ønsker at visningen skal respektere de automatiske oppsettbegrensningene vi vil legge til, slik at denne egenskapen skal settes til falsk.
Den andre tingen å huske på er visningen livssyklus. Før begrensninger for automatisk oppsett kan legges til i en visning, må den legges til i overvåkning. Ellers kastes et kjøretid unntak. Husk at Auto Layout definerer hvor visninger er plassert basert på relasjoner. Hvis en visning ikke har overvåkning, har operativsystemet ikke noe referansepunkt for å knytte de automatiske oppsettbegrensningene til.
La oss begynne med et enkelt eksempel på Visual Format Language. For den røde visningen, vwRed, Vi legger til begrensninger for automatisk oppsett som gjør den til samme størrelse som overvåkingen. Dette er nyttig i et scenario der du legger til et bakgrunnsbilde.
Før Visual Language kan brukes, må alle visningene vi trenger refereres inne i en ordbok. Slik blir visningene identifisert av Visual Format Language.
Lag en funksjon som heter createConstraints med en tomrom retur type nederst i visnings-kontrollerklassen. Ikke bekymre deg for syntaksen. Vi vil se gjennom implementeringen av createConstraints fungere i et øyeblikk.
Accentsconagua
func createConstraints () -> Feid // Visninger for å legge til begrensninger for å la visninger = Ordbok (ordbokLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) // Horisontale begrensninger la horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [red] |", alternativer: null, metriske: null, visninger: visninger) self.view.addConstraints (horizontalConstraints) // Vertikale begrensninger lar verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("V : | [rød] | ", alternativer: null, beregninger: null, visninger: visninger) self.view.addConstraints (verticalConstraints)Ring denne funksjonen på slutten av initViews funksjonen vi opprettet tidligere. Bygg og kjør prosjektet ved å trykke Kommando + R eller ved å klikke på avspillingsknappen øverst til venstre. IOS-simulatoren kjører som viser den røde visningen, og tar opp hele skjermen som ønsket.
Når du bruker Visual Format Language, defineres Auto Layout-begrensninger enten horisontalt eller vertikalt. Du kan også definere høyde eller bredde på en visning når du erklærer en vertikal og horisontal begrensning henholdsvis. La oss ta en nærmere titt på den første strengen vi pleide å lage den horisontale begrensningen.
"H: | [red] |"
Først identifiserer vi at dette vil være en horisontal begrensning ved å begynne strengen med brevet H. Horisontal er standard, men det er god praksis å inkludere det for å gjøre det mer tydelig. Begrensningens retning er etterfulgt av en kolon.
De | eller rør symbol symboliserer visningens overvåkning. For å legge til mellomrom mellom to elementer, - eller dash symbol brukes og heltall verdier kan plasseres mellom dem for å opprette en fast eller variabel avstand. Visninger er referert av nøklene som er gitt i ordboken bestått til constraintsWithVisualFormat. Hver visning er innpakket i firkantede parenteser.
Legg merke til hvordan hele strengen visuelt samsvarer med bildet fra simulatoren. Det er skrevet som en setning som vil lese noe som "Horisontalt, den røde visningen skal utvide hele bredden av overvåking uten polstring."
Nå som du har en grunnleggende forståelse av syntaksen, skal vi redigere createConstraints funksjon for å legge til begrensninger for automatisk oppsett til to visninger.
I createConstraints funksjon, rediger horizontalConstraints variabel som vist nedenfor.
// Horisontale begrensninger lar horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraints)Denne kodestykket viser virkelig fleksibiliteten til Visual Format Language. Ovennevnte setning skaper et antall autoutlastingskrav for oss. Ved siden av navnet på visningen defineres horisontale størrelser i parentes. For den røde visningen skal størrelsen være større enn eller lik 100 poeng, men mindre enn eller lik 200 poeng.
Den blå visningen angir at den skal ha samme horisontale størrelse som den røde visningen ved bruk av == rød i parantes. Dette er en enkel måte å angi at flere visninger skal ha samme størrelse. Bygg og kjør appen i iOS-simulatoren. Resultatet skal se ut som skjermbildet som vises nedenfor.
Når programmet kjører i iOS-simulatoren, trykker du på Kommando + Venstre pil å endre orienteringen til iOS-simulatoren til landskapet. Mens applikasjonen fortsatt går bra, har en advarsel dukket opp i Xcodes konsoll. Advarselen forteller oss at noen begrensninger for automatisk oppsett ikke kunne tilfredsstilles. Selv om dette ikke vil krasje din søknad, kan det føre til uventede resultater i applikasjonens brukergrensesnitt.
Dette skjer fordi de to visningene vi opprettet ikke kan være 200 punkter brede og har ingen mellomrom mellom dem når enheten eller iOS-simulatoren er i landskap. Auto Layout løser disse typer scenarier ved hjelp av prioriteringer. Visual Format Language lar deg definere prioriteringer ved hjelp av @ symbol. Rediger horizontalConstraints variabel for å lese slik:
// Horisontale begrensninger lar horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [red (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)Fordi den røde og blå visningen nå har lav prioritet på deres breddebegrensning, angitt av @ 20, Auto Layout-systemet vil bryte disse begrensningene og gi dem den riktige verdien ved kjøring. Kjør programmet igjen og endre orienteringen til landskapet. Visningene fyller nå ekstra plass og Xcode gir ingen advarsler.
Deretter vil vi skape begrensninger for den grønne visningen. Oppdater implementeringen av createConstraints fungere som vist nedenfor.
func createConstraints () -> Feid // Visninger for å legge til begrensninger for å la visninger = Ordbok (ordbokLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) // Horisontale begrensninger la horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [rødt (> = 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) Fordi det horizontalConstraintsGreen begrensning definerer ikke en bestemt bredde eller avstand til oversikten, den vil spenne hele lengden. Den vertikale begrensningen sikrer at den vil være 40 poeng høy med 10 punkter mellomrom mellom de røde og blåa visningene.
Hvis du kjører programmet enda en gang, spenner den grønne visningen over hele bredden på skjermen, og de røde og blå visningene forblir over det som de var før. Når iOS-simulatoren roteres til landskap, beholder visningene sine posisjoner og endres på riktig måte.
For å gjøre alt mer lesbart, bruker vi en ordbok med beregninger i begrensningsdeklarasjonene. Lag en ordbok som vist nedenfor, umiddelbart etter å ha erklært visninger ordbok.
la metrics = Dictionary (DictionaryLiteral: ("spacing", 10), ("lowWidth", 100), ("highWidth", 200), ("prioritet", 20), ("redBlueSpacing", 0) ", 40))Nå, i stedet for å bruke hardkodede verdier, kan vi bruke verdiene til beregninger ordbok, som gjør deklarasjonene av begrensningene mye mer lesbare. Rediger createConstraints fungere en siste gang med den nye beregninger ordbok.
func createConstraints () -> Gyldig // Visninger for å legge til begrensninger for å la visninger = Ordbok (ordbokLiteral: ("rød", vwRed), ("blå", vwBlue), ("grønn", vwGreen)) // Metrics for Visual Format string let metrics = Ordbok (DictionaryLiteral: ("spacing", 10), ("lowWidth", 100), ("highWidth", 200), ("prioritet", 20), ("redBlueSpacing", 0) ("greenHeight", 40)) // Horisontale begrensninger lar 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) Du lurer kanskje på hvorfor høyden på den grønne visningen ble definert to ganger. Dette skyldes at Visual Format Language fungerer i rader og kolonner. Når du bruker Visual Format Language, tenk å legge til begrensninger venstre til høyre på en "rad" av visningen for horisontale begrensninger. For vertikale begrensninger må du tenke i form av kolonner.
De fleste av de automatiske oppsettbegrensningene du vil bruke, kan uttrykkes med Visual Format Language. Det er noen som ikke kan. For eksempel kan det ikke opprettes et fast aspektforholdsbegrensning ved hjelp av Visual Format Language. Dette kan ikke oppnås med Syntaks for Visual Format Language, fordi følgende streng ikke kan analyseres:
H: | imageView.width = 2 * imageView.height |
Du kan fortsatt bruke Auto Layout i koden din for å oppnå disse typer begrensninger ved hjelp av den tradisjonelle constraintWithItem metode.
Visual Format Language kan være svært nyttig når du trenger å opprette begrensninger for automatisk oppsett i kode. I stedet for å skape begrensninger en etter en, lar Visual Format Language deg opprette en rekke begrensninger med en linje med kode.
Før automatisk oppsett var tilgjengelig for utviklere, var det mye arbeid å holde oversikt over hvordan du endrer størrelsen på visninger for ulike enhetskategorier. Med Auto Layout og Visual Format Language er dette nå mer intuitivt, noe som gjør brukergrensesnitt lettere å vedlikeholde på tvers av enheter.
