Share
Opprettelse av applikasjoner med fleksible layouter har blitt viktig, spesielt siden utgivelsen av iPhone 5 med sin 4-tommers skjerm og introduksjonen av Dynamic Type i iOS 7, slik at brukerne kan endre tekststørrelse på tvers av operativsystemet. Fleksible layouter kommer også til nytte med internasjonalisering i tankene.
Auto Layout, som ble introdusert i iOS 6, lar deg lage slike fleksible layouter. Det er et flott alternativ til autoresizing masker eller manuelt legge ut programmets brukergrensesnitt.
Auto Layout lar deg legge til begrensninger i visninger og definere forholdet mellom visninger. Forholdet kan være mellom et syn og dets tilsyn, en av søskenene, eller til og med i forhold til seg selv.
I stedet for å spesifisere spesifikt en visningsramme, kan du i Auto Layout definere mellomrom mellom og relativ posisjonering av to visninger ved hjelp av begrensninger. Auto Layout bruker disse begrensningene for å beregne kjøretidsposisjonene til brukergrensesnittelementene.
Du må sette nok begrensninger på visningen for å unngå tvetydighet om oppsettet. Det er også mulig å sette for mange begrensninger, noe som kan føre til konflikter og gjøre programkrasj.
I Xcode 4, når du angir ufullstendige eller ugyldige begrensninger i en visning, vil Interface Builder erstatte dem med nye begrensninger som for det meste ikke ga deg effekten du var ute etter. Dette førte til betydelig frustrasjon med utviklere. I Xcode 5 er det imidlertid mye lettere å bruke Auto Layout. Xcode tvinger ikke lenger begrensninger på en visning, men i stedet får du tips og advarsler når visningen er begrenset, er ugyldig.
Selv om det er mulig å arbeide med Auto Layout programmert, vil denne opplæringen se på hvordan du bruker Interface Builder til å lage oppsett ved hjelp av Auto Layout.
For en enkel demonstrasjon av hva Auto Layout kan gjøre for deg, oppretter vi et enkelt program og angir noen begrensninger på visningene. Opprett et nytt Xcode-prosjekt, velg Enkeltvisningsprogram mal og sett enheter til iPhone.
Storyboards og XIB-filer opprettet med Xcode 4.5 eller nyere, har automatisk oppsett aktivert som standard. Du kan deaktivere den i Filinspektør til høyre ved å fjerne merket i avmerkingsboksen Bruk Auto Layout.
En god grunn til å deaktivere Auto Layout støtter iOS 5 eller lavere. Automatisk oppsett støttes bare av iOS 6 og nyere. Men annet enn det, anbefaler Apple å bruke Auto Layout, da det blir raskere og enklere å lage fleksible brukergrensesnitt.
Åpne prosjektets hovedfortegnelse, Main.storyboard, legg til en tekstvisning til Se kontroller scene, og plasser den som vist nedenfor.
Ingen begrensninger er angitt i tekstvisningen, og dette har noen implikasjoner. Når du kjører programmet, er tekstvisningen plassert akkurat som i Interface Builder. Når enheten er rotert til liggende modus, fortsetter tekstvisningen imidlertid til den venstre kanten av visningen, og bredden er fast.
På byggetid genereres begrensninger automatisk for visninger som ikke har begrensninger, noe som forklarer atferden vi ser. Begrensningene som legges til i tekstvisningen, er for eksempel en venstre og topp begrensning som peker tekstvisningen til øverst til venstre, og en bredde- og høydebegrensning som fikser tekstvisningens størrelse.
Når du begynner å definere begrensninger, er det imidlertid opp til deg å sørge for at begrensningene for en visning ikke forårsaker konflikter. I neste avsnitt legger vi til noen begrensninger i tekstvisningen for å justere posisjon og størrelse når enheten roteres eller når vi kjører programmet på, for eksempel en iPhone 5 som har en større skjerm.
Det er flere måter å legge på layoutbegrensninger i en visning.
Hold nede Styre nøkkel og dra fra visningen du vil legge til layouten begrensning til til en annen visning. Når du slipper musen, skal en meny med alternativer vises. Alternativene avhenger av retning og se deg dratt til.
For å illustrere dette drar du fra tekstvisningen til toppen av visningsregulatorens visning. Xcode vil markere begge visninger for å indikere at utformingsbegrensningen inkluderer begge visningene. Når du slipper musen, viser menyen oppsettbegrensningene som kan legges til kildevisningen, tekstvisningen. For å sentrere tekstvisningen horisontalt i visningskontrollens visning, velg Senter horisontalt i beholderen fra menyen. En oransje linje vises som et resultat, og indikerer layouten som du nettopp har lagt til.
Du kan også legge til og redigere layoutbegrensninger ved hjelp av menyen Auto Layout nederst i arbeidsområdet for grensesnittbygger.
Begynner fra venstre, lar menyen deg rette inn og tapp visninger, løse problemer med automatisk oppsett, og den endre størrelse oppførsel for den valgte visningen. La meg forklare hva hvert menyalternativ gjør.
Hvert av de nevnte menyalternativene kan også bli funnet i Xcode's Redaktør Meny.
For å legge til layoutbegrensninger i tekstvisningen, velg visningen i Xcode, hold nede Styre nøkkel, og dra fra tekstvisningen til toppen av visningsregulatorens visning. Å velge Senter horisontalt i beholderen fra menyen som vises. Dette legger til en begrensningsbegrensning som sikrer at tekstvisningen alltid er sentrert i visningsstyringsvisningen, uavhengig av enhetens orientering.
Du har kanskje lagt merke til at tekstvisningen har en oransje disposisjon. Xcode forteller oss at tekstvisningens layoutbegrensninger er ugyldige eller ufullstendige. Vi har angitt at tekstvisningen skal være sentrert i sin overordnede visning, men systemet Auto Layout vet ikke hvilken størrelse tekstvisningen skal være. La oss legge til noen flere begrensninger til tekstvisningens disposisjon blir blå for å indikere at tekstvisningen er utformet begrensninger er gyldige.
Vær oppmerksom på at det er mulig å ignorere advarslene og kjøre et program med ufullstendige layoutbegrensninger. Du bør imidlertid aldri sende et program med tvetydige layoutbegrensninger, fordi du ikke vet sikkert hva applikasjonsgrensesnittet vil se ut på forskjellige enheter i forskjellige retninger.
Med tekstvisningen valgt, Control-Drag fra tekstvisningen til toppen av visningskontrollens visning og velg Topp plass til topplayoutguide. Dette setter a vertikal plassbegrensning fra visningskontrollørens øverste oppsettguide til tekstvisningens topp.
Deretter styr-Dra fra tekstvisningen til visningskontrollørens visning og velg Ledende plass til containere for å angi avstanden fra foreldrevisningen til venstre for tekstvisningen. Kontroll-Dra fra tekstvisningen til visningskontrollens visning og velg Bunn plass til nedre layout for å angi en vertikal plassbegrensning fra visningscontrollerens nederste layoutguide til tekstvisningen nederst.
Tekstvisningens disposisjon skal være blå, noe som indikerer at utformingsbegrensningene i tekstvisningen er gyldige og fullførte. Kjør programmet i iOS-simulatoren og endre orienteringen for å inspisere resultatet.
Merk at vi ikke behøvde legge til en horisontal plassbegrensning for å angi avstanden fra tekstvisningens høyre kant og dens overvåkning, fordi vi angav tekstvisningens ledende plass og sentrert tekstvisningen horisontalt i overvåkingen. Auto Layout-systemet har nok informasjon til å legge ut tekstvisningen riktig. Vi kan oppnå det samme resultatet ved å spesifisere fire plassbegrensninger og utelate justeringsbegrensningen.
Dette eksempelet har vist deg hvordan du angir oppsettbegrensninger mellom en visning og dens overordnede visning. La oss se på et annet eksempel der vi stiller oppsettbegrensninger mellom søskenelementer.
Begynn med å slette tekstvisningen. Dette vil også slette tekstvisningens layoutbegrensninger. Legg til et tekstfelt, en glidebryter og en segmentert kontroll til visningskontrollørens visning som vist nedenfor.
Når du kjører programmet uten å sette inn noen begrensninger, holder de tre elementene seg til venstre kant av foreldrevisningen i landskapet.
Vi vil imidlertid at elementene skal fylle skjermens fulle bredde som vist nedenfor. Tekstfeltet skal utvides horisontalt, og glidebryteren skal også utvides for å utnytte skjermens bredde. Den segmenterte kontrollen skal imidlertid ha en fast bredde.
Velg tekstfeltet og klikk på pin knappen på Auto Layout-menyen nederst. I seksjonen Avstand til nærmeste nabo øverst på menyen, klikk på toppen, høyre og venstre linjer som omgir torget. Linjene skal bli røde som et resultat. Deretter klikker du på knappen nederst merket Legg til 3 begrensninger for å legge til de angitte plassbegrensningene.
Velg glidebryteren og gjenta de samme trinnene ved å angi en topp, venstre og høyre mellomrom. Dette sikrer at avstanden mellom glidebryteren og tekstfeltet og glidebryteren og den segmenterte kontrollen er løst.
Gjenta de samme trinnene for segmentert kontroll, men legg bare til en topp og høyre (etterfølgende) plassbegrensning. I tillegg sjekker du Bredde merk av i boksen og klikk på Legg til 3 begrensninger knappen nederst. Vi vil ikke at den segmenterte kontrollen skal utvides når skjermstørrelsen endres, og derfor gir vi den en fast bredde.
Når Xcode gir oss feil eller advarsler om manglende eller ugyldige layoutbegrensninger, kan det ikke alltid være klart hvilke begrensninger som må legges til eller oppdateres. Xcode hjelper oss ved å vise oss hvilke begrensninger som mangler i Dokumentoversikt.
Når en layout er ugyldig eller ufullstendig, vises en rød pil i Dokumentoversikt. Når du klikker på pilen, glir et vindu inn fra høyre som viser hvilke begrensninger som mangler eller er ugyldige. Dette gir deg en anelse om hvordan du fikser oppsettet.
Til høyre for hver feil eller advarsel er en rød sirkel (feil) eller en gul trekant (advarsel). Når du klikker på feilen eller advarselen, vises en meny med forslag for å fikse problemet.
Du kan også bruke Løs opp automatiske layoutproblemer meny for å legge til manglende begrensninger, tilbakestille visningsbegrensninger, eller for å fjerne begrensninger. Xcode vil automatisk legge til begrensninger til den valgte visningen for deg. Dette kan spare tid, men merk at det også er mulig at den resulterende oppsettet ikke er det du hadde tenkt.
Hvis du har lagt til layoutbegrensninger i en visning, og du endrer størrelsen eller posisjonen, fremhever Xcode visningen i oransje for å indikere at den nåværende posisjonen og / eller størrelsen ikke er i tråd med utformingsbegrensningene.
Hvis du kjører programmet, vil du se at Auto Layout-systemet håndhever visningsbegrensningene og ignorerer visningenes nye størrelse og posisjon du har angitt. Dette er en såkalt feilplassert visning. Skjermbildet nedenfor viser en knapp som jeg flyttet etter å ha angitt sine layoutbegrensninger.
For å fikse dette, kan du enten slette layoutbegrensningene og sette nye, eller du kan la Xcode fikse det for deg. Du har to alternativer for å fikse en feilplassert visning.
I eksemplet ovenfor velger vi Oppdater begrensninger å oppdatere layoutbegrensningene til knappens nye størrelse og posisjon, fordi vi ønsker å bevare knappens nye størrelse og posisjon.
Auto Layout-systemet legger ut brukergrensesnitt mye enklere og raskere. Før Auto Layout ble introdusert, måtte utviklere hardt kodes et applikasjons brukergrensesnitt ved å angi en visnings ramme og autoresiseringsmaske. Med automatisk oppsett er dette ikke lenger nødvendig.
Ved korrekt innstilling av visningsbegrensninger, blir posisjonen automatisk oppdatert uansett skjermstørrelse eller orientering. Et annet område der Auto Layout er nyttig, er søknadslokalisering. Ord og setninger har en annen lengde på forskjellige språk. Også dette kan løses med Auto Layout.
Accentsconagua