Getting gang med Auto Layout i Xcode 5
11
Del
to
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Innledning
Lage applikasjoner med fleksible planløsninger er blitt viktig, spesielt siden utgivelsen av iPhone 5 med sin 4 "skjerm og innføring av Dynamic Type i iOS 7, som tillater brukere å endre tekststørrelse på tvers av operativsystemet. Fleksible planløsninger kommer også i hendig med internasjonalisering i tankene.
1. Hva er det?
Auto Layout, som ble introdusert i iOS 6, kan du lage slike fleksible oppsett. Det er et flott alternativ til autoresizing masker eller manuelt legge ut programmets brukergrensesnitt.
Auto Layout kan du legge begrensninger til utsikt og definere forholdet mellom visningene. Forholdet kan være mellom en utsikt og Super, en av sine søsken, eller i forhold til seg selv.
I stedet for å spesifisere en visning ramme, lar Auto Layout du definere avstanden mellom og relative posisjonering av to- utsikt bruker begrensninger. Auto Layout bruker disse begrensningene å beregne runtime stillinger elementene i brukergrensesnittet.
Du må sette nok begrensninger på visning for å unngå tvetydighet om oppsettet. Det er også mulig å sette for mange begrensninger, som kan føre til konflikter og gjør programmet krasjer.
I Xcode 4, når du setter ufullstendige eller ugyldige begrensninger på en visning, Interface Builder ville erstatte dem med nye begrensninger som stort sett ikke gi deg den effekten du var etter. Dette førte til betydelig frustrasjon med utviklere. I Xcode 5, skjønt, er det mye enklere å bruke Auto Layout. Xcode ikke lenger tvinger begrensninger på en visning, i stedet får du tips og advarsler når en visning er begrensninger er ugyldig.
Selv om det er mulig å arbeide med Auto Layout programma, vil denne opplæringen skal se på hvordan du bruker Interface Builder å lage oppsett med Auto Layout.
2. Auto Layout Basics
For en enkel demonstrasjon av hva Auto Layout kan gjøre for deg, vil vi lage en enkel applikasjon og sette noen begrensninger på sine synspunkter. Opprett en ny Xcode prosjekt, velger du Enkel visning Application
mal og sette Enheter
til iPhone
.
Storyboards og XIB filer som er opprettet med Xcode 4.5 eller senere må Auto Layout aktivert som standard. Du kan deaktivere den i File Inspektør
til høyre ved å fjerne avkrysningsruten Bruk Auto Layout
.
En god grunn for å deaktivere Auto Layout er som støtter iOS 5 eller senke. Auto Layout støttes bare av iOS 6 og oppover. Men annet enn det, anbefaler Apple å bruke Auto Layout som det gjør etableringen av fleksible brukergrensesnitt raskere og enklere.
Åpne prosjektets hovedstoryboard, Main.storyboard
, legge en tekst utsikt til View Controller Scene
og posisjon som vist nedenfor.
Ingen begrensninger er satt på tekstvisning og dette har noen konsekvenser. Når du kjører programmet, er teksten utsikt plassert akkurat som i Interface Builder. Men når enheten roteres til liggende modus, fortsetter teksten sikte på å holde seg til den venstre kanten av utsikten og bredden er fast.
I byggetiden, er begrensninger automatisk generert for synspunkter som ikke har begrensninger, noe som forklarer atferden som vi ser. Begrensningene som er lagt til tekstvisning, for eksempel, er en venstre og topp begrensning at pin teksten utsikt til venstre, og en bredde og høyde begrensning at løse tekstvisning størrelse.
Når du begynner å definere begrensninger, men det er opp til deg å sørge for at de rammer for et syn ikke føre til konflikter. I neste avsnitt, legger vi til et par begrensninger til teksten sikte på å justere sin posisjon og størrelse når enheten roteres eller når vi kjøre programmet på, for eksempel en iPhone 5 som har en større skjerm.
3. Legge Begrensninger
Det er flere måter layout begrensninger kan legges til en visning.
Kontroll og Dra
Hold nede Ctrl
nøkkelen og dra fra visningen du vil legge til layout begrensningen til til en annen visning. Når du slipper museknappen, bør en meny med alternativer vises. Alternativene avhenger av retning Hotell og vise deg dratt for bedriften.
For å illustrere dette, dra fra teksten utsikt til toppen av visningen kontrolleren syn. Xcode vil markere begge visninger for å angi layout begrensningen omfatter begge visninger. Når du slipper museknappen, viser menylayout begrensninger som kan legges til kilden utsikten, tekstvisning. Å sentrere tekstvisning horisontalt i visningen kontrolleren syn, velg Senter horisontalt i Container
fra menyen. En oransje linje vises som et resultat, som betegner oppsettet begrensningen du har lagt til.
Auto Layout Meny
Du kan også legge til og redigere layout begrensninger ved bruk av Auto Layout-menyen på bunnen av Interface Builder arbeidsområdet.
Fra og fra venstre, menyen lar deg sluttar Hotell og pin Hver av de nevnte menyvalg kan også bli funnet i Xcode Editor For å legge til layout begrensninger i teksten, og velg visning i Xcode, hold nede Ctrl Du har kanskje lagt merke til at tekstvisning har en oransje omriss. Xcode forteller oss at teksten vise layout begrensninger er ugyldig eller ufullstendig. Vi har angitt at tekstvisning skal være sentrert horisontalt i den overordnede syn, men Auto Layout systemet ikke vet hvilken størrelse teksten syn bør være. La oss legge til noen flere begrensninger til teksten utsikt omrisset blir blå for å angi tekstvisning layout begrensninger gjelder. Legg merke til at det er mulig å ignorere advarslene og kjøre et program med ufullstendige layout begrensninger. Men du bør aldri sende en søknad med tvetydige layout begrensninger, fordi du ikke vet sikkert hva programmets brukergrensesnitt vil se ut på forskjellige enheter i forskjellige retninger. Med tekstvisning valgt, kontroll- Dra fra teksten utsikt til toppen av visningen kontrolleren syn og velg Top Space til toppen Guide Layout Deretter Kontroll-Drag fra teksten utsikt til visningen kontrolleren syn og velg Ledende Space til Container Teksten visning skisse bør være blå, indikerer layout begrensningene i tekstvisning er gyldige og fullstendige. Kjør programmet i iOS Simulator og endre sin orientering til inspisere resultatet. Merk at vi ikke trenger å legge til en horisontal plass begrensning for å angi avstanden fra tekstvisning høyre kant og dens Super, fordi vi angitt tekstvisning ledende plass og sentrert tekstvisning horisontalt i sin Super. Auto Layout systemet har nok informasjon til riktig legge ut tekstvisning. Vi kan oppnå samme resultat ved å angi fire plassbegrensninger og utelate justeringen begrensningen. Dette eksempelet har vist deg hvordan du setter layout begrensninger mellom tanke og moder visning. La oss se på et annet eksempel der satt vi layout begrensninger mellom søsken elementer. Begynn med å slette tekstvisning. Dette vil også slette teksten vise layout begrensninger. Legg et tekstfelt, en glidebryter, og en segmentert kontroll til visningen kontrolleren syn som vist nedenfor. Når du kjører programmet uten å sette noen begrensninger, vil de tre elementene holde seg til den venstre kanten av deres overordnede syn i landskapet. Men vi ønsker elementene for å fylle skjermen fulle bredde som vist nedenfor. Tekstfeltet bør utvide horisontalt og glideren bør også utvides til å dra nytte av skjermens bredde. Den segmentert kontroll, men bør ha en fast bredde. Velg tekstfeltet og klikk på Pin Velg glideren og gjenta de samme trinnene ved å sette en topp, venstre og høyre plass begrensning . Dette sikrer avstanden mellom sensoren og tekstfeltet og glideren og den segment kontroll er fast. Gjenta de samme trinnene for segmentert kontroll, men bare legge en topp og høyre (etterfølgende) plass begrensning. I tillegg, sjekk den Bredde Anmeldelser og klikker på Legg til 3 Begrensninger Når Xcode gir oss feil og advarsler om manglende eller ugyldige layout begrensninger, kan det ikke alltid vært klart hva begrensninger må legges til eller oppdatert. Xcode hjelper oss ved å vise oss hvilke begrensninger mangler i Document Outline Når en layout er ugyldig eller ufullstendig, er en rød pil synlig i Document Outline Anmeldelser . Når du klikker på pilen, glir et vindu fra høyre viser hvilke begrensninger mangler eller er ugyldig. Dette gir deg en anelse om hvordan å fikse layout. På høyre for hvert feil eller advarsel er en rød sirkel (feil) eller en gul trekant (advarsel). Når du klikker på feil eller advarsel, vises en meny med forslag for å løse problemet. Du kan også bruke Løse Auto Layout Issues Hvis du har lagt til layout begrensninger til en visning, og du endrer størrelse eller posisjon, fremhever Xcode visningen i oransje for å indikere at den aktuelle posisjonen og /eller størrelse er ikke i tråd med sine layout begrensninger. Hvis du kjører programmet, du ' ll se at Auto Layout system håndhever vise layout begrensninger og ignorerer utsikten nye størrelse og posisjon du har satt. Dette er en såkalt forlagt utsikt For å fikse dette, kan du enten slette layout begrensninger og sette nye, eller du kan la Xcode fikse det for deg. Du har to alternativer for å fikse en feilplassert utsikt I eksempelet ovenfor, velger vi Oppdater begrensninger Auto Layout systemet gjør legge ut brukergrensesnitt mye enklere og raskere. Før Auto Layout ble innført, utviklere måtte vanskelig kode et program brukergrensesnitt ved å sette en visning ramme og autoresizing maske. Med Auto Layout, dette er ikke lenger nødvendig. Ved riktig å sette en visning layout begrensninger, er dens posisjon automatisk oppdatert uansett størrelse skjermen eller orientering. Et annet område hvor Auto Layout er nyttig er søknad lokalisering. Ord og setninger har en annen lengde på forskjellige språk. Dette kan også løses med Auto Layout.
utsikt, løse Auto Layout problemer
og endre størrelse oppførsel
for den valgte visningen. La meg forklare hva hvert menyalternativ gjør.
skaper justerings begrensninger som lar deg sentrere et syn i sin container eller justere kantene av to visninger.
Pin
skaper avstandsbegrensninger. Du kan angi høyden og bredden på den valgte visningen eller angi visningen avstand til en annen visning.
menyen gir muligheten til å løse Auto Layout problemer, for eksempel ved å oppdatere visningen ramme eller legge til manglende begrensninger.
Endre størrelse
menyen lar deg angi skalering oppførselen til den valgte visningen og hvordan søsken og etterkommere er berørt.
Editor Meny
menyen.
Legger begrensninger
tasten, og dra fra teksten utsikt til toppen av visningen kontrolleren syn . Velg Senter horisontalt i Container
fra menyen som vises. Dette legger et oppsett begrensning som sikrer tekstvisning er alltid sentrert i visningen kontrolleren syn, uavhengig av enhetens retning.
. Dette setter en
vertikal plass begrensning fra visningen kontrollerens topp layout guide til teksten visningen topp.
å justere avstanden fra den overordnede syn til venstre for tekstvisning. Kontroll-Dra fra teksten utsikt til visningen kontrolleren syn og velg Bottom Space til Bottom Layout
å sette en vertikal plass begrensning fra visningen kontrollerens bunn layout guide til teksten visning bunnen.
knappen på Auto Layout menyen nederst. I avsnittet avstanden til nærmeste nabo
øverst på menyen, klikk øverst, til høyre, og venstre linjer som omkranser torget. Linjene skal bli rød som resultat. Deretter klikker du på knappen nederst merket Legg til 3 Begrensninger
å legge de angitte plassbegrensninger.
knappen nederst. Vi ønsker ikke den segmentkontrollen for å utvide når skjermstørrelsen endres de, det er derfor vi gi den en fast bredde.
4. Fikse Auto Layout Issues
fikse problemer
.
meny for å legge inn manglende begrensninger, nullstille en vise sin begrensninger, eller for å fjerne begrensninger. Xcode vil automatisk legge begrensninger til den valgte visningen for deg. Dette kan spare deg for tid, men merk at det er også mulig at den resulterende oppsettet er ikke hva du hadde tenkt.
Feilplasserte Visninger
. Bildet nedenfor viser en knapp som jeg flyttet etter å ha angitt sine layout begrensninger.
Du kan flytte og endre størrelsen på visningen for å matche sine layout begrensninger ved å velge Løse Auto Layout Issues >.; Oppdater Rammer
fra Xcode Editor
menyen
Eller du kan oppdatere sin layout begrensninger for å matche utsikten nye størrelse og posisjon ved å velge Løse Auto Layout Issues >.; Oppdater Begrensninger
fra Xcode Editor
menyen.
å oppdatere layout begrensninger til knappens nye størrelsen og posisjon, fordi vi ønsker å bevare knappen nye størrelse og posisjon.
Konklusjon