Siden bildevisningen har samme hvit bakgrunn som sin inneholder syn, vi kommer til å endre visningen bakgrunnsfarge for å gjøre det er lett å skille mellom de to. Velg Vis fra dokumentet disposisjon og endre bakgrunnsfargen til konsernet Tabellbakgrunnsfarge

Trinn 5:. Bygg og Kjør

På toppen av Xcode, velger du iPad Retina bruke for iOS Simulator. Bygge og drive app ved å trykke Command + R. app synes å se fint for iPad, men vi ønsker å sikre at den viser riktig på alle enheter.

3. Live Preview

Bygg og kjører programmet ditt bare for å se hvordan brukergrensesnittet oppfører seg kan være en kjedelig oppgave. Heldigvis har Xcode seks lagt til muligheten til å få en levende gjengivelse av brukergrensesnittet på alle enheter i alle retninger. Dette hjelper oss med å løse eventuelle auto layout problemer mye raskere enn å kjøre programmet i iOS Simulator hver gang

Trinn 1:. Aktivering Preview Assistant

På toppen av Xcode, klikk assisterende redaktør knappen .

Dette deler Xcode redaktør i to ruter. I den høyre ruten, velger du Automatisk > Forhåndsvisning > Main.storyboard i hopp bar

Trinn 2:. Legge til enheter i Preview

Interface Builder viser nå en levende forhåndsvisning av brukergrensesnittet på en 4 tommers iPhone. Som forventet, er brukergrensesnittet mindre enn ideell på iPhone. Hvis du ikke ser noe på forhåndsvisningen, klikker deretter visningen kontrolleren i ruten til venstre for å oppdatere den.

I den høyre ruten, klikke på + knappen nederst lar deg legge til flere enheter for å forhåndsvise. Gå videre og legge til iPad for å forhåndsvise samt

Trinn 3:. Bytte orientering

Hold markøren over iPhone i assisterende redaktør mot bunnen. Til venstre for navnet på enheten, er det en knapp som bytter den aktuelle retningen. Klikk én gang for å slå iPhone forhåndsvisning til liggende retning.

Med orientering i landskapet, ser brukergrensesnittet enda verre. Bildevisningen vises ikke i det hele tatt og etikettens teksten er altfor stor.

4. Installere størrelsesklasse Spesifikke Begrensninger

For å fikse brukergrensesnittet, vil vi legge noen begrensninger som er spesifikke for en viss størrelsesklasse. Dette er en annen fordel med adaptiv design. Vi kan fortelle brukergrensesnittet hvordan det skal legge ut sine synspunkter for visse størrelsesklasser, med samme storyboard. Før, ville dette krever vanligvis bruker to forskjellige storyboards og legge det riktige under kjøring

Trinn 1:. Legge til bilde Vis Base Begrensninger

Vi vil først legge begrensninger som skal fungere for de fleste enheter og avgrense dem derfra. Start med å fjerne de begrensninger lagt tidligere ved å klikke på hvilken som helst visning i lerretet og velge Editor > Løse Auto Layout Issues > Alle visninger i View Controller -. Klare føringer

Velg bildevisningen, klikker du på Juster-knappen, velg Horisontal Center i Container, og klikk på Legg til en begrensning

Åpne begrensningen vi nettopp har lagt inn. Størrelse Inspektør på høyre og dobbeltklikk på den for å redigere den.

Den begrensningen har The Super sentrum lik bildevisningen sentrum, men vi ønsker det motsatte. Klikk Second Element og velger Omvendt første og andre Varen å løse problemet.

Neste, trykk Ctrl og dra fra bildevisningen for å se inne i dokumentet disposisjonen til venstre, og velg Equal Heights. Velg begrensning i størrelse Inspektør og endre begrensningen er multiplikator til 0,4. Dette vil tvinge bildevisningen høyde skal være lik enten The Super høyde eller minst 40 prosent av it-avhengig av hva som ender opp med å bli kortere.

Deretter klikker du på Pin-knappen og velg den øverste og nederste avstand til nærmeste nabo . For bunnen avstand angir 18 poeng. Den øverste avstanden skal allerede være satt til 0 poeng. Sørg for Constrain til marginene er ukontrollert siden vi ikke ønsker polstring rundt visningen. Klikk Tilsett 2 Begrensninger i bunnen for å legge begrensninger.

Dobbeltklikk på Bottom Space begrensning i størrelse Inspector å redigere den. Endre Forholdet til Større enn eller lik. Til slutt opp bildet vise sin begrensninger, kontroll og dra fra bildevisningen til etiketten og velger Like Heights

De begrensninger for bildevisningen skal se slik ut:.

Trinn 2: Legge til etiketten Base Begrensninger

På grunn av de begrensninger som er lagt til bildevisningen, har etiketten allerede sin høyde og vertikal avstand fra bildevisningen til. Velg etiketten og klikk på Pin-knappen for å legge til en ledende, etterfølgende, og vertikal avstand begrensningen som vist på bildet nedenfor.

Hvis du forhåndsvise app nå i assisterende redaktør, begrensninger har gjort ting mye bedre . Men det er fortsatt et problem når programmet bruker den kompakte horisontal størrelsesklasse som du kan se nedenfor (i midten).

I dette tilfellet ville det være fint å ha bildevisningen og etiketten ved siden av hverandre i stedet av oppå hverandre.

Trinn 3: Legge Compact Horisontale Begrensninger

Bruke størrelsesklasse veksleknappen nederst, velg Compact Width | Kompakt Høyde. Baren blir til en nyanse av blått for å indikere at du nå redigerer brukergrensesnitt for en bestemt størrelse klasse.

Velg bildevisningen åpne Size Inspector, og oppdatere rammen som vist på bildet nedenfor.

Deretter velger etiketten og oppdatere sin ramme i størrelse Inspector, som vist nedenfor.

Med etiketten fortsatt valgt og størrelse Inspector åpent, velger etikettens begrensninger og fjerne dem ved å trykke på slette . Du kan velge flere begrensninger ved å holde nede Shift-tasten. Dette vil fjerne begrensningene vi har lagt så langt, men bare
for denne størrelsesklassen.

Gjør det samme for bildevisningen ved å velge den, åpne Size Inspector, velge sine begrensninger og trykke Delete. Vi kan nå legge begrensninger for å sikre bildevisningen og etiketten er plassert ved siden av hverandre.

Heldigvis kan Xcode enkelt finne disse begrensningene ut for oss. Med enten bildevisning eller etiketten valgt, velger Editor > Løse Auto Layout Issues > Alle visninger i View Controller - Tilbakestill til Forslag Begrensninger

Trinn 5: Forhåndsvisning Oppdatert Begrensninger

Åpne Størrelse Inspector for bildevisningen.. Du vil se at det er flere begrensninger oppført, men noen er nedtonet og noen er ikke. Dette indikerer hvilke begrensninger som er aktive for den aktuelle størrelsesklasse.

Hvis du dobbeltklikker på noen av dem, viser den nederste delen oss hvilken størrelsesklasser begrensningene er aktive for. Bildet under viser at begrensningen er installert for Compact Width | Kompakt Høyde og funksjonshemmede for Regular Width | Regelmessig Høyde. Ved å klikke på x eller + knappen aktiverer eller deaktiverer begrensningen for den gitte størrelsesklasse.

Åpne forhåndsvisning assisterende redaktør igjen og legge en 3,5 tommers iPhone i liggende modus hvis det ikke allerede er en. Vi kan se vi har oppnådd en helt annen layout for enkelte enheter i liggende format -. Alt i ett storyboard

5. Dynamic Text

Den siste ting å Adressen er skriftstørrelsen. Mens de faktiske rammene av bildevisningen og etiketten arbeider ut pent, kan skriften noen ganger bli avkuttet. Adaptiv design har lagt til nye muligheter for utviklere å håndtere denne typen scenario

Trinn 1:. Rediger Font Scale

Velg etiketten og åpne attributter Inspector til høyre. Under Autokrymp velger Minimum Font Scale og sett den til 0,4

Trinn 2:. Legge størrelsesklasse Spesifikke Fonts

Redigere skriften skala vil være tilstrekkelig for de fleste tilfeller. I vår app, skjønt, er etikettens innholdet lesbar for Compact Width | Kompakt Høyde størrelsesklasse, men det er ikke ideelt. Hvis du åpner forhåndsvisning assisterende redaktør, vil du legge merke til "p" i ordet "laptop" er på en egen linje.

Med etiketten valgt, klikker du på + knappen ved siden av Font i Attributter Inspektør . Dette åpner en meny for å velge en størrelsesklasse for å bruke en bestemt font til. Velg Compact Width | Kompakt Høyde.

I likhet med størrelsen klassespesifikke begrensninger, har blitt lagt til en font for størrelsen klassen vi valgte. Endre skriftstørrelsen til 50 poeng. Nå åpner forhåndsvisnings assisterende redaktør enda en gang og kontrollere skriften ser perfekt på alle enheter.

Muligheten til å legge adaptive fonter er utrolig kraftig. Lokalisering av apps er trivielt når du er i stand til å kontrollere skriftstørrelse mer presist med dynamisk tekst.

6. Andre Adaptive Design Technologies

Mens størrelsesklasser er absolutt en ledende funksjon, er det mange andre adaptive motiv APIer og fremskritt som jeg ikke har dekket i denne opplæringen. For eksempel, vise kontrollere nå i samsvar med den UITraitEnvironment protokollen. Dette betyr at view kontrollere har en traitCollection eiendom som holder rede på hvilken størrelse klasse vises i øyeblikket.

Hvis du liker å lage brukergrensesnitt i kode, gir traitCollection eiendommen du de samme mulighetene som størrelsesklasser gjøre i Interface Builder . Du kan bli varslet når størrelsesklasse endringer og utføre nødvendige oppdateringer til dine begrensninger eller brukergrensesnitt.

En annen nyttig API er UIPopoverController. Hvis du tidligere har utviklet en universell app, er jeg sikker på at du har sett kode som dette:
UIViewController * contentVC = //contentif ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {UIPopoverController * popVC = [ ,,,0],[UIPopoverController Alloc] initWithContentViewController: contentVC]; [popVC presentPopoverFromBarButtonItem: itempermittedArrowDirections: UIPopoverArrowDirectionAny animerte: YES];} else {[selv presentViewController: contentVC animerte: JA ferdigstillelse: null];}

Fra og iOS 8, er det ikke lenger behov for å sjekke hvilken enhet appen kjører på når du bruker UIPopoverController klassen. Den UIPopoverController klassen nå også støtter iPhone og iPod Touch.

Så vidt bilde eiendeler, legge merke til at det nå er en @ 3x størrelse. Dette skyldes Retina HD-skjerm funnet på iPhone 6 Plus. Hvis du åpner Images.xcassets fil i prosjektet, vil du se det under noen av de medfølgende bildesett.

Konklusjon

Adaptive design er trolig den viktigste endringen i iOS utvikling i flere år. Før adaptiv design, ble universelle apps ikke lett utviklet og skalerbarhet i slike prosjekter kan være et problem. Forhåpentligvis har du lært nok fra denne opplæringen for å unngå disse problemene og innlemme adaptiv design i dine egne apps.