, forståelse watchkit layout system,,,,, 31,,,,,,,,, 5,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, det nye layout - systemet, der blev indført ved æble i watchkit i november sidste år, er et helt nyt begreb for os x 105 og udviklere.det er ikke baseret på auto udformning, og det er meget enklere.,, i denne forelæsning, så skal jeg vise dig de vigtigste karakteristika og begrænsninger af det nye layout.vi skriver ikke nogen regler, fordi der fokuseres på forståelse af mekanismen for det nye layout.til sidst, du burde være i stand til at begynde at bygge applikationsgrænseflader ved hjælp af watchkit layout.,, 1.hvad er så fedt ved watchkit?,, watchkit ikke anvende samme layout system som normale programmerbare ansøgninger.det er meget smartere og lettere.du skal bruge nogle storyboards, til at udforme deres grænseflader i denne sag.,,, du ikke har adgang til stillinger i deres bestemmelser på runtime og du er forpligtet til at udforme statisk grænseflader, der er indeholdt i din app bundt.du kan glemme alt om x - og y - koordinater, grænser og rammer, fordi alt er fastlagt i tegning.lad os skabe et eksempel app hjælpe dig bedre at forstå disse nye begreber., 2.skabe din første watchkit app, trin 1: skabe projekt, åben, xcode, 6.2 + og skabe et nyt projekt.vælg den fælles opfattelse, anvendelse, model til at begynde med.navn, watchkitlayoutdemo, klik, og gem det et eller andet sted på din computer.,,, trin 2: tilføje watchkit mål, det er tid til at tilføje watchkit mål for projektet.gå til menu, fil > nye > mål... og udvælge, æble - og til venstre.vælg, watchkit app, og klik, næste.,,,,, i følgende skærm, så kan du få din watchkit mål.uncheck, omfatter meddelelse scene, og omfatte blik scene, fordi jeg vil fokusere på et enkelt watchkit app i denne forelæsning.klik, gør, at tilføje watchkit app til projektet.,,,,, trin 3: undersøge watchkit mål, som de kan se, at xcode tilføjede to mål for deres projekt.for at gøre det lettere for os, xcode har skabt en gruppe for hvert mål, der indeholder kilde filer og aktiver for hvert mål.,, udvide disse grupper i projekt navigatør, til venstre.den blå gruppe (se nedenfor), indeholder den kilde, filer og aktiver for de watchkit udvidelse, som vil køre på en iphone.æblet ur ikke løbe din ansøgning.de parrede iphone har tunge løft for apple - ur.æble - kun gør brugergrænsefladen og behandler enhver interaktion med brugeren.dette begreb er forklaret nærmere i denne tuts + artikel.,,,,, rød gruppe indeholder aktiver i watchkit anvendelse, såsom storyboard dokumentation, der skal opbevares og anvendes på æblet ur.dette sker, fordi midlerne ville være dyrt at sende hver gang brugeren åbner en app og drænet batteriet meget hurtigere, betyder dette også, at app 's brugergrænseflade er statisk, og kan ikke ændres på runtime.at tilføje eller fjerne elementer, for eksempel, er ikke muligt.du kan vise og skjule brugergrænseflade elementer.hvis man for eksempel, der skjulte tilhører en gruppe, ja, på runtime eller rigtigt, hvis du elsker swift - gruppen vil være gemt og andre brugergrænseflade elementer vil automatisk blive flyttet.,,, på det pædagogiske, så skal jeg vise dig de magtfulde indretning, der anvendes af watchkit.du behøver ikke at skrive en kode.lad os fokusere på, watchkitlayoutdemo,, watchkit, app - gruppen, som indeholder storyboard fil., 3.skitse,, udvælge, interface.storyboard, fil at åbne den.hvis du kommer fra de programmerbare eller os x verden, du burde være bekendt med nogle storyboards.som jeg nævnte tidligere, er den eneste måde at udforme nogle storyboards watchkit apps.auto layout er fraværende og manipulere rammer ikke er muligt ved hjælp af watchkit ramme.,, uikit er, uiviewcontroller, klasse er fraværende i watchkit.i stedet watchkit erklærer de, wkinterfacecontroller, klasse.du kan se, at xcode tilføjede en grænseflade registeransvarlige for os.,,,,, den watchkit ramme definerer en række brugergrænseflade elementer, som de kan bruge til at skabe din app 's brugergrænseflade.det er en fuldstændig liste over de elementer, man kan bruge:,,,,,,,,,, billede, separator,,, kontakt, slider, etiket, dato, jas, kort, menuen,, menupunkt,,, de fleste af disse behøver ikke at forklare. men der er en række nye elementer, såsom gruppe - separator, dato, timer, og menu.et af de vigtigste elementer er gruppen,.,,, hvis du brugte html og css for at skabe et websted, kan de være bekendt med, < div >, tag.du kan tænke på en gruppe som en beholder til anden grænseflade elementer.en gruppe har mange egenskaber, som du kan vælge direkte grænseflade bygmester.,, trin 1: fastlægge udformningen af din app, er det vigtigt at planlægge opstilling i detaljer, før de starter udvikling.dette vil redde dig timevis af hovedpine, hvis der på et tidspunkt, du indser, at de virkelig sejt træk, du ønskede at bygge, er ikke muligt, og det ser ikke godt ud på en fysisk anordning.vær sikker på, at du har læst æblet se menneskelige grænseflade retningslinjer.,, for det eksempel, jeg skal lære, hvordan man skaber en skitse til et hotel app, hvor du kan finde hoteller nær din nuværende position.jeg designer skærmen, som vil vise nærmere oplysninger om et bestemt hotel.som jeg nævnte i indledningen, jeg vil ikke skrive nogen kode.jeg vil i stedet koncentrere sig om forståelse af mekanismen for det nye layout.,, går ud af min tegning færdigheder, det er, hvad jeg har i tankerne for mit udseende.det hotel navn, vil være øverst på skærmen, og nedenfor, vil det være en stjerne ikoner, viser, at hotellet er rating.jeg vil tilføje et billede sammen med sine, adresse, og to knapper.,,,,, trin 2: tilføjelse af en gruppe, vores interface registeransvarlige er tomme i øjeblikket, og der er ingen base - gruppen.for at tilføje nye elementer, trække og smid dem fra, objekt bibliotek, om ret til interface registeransvarlige.den scene, navigatør, til venstre er nyttigt at undersøge, om de elementer, er korrekt placeret.den første ting at gøre, er at tilføje en gruppe, som vil gøre det muligt for os at rulle vertikalt, hvis indhold passer ikke på skærmen.trække en gruppe fra genstanden bibliotek, og smid den i interface registeransvarlige, som vist nedenfor.,,,,,, nu, at du har en gruppe i deres grænseflade registeransvarlige, kan du se sine attributter i, attributter inspektør, til højre.lad os se på nogle af dem i detaljer.,,,, layout:, layout er afgørende for, om gruppen er elementer, der horisontalt eller vertikalt.når du tilføjer et element, der skal være anbragt ved eller under den foregående.,,, studerer:, denne attribut bestemmer toppen, nederste, venstre og højre indpresningsdybde for gruppen.,,, afstand:, som navnet antyder, det afgør afstanden mellem elementer inden for koncernen. baggrund:,,, du kan sætte et image som baggrund for gruppen og manipulerer det, idet de billeder sekventielt.,,, holdning: situationen tilskriver fastsætter horisontale (venstre center, ikke) og vertikale (top -, center, bunden) holdning i gruppen.,,, størrelse: størrelsen attribut bestemmer bredde og højde af dette element.der er tre værdier, størrelse, som passer til indhold (automatisk, justeret på grundlag af indholdet) i forhold til beholder (tager beholderens størrelse, og det bliver ganget med værdien defineret), fast, konstant værdi).,,, huske på, at apple ur kommer i to størrelser.du burde bruge samme opstilling i begge tilfælde, men du kan løbe ind i nogle små forskelle.ved at klikke på plus ikon i venstre side af en attribut, du kan sætte en attribut, som kun vil blive anvendt, når de kører på den specificerede apparat app.,, lad os fortsætte opbygningen af vores udseende.ændre, gruppe layout, til lodret, således at indholdet vil rulle vertikalt, når jeg tilføje flere elementer.sæt den horisontale position, center, således at indholdet bliver koncentreret.endelig er der, bredde, tilskriver, bredde i forhold til beholder med multiplikatoreffekt, fastsat til 1.det vil udvide den gruppe til at fylde hele skærmen bredde.,,,,,, trin 3: at føje en etiket, og nu har vi oprettet de vigtigste egenskaber for vores container - gruppen, lad os tilføje en etiket til gruppen.fra genstanden bibliotek, tilføje en etiket til den gruppe, som de ekstra for et øjeblik siden.hvis du vælger den etiket, vil du se, hvordan dens bredde ikke tage alt den plads, der er til rådighed.lad os klare det ved at ændre dens bredde tilskriver i forhold til beholderen.til center etiketten, ændre, horisontale, tilskriver, center, og der tekst tilnærmelse til center,.,,, hvad der sker, hvis hotellets navn er for længe?jeg vil have det til at vokse og vokse.for at gøre det, ændre, linjer, attribut, af etiketten, 0.det betyder, at hotellet hedder strækker sig over flere linjer, hvis det er nødvendigt.ændre etiket tekst at se resultatet af dig selv.resultatet bør ligne de nedenfor skærmbillede.,,,,, trin 4: forøgelse af stjerner, ønsker vi også at vise hotellets rating.tanken er at få en gruppe under hotellets navn med antallet af stjerner på hotellet.tilføje yderligere en gruppe til den gruppe, vi allerede har.med andre ord, den nye gruppe satte i den første gruppe.,, jeg vil have fem stjerner er på samme linje og koncentreret.som jeg nævnte tidligere, og jeg kan ikke tilføje eller fjerne objekter på runtime, men jeg kan gemme sig og vise objekter.jeg vil gerne tilføje fem billeder til gruppen.hvis hotellet har færre stjerner, jeg vil gemme dem på runtime.,, trække fem billeder til den indlejrede gruppe og bredden af hver stjerne i forhold til beholderen.ændre multiplikator fra 1 til 0, 2.grunden til at vælge, 0,2, som multiplikator - er enkel.hvis jeg vil have fem billeder til at passe på den plads, der er til rådighed på samme linje, jeg vil hvert billede er 20% af koncernens bredde.ændre, horisontale, stilling til, - - så de vil altid være midtpunktet, uanset hvor mange der er.,, lad os give et fedt billede for hvert billede.du finder de billeder, jeg bruger i kilden filer af denne forelæsning.sæt, image, tilskriver, star.png, og ændre tilstand til aspekt ind, for at sikre billedformat overholdes.,, bør resultatet ligner de animerede image nedenfor.du kan selv prøve at kontrollere, skjult, tilhører en af de billeder i, attributter inspektør, og se, hvordan stjernerne er altid fokuseret.,,,,, trin 5: forøgelse af hotellets image, og starte med at downloade eksempel billede af et hotel fra freeimages.jeg vil gerne tilføje et billede på hotel, for at vise brugeren, hvad hotellet ser ud.der tilføjes et nyt billede fra genstanden bibliotek, som du lige gjorde tidligere til stjerner.ændre, image, tilskriver det billede, du har downloadet og fastsætte, mode, aspekt ind,.,, ændre, horisontale, stilling til, i midten og bredde, i forhold til beholderen.sørg altid for at tilføje det image, som satte element af den største gruppe, ved at kontrollere lag hierarki i scene navigatør, til venstre.sæt, højde, størrelse, som passer til indhold, automatisk resize billedet baseret på billedet er dimensioner.,,,,,,, trin 6: at tilføje den adresse, under det billede, jeg vil tilføje en adresse.vi kunne også tilføje en kort, men lad os bruge et mærke for eksempel.trække en etiket fra genstanden bibliotek og holdning under hotellets image.sæt retningslinjer, til 0, og bredde, i forhold til beholderen.ændre teksten for at være en tilfældig adresse på dit valg.,,,,, som du har bemærket, grænsefladen registeransvarlige er nu højere.det automatisk resizes i tegning, så du kan se indholdet.,, trin 7: forøgelse af knapper, grænsefladen registeransvarlige skal have to knapper på bunden.jeg vil have knapper til halvdelen af bredden af skærmen og anbragt side om side.fordi vores største gruppe har en beretningsform, vi er nødt til at tilføje en indlejrede gruppe så knapperne anbringes vandret i stedet for vertikalt.,, tilføje en ny gruppe, som vist nedenfor og tilføje to knapper til det.sæt deres bredde, tilskriver i forhold til beholderen, og den multiplikator, 0, 5,.sæt, vertikale position på to knapper, center, at center dem vertikalt.,,, der er fastsat i teksten til den første knap til, "fra 99 dollars", og baggrunden for en flot rød farve.det andet knap til, "lyset", og på den baggrund farve blå.grænsefladen registeransvarlige skal nu se sådan ud:,,,,, sørge for, du har valgt den rette ordning og presse, command-r, løber de watchkit anvendelse.,,,,, når programmerbare simulator åbner, er der en ting, du skal gøre.vælg den programmerbare flyvesimulatortræning og vælge, hardware > eksterne instrumenter > æble på 42 mm.æblet - simulator vil stå ved siden af din iphone - simulator.nu kan du se dit arbejde indretning i aktion.se resultatet i videoen nedenfor.,,,, sidst i denne lektion, jeg viste dig det vigtigste karakteristika og begreber, til at skabe komplekse opgaver i watchkit.vi udforskede tilføje og placering brugergrænseflade elementer, og et par eksempler på bedste praksis.du er nu i stand til at vende dit æble - app tanker til virkelighed.jeg håber, du nød det tutor.