Share
Det nye layoutsystemet som ble introdusert av Apple i WatchKit i november i november, er et helt nytt konsept for iOS- og OS X-utviklere. Det er ikke basert på Auto Layout, og det er mye enklere.
I denne veiledningen vil jeg vise deg hovedtrekkene og begrensningene i dette nye layoutsystemet. Vi vil ikke skrive noen kode, fordi fokuset er på å forstå mekanismen til det nye layoutsystemet. Til slutt bør du kunne begynne å bygge applikasjonsgrensesnitt ved hjelp av WatchKit-layoutsystemet.
WatchKit bruker ikke det samme layoutsystemet som vanlige iOS-programmer. Det er mye smartere og enklere. Du må bruke storyboards å designe grensesnittene dine i dette tilfellet.
Du har ikke tilgang til posisjonene til elementene dine ved kjøring, og du må designe statiske grensesnitt som er inkludert i apppakken. Du kan til og med glemme x og y koordinater, grenser og rammer, fordi alt er lagt ut i storyboardet. La oss lage et eksempelapp for å bedre forstå disse nye konseptene.
Åpen Xcode 6.2+ og opprett et nytt prosjekt. Velg Enkeltvisningsprogram mal til å begynne med. Navngi det WatchKitLayoutDemo, klikk neste, og lagre det et eller annet sted på datamaskinen din.
Det er på tide å legge til WatchKit-målet for prosjektet. Gå til menyen Fil> Ny> Mål ... og velg Apple klokke til venstre. Velge WatchKit App og klikk neste.
I det følgende skjermbildet kan du konfigurere WatchKit-målet ditt. Fjern merkingen Inkluder varslingsscene og Inkluder glans scene, fordi jeg bare vil fokusere på en enkel WatchKit-app i denne opplæringen. Klikk Bli ferdig å legge til WatchKit-appen i prosjektet.
Du kan legge merke til at Xcode er lagt til to mål til prosjektet ditt. For å gjøre det enklere for oss, har Xcode opprettet en gruppe for hvert mål, som inneholder kildefilene og eiendelene for hvert mål.
Utvid disse gruppene i Prosjektnavigator til venstre. Den blå gruppen (se nedenfor) inneholder kildefilene og eiendelene til WatchKit-utvidelsen, som vil kjøre på iPhone. Apple Watch kjører ikke din søknad. Den parrede iPhone gjør det tungt å løfte for Apple Watch. Apple Watch gir bare brukergrensesnittet og håndterer eventuelle brukerinteraksjoner. Dette konseptet er forklart mer detaljert i denne Tuts + artikkelen.
Den røde gruppen inneholder eiendelene til WatchKit-applikasjonen, for eksempel storyboard-filen som skal lagres og brukes på Apple Watch. Dette gjøres fordi ressursene vil være dyre å sende hver gang brukeren åpner en app, og vil drenere batteriet mye raskere.
Dette betyr også at appens brukergrensesnitt er statisk og ikke kan endres ved kjøring. Det er ikke mulig å legge til eller fjerne elementer, for eksempel. Du kan vise og skjule brukergrensesnittelementer skjønt. Hvis du for eksempel angir skjult eiendom av en gruppe til JA ved kjøretid-eller ekte Hvis du elsker Swift -, vil gruppen bli skjult, og de andre brukergrensesnittelementene blir automatisk flyttet.
I denne opplæringen vil jeg vise deg det kraftige oppsettet som brukes av WatchKit. Du trenger ikke skrive noen kode. La oss fokusere på WatchKitLayoutDemo WatchKit app gruppe, som inneholder storyboard-filen.
Velg Interface.storyboard fil for å åpne den. Hvis du kommer fra iOS eller OS X verden, bør du være kjent med storyboards. Som tidligere nevnt er storyboards den eneste måten å designe WatchKit-apper på. Automatisk layout er fraværende og manipulering av rammer er ikke mulig ved hjelp av WatchKit-rammeverket.
Den UIKit er UIViewController Klassen er fraværende i WatchKit. I stedet erklærer WatchKit WKInterfaceController klasse. Du kan se at Xcode allerede har lagt til en grensesnittkontroll for oss.
WatchKit-rammen definerer en rekke brukergrensesnittelementer som du kan bruke til å lage appens brukergrensesnitt. Dette er en komplett liste over elementene du kan bruke:
De fleste av disse trenger ikke å forklare, men det er ganske mange nye elementer, for eksempel gruppe, separator, dato, timer og meny. En av de viktigste elementene er gruppen.
Hvis du noen gang brukte HTML og CSS til å lage et nettsted, kan du være kjent med Det er viktig å planlegge oppsettet i detalj før du starter utviklingen. Dette vil spare deg for timer og timer med hodepine hvis du på et tidspunkt forstår at den virkelig kule funksjonen du ønsket å bygge, ikke er mulig eller ikke ser bra ut på en fysisk enhet. Pass på at du har lest retningslinjene for Apple Watch Human Interface. For dette eksempelet skal jeg lære hvordan å lage en layout for et hotellapp hvor du kan finne hoteller i nærheten av din nåværende beliggenhet. Jeg designer skjermen som vil vise detaljene for et bestemt hotell. Som jeg nevnte i innledningen, vil jeg ikke skrive noen kode. I stedet vil jeg fokusere på å forstå mekanismen til det nye layoutsystemet. Å forlate tegneferdighetene min, dette er det jeg har i tankene for mitt layout. De hotellnavn vil være øverst på skjermen og under det blir noen stjerneikoner viser hotellets vurdering. Jeg vil da legge til en bilde sammen med sin adresse og to knapper. Grensesnittkontrollen vår er tom for øyeblikket og det er ingen grunngruppe. For å legge til nye elementer, dra og slipp dem fra Objektbibliotek til høyre inn i Grensesnittkontroll. De Scene Navigator til venstre er det nyttig å sjekke om elementene er riktig plassert. Det første du må gjøre er å legge til en gruppe, som tillater oss å bla vertikalt hvis innholdet ikke passer til skjermen. Dra en gruppe fra Objektbibliotek og slipp det inn i Grensesnittkontroll som vist under. Nå som du har en gruppe i grensesnittkontrolleren, kan du se sine attributter i Attributtsinspektør til høyre. La oss se nærmere på noen av dem. Husk at Apple Watch kommer i to størrelser. Du bør bruke samme layout i begge tilfeller, men det kan føre til små forskjeller. Ved å klikke på plussikonet til venstre for et attributt, kan du angi et attributt som bare vil bli brukt når appen kjører på den angitte enheten. La oss fortsette å bygge opp vår layout. Endre Gruppeoppsett til vertikal slik at innholdet vil rulle vertikalt når jeg legger til flere elementer. Sett Horisontal posisjon til Senter slik at innholdet blir sentrert. Endelig sett inn Bredde tilskrive Bredde i forhold til beholder med multiplikatoren satt til 1. Dette vil utvide gruppen for å fylle hele skjermbredden. Nå som vi har satt opp hovedegenskapene til vår containergruppe, la vi legge til en etikett for gruppen. Fra Objektbibliotek, legg til en etikett til gruppen du la til for en stund siden. Hvis du velger etiketten, ser du hvordan bredden ikke tar opp all ledig plass. La oss fikse det ved å endre breddeattributtet til I forhold til container. For å sentrere etiketten, endre Horisontal tilskrive Senter og sett Tekstjustering til Senter. Hva skjer hvis hotellets navn er for langt? Jeg vil at den skal ekspandere og vokse vertikalt. For å gjøre det, endre Lines Egenskapav etiketten til 0. Dette betyr at navnet på hotellet vil spore flere linjer om nødvendig. Endre etikettens tekst for å se resultatet for deg selv. Resultatet skal se ut som under skjermbildet. Vi ønsker også å vise hotellets vurdering. Tanken er å ha en gruppe like under hotellets navn med antall stjerner på hotellet. Legg til en annen gruppe i gruppen vi allerede har. Med andre ord er den nye gruppen nestet i den første gruppen. Jeg vil at de fem stjernene skal være på samme linje og sentrert. Som jeg tidligere nevnte, kan jeg ikke legge til eller fjerne objekter på kjøretid, men jeg kan gjemme og vise objekter. Jeg vil legge til fem bilder til gruppen. Hvis hotellet har færre stjerner, vil jeg gjemme dem på kjøretid. Dra fem bilder inn i den nestede gruppen og sett bredden på hver stjerne til I forhold til container. Endre multiplikatoren fra 1 til 0.2. Grunnen til å velge 0.2 som multiplikatoren er enkel. Hvis jeg vil ha fem bilder til å passe i ledig plass på samme linje, vil jeg at hvert bilde skal være 20% av gruppens bredde. Endre Horisontal posisjon til Senter slik at de alltid vil være sentrert, uansett hvor mange stjerner det er. La oss deretter tildele et kult bilde til hvert bilde. Du finner bildene jeg bruker i kildefilene i denne opplæringen. Sett Bilde tilskrive star.png og endre modusen til Aspect Fit for å sikre at aspektforholdet respekteres. Resultatet skal se ut som det animerte bildet nedenfor. Du kan til og med prøve å sjekke skjult Egenskapen til et av bildene i Attributtsinspektør og se hvordan stjernene alltid er sentrert. Start med å laste ned eksempelbilde av et hotell fra gratisbilder. Jeg vil legge til et bilde av hotellet for å vise brukeren hvordan hotellet ser ut. Legg til et nytt bilde fra Objektbibliotek som du bare gjorde tidligere for stjernene. Endre Bilde Tilordne bildet du lastet ned og angi Modus til Aspect Fit. Endre Horisontal posisjon til Senter og Bredde til I forhold til container. Pass alltid på å legge til bildet som et nestet element i hovedgruppen ved å sjekke laghierarkiet i Scene Navigator til venstre. Sett Høyde være Størrelse for å tilpasse innholdet å endre størrelsen på bildet automatisk basert på bildens dimensjoner. Under bildet, vil jeg gjerne legge til en adresselabel. Vi kan også legge til et kart, men la oss bruke en etikett for dette eksempelet. Dra en etikett fra Objektbibliotek og plasser den under hotellet bildet. Sett Lines til 0 og Bredde til I forhold til container. Endre teksten som en tilfeldig adresse etter eget valg. Som du kanskje har lagt merke til, er grensesnittkontrolleren nå høyere. Den endres automatisk i storyboardet slik at du kan se innholdet. Grensesnittkontrolleren skal ha to knapper nederst. Jeg vil at knappene skal være halv bredden på skjermen og plassert side ved side. Fordi vår hovedgruppe har en vertikal layout, må vi legge til en nestet gruppe, slik at knappene er plassert horisontalt i stedet for vertikalt. Legg til en ny gruppe som vist nedenfor og legg til to knapper til den. Sett deres Bredde tilskrive I forhold til container og sett multiplikatoren til 0.5. Sett vertikal posisjon av de to knappene til Senter å sentrere dem vertikalt. Sett teksten til den første knappen til "Fra $ 99" og bakgrunnsfargen til en fin utseende rød. Sett teksten til den andre knappen til "Se mer" og bakgrunnsfargen til blå. Grensesnittkontrolleren skal nå se slik ut: Pass på at du har valgt riktig skjema og trykk Kommando-R å kjøre WatchKit-programmet. Når iOS-simulatoren åpnes, er det en ting du må gjøre. Velg iOS-simulatoren og velg Maskinvare> Eksterne skjermer> Apple Watch 42 mm. Apple Watch Simulator vises ved siden av din iPhone Simulator. Du kan nå se arbeidsoppsettet i aksjon. Se resultatet i videoen nedenfor. I denne veiledningen viste jeg deg hovedtrekkene og konseptene for å bygge komplekse layouter i WatchKit. Vi undersøkte å legge til og plassere brukergrensesnittelementer, og noen få gode metoder. Nå kan du gjøre Apple Watch app-ideene dine til virkelighet. Jeg håper du likte denne opplæringen.Trinn 1: Definer utformingen av appen din
Trinn 2: Legge til en gruppe
Trinn 3: Legge til en etikett
Trinn 4: Legge til stjerner
Trinn 5: Legge til bildet på hotellet
Trinn 6: Legge til adressen
Trinn 7: Legge til knapper
Konklusjon
Accentsconagua