iOS 8: Lage en dag Widget
37
Del
17
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

En av de mest populære nye funksjonene introdusert i iOS 8 er muligheten til å lage flere typer extensions. I denne opplæringen, vil jeg lede deg gjennom prosessen med å lage en tilpasset widget for Dagens delen av varslingssenteret. Men først, la oss kort gjennomgå noen emner om utvidelser og forstå de viktigste begrepene som underly widgets.

1. Hva er en forlengelse?

En utvidelse er en spesiell hensikt binær. Det er ikke en komplett app, det er behov for en inneholder app
skal fordeles. Dette kan være din eksisterende app, som kan omfatte en eller flere utvidelser, eller et nylig opprettet en. Selv om utvidelsen ikke distribueres separat, det har sin egen container.

En forlengelse er lansert og styres via vert app
. Det kan være Safari, for eksempel, hvis du oppretter en aksje forlengelse, eller Today system app som tar seg av varslingssenteret og andre widgets. Hvert system område som støtter utvides kalles en forlengelse punkt
.

For å opprette en utvidelse, må du legge til et mål til prosjektet av inneholder appen. Malene som tilbys av Xcode allerede inkluderer de nødvendige rammer for hver forlengelse punkt, slik at appen samhandle med og følge de riktige politikken til verten app.

2. Dagens Extension Point

Extensions opprettet for i dag forlengelse punktet, de såkalte widgets, er ment å gi enkel og rask tilgang til informasjon. Widgets koble til varsling Senter rammeverket. Det er viktig at du designe din widget med en enkel og fokusert brukergrensesnitt, fordi for mye interaksjon kan være et problem. Merk også at du ikke har tilgang til et tastatur.

Widgets er forventet å utføre godt og holde innholdet oppdatert. Ytelsen er et stort poeng å vurdere. Din widget må være klar raskt og bruke ressursene klokt. Dette vil unngå å bremse hele opplevelsen ned. Systemet avslutter widgets som bruker for mye minne, for eksempel. Widgets må være enkelt og fokusert på innholdet de viser.

Det er nok teori for nå. La oss begynne å lage en tilpasset dagens widget. Widgeten vi er i ferd med å skape vil vise informasjon om disk bruk, inkludert en fremdriftsindikator for å gi en rask visuell referanse for brukeren. Underveis vil vi også dekke andre viktige begreper i iOS 8 utvidelser.

3. Target Setup

Trinn 1: Prosjektoppsett

Hvis du ønsker å bygge denne widgeten som en forlengelse av en eksisterende app, gå videre og åpne Xcode prosjekt, og hoppe til andre trinn. Hvis du starter fra scratch akkurat som meg, så må du først opprette en inneholder app

Åpne Xcode og i Fil
menyen velger du Ny >.; Prosjekt ...
. Vi skal bruke Objective-C som programmeringsspråk og Enkel visning Application mal for å starte med

Trinn 2:. Legg til ny Target

Åpne Fil-menyen og velg Ny > Target .... I Application Extension kategori, velg dag Extension mal.

Du vil merke at prosjektet som målet vil bli lagt er prosjektet vi jobber for tiden med og utvidelsen vil være innleiret i den inneholdende søknad. Vær også oppmerksom på at utvidelsen har en distinkt bunt identifikator basert på en av de som inneholder programmet com.tutsplus.Today.Used-Space.

Klikk på Neste, gi din widget et navn, for eksempel brukt Space, og klikk Fullfør for å opprette det nye målet. Xcode har skapt en ny ordning for deg og det vil be deg om å aktivere den for deg. Klikk Aktiver for å fortsette.

Xcode har skapt en ny gruppe for widgeten heter Space Brukte og lagt til en rekke filer til det, en UIViewController underklasse og et storyboard. Det er riktig, er en widget noe mer enn en visning controller og et storyboard. Hvis du åpner utsikten kontrollerens heading i koden editor, vil du se at det er faktisk subclassing UIViewController.

Hvis du velger utvidelsen målet fra listen over mål, åpner du fanen Bygg Faser, og utvide Link Binary med biblioteker delen, vil du se at det nye målet er knyttet til varsling Senter rammeverket.

4. Brukergrensesnitt

Vi vil nå bygge en grunnleggende brukergrensesnitt for vår widget. Bestemme widget størrelse er viktig og det er to måter å fortelle systemet hvor mye plass vi trenger. En bruker Auto Layout og den andre bruker preferredContentSize eiendom visningen kontrolleren.

Konseptet med adaptive oppsett er også aktuelt for widgets. Ikke bare har vi nå har iPhones med ulike bredder (og iPads og fremtidige enheter), men også huske at widgeten kanskje trenger å vise innholdet i liggende retning. Hvis brukergrensesnittet kan beskrives med autooppsett begrensninger, så det er en klar fordel for utbygger. Høyden kan justeres senere med setPreferredContentSize: hvis nødvendig

Trinn 1: Legge Elements

Åpne MainInterface.storyboard i Xcode editor.. Du vil merke at en etikett som viser "Hello World" er allerede til stede i visningen kontrolleren syn. Velg den og slette den fra visningen som vi ikke skal bruke det. Legg til en ny etikett til visningen og justere den til høyre marg som vist nedenfor.

I attributter Inspector, sette tekstfarge til hvit, tekstjustering til høyre, og etiketten tekst til 50,0%.

Velg størrelse til å passe Innhold fra Xcode Redigerings menyen for å endre størrelsen på etiketten riktig hvis det er for lite til å passe innholdet.

Deretter legger en UIProgressView eksempel til venstre for etiketten og posisjon som vist nedenfor.

Med utsikt fremgang valgt, endre Progress Tint attributt i Attributter Inspector til hvit og Track Tint farge til mørk grå. Dette vil gjøre det mer synlig. Dette ser bra ut så langt. Det er på tide å bruke noen begrensninger

Trinn 2:. Legge Begrensninger

Velg den prosentvise etiketten og legge til en topp, bunn, og etterfølgende begrensningen som vist nedenfor. Sørg for å fjerne avkryssingen i Constrain til marginer sjekkheftet.

Velg fremdriften visning og legge til en topp, ledende og etterfølgende begrensningen. Bruk denne muligheten til å endre den ledende plass til tre, og ikke glem å fjerne avkryssing Constrain til marginer.

Fordi vi endret verdien av de ledende begrensning av fremdriften syn, har vi et lite problem som vi trenger for å fastsette. Rammen av fremdriften syn reflekterer ikke begrensninger av fremdriften visning. Med utsikt fremgang valgt, klikker du Resolve Auto Layout Issues knappen nederst og velg Oppdater Frames fra Selected Views delen. Dette vil oppdatere rammen av fremdriften visning basert på de føringer vi valgt tidligere

Trinn 3:. Bygg og Kjør

Det er på tide å se widgeten i aksjon. Med Brukt plass ordningen valgt, velg Kjør fra Produkt menyen eller trykk Kommando-R. Avslør varslingssenteret ved å sveipe fra toppen av skjermen til bunnen og trykk på knappen Rediger nederst i varslingssenteret. Din widget bør være tilgjengelig for å legge til i dag delen.

Dette er hva vår forlengelse bør se ut legge det til i dag seksjonen ved å trykke på knappen Legg på sin venstre side..

Det ser bra ut, men hvorfor er det så mye plass under fremdriften utsikt og etiketten? Dessuten, hvorfor ikke operativsystemet respektere ledende begrensning av fremdriften visningen?

Begge saker er standard marginer satt av operativsystemet. Vi vil endre dette i det neste trinn. Vær imidlertid oppmerksom på at venstremargen er ønskelig siden det justerer fremdriften visning med widget navn.

Hvis du roterer enheten eller kjøre programmet på en annen enhet, vil du legge merke til at widgeten justerer det størrelse på riktig måte. Det er takket være Auto Layout

Trinn 4:. Fikse bunnmargen

Åpne TodayViewController.m i Xcode redaktør. Du vil merke at utsikten kontrolleren er i samsvar med NCWidgetProviding protokollen. Dette betyr at vi må implementere widgetMarginInsetsForProposedMarginInsets: metode og returnere et tilpasset margin ved å returnere en UIEdgeInsets struktur. . Oppdatere metodens implementering som vist nedenfor Anmeldelser - (UIEdgeInsets) widgetMarginInsetsForProposedMarginInsets: (UIEdgeInsets) marginer {margins.bottom = 10,0; returnere marginer;}

Kjør programmet på nytt for å se resultatet. Widgeten bør være mindre med mindre margin på bunnen. Du kan tilpasse disse marginene for å få det resultatet du er ute etter

Trinn 5:. Koble Outlets

Før du går videre, la oss avslutte brukergrensesnittet ved å legge til to uttak. Med dreieboken filen åpnes, bytter du til assisterende redaktør og sørg for at den viser TodayViewController.m.

Hold Kontroll Hotell og dra fra etiketten til visningen kontrollerens grensesnitt for å lage et utløp for etiketten. Navn uttaket percentLabel. Gjenta dette trinnet og skape et utløp oppkalt Barview for UIProgressView eksempel.

5. Viser Real data

Vi vil bruke NSFileManagers klassen å beregne enhetens tilgjengelige plassen. Men hvordan oppdaterer vi widgeten med at data?

Det er her en annen metode fra NCWidgetProviding protokollen kommer inn i bildet. Operativsystemet påkaller widgetPerformUpdateWithCompletionHandler: metode når widget er lastet, og det kan også bli kalt i bakgrunnen. I sistnevnte tilfelle, selv om widgeten ikke er synlig, kan systemet starte den og spør etter oppdateringer for å lagre et øyeblikksbilde. Dette stillbilde vil bli vist neste gang widgeten vises, vanligvis for en kort periode inntil widgeten vises.

Argumentet vedtatt i denne metoden er en ferdigstillelse handler som trenger å bli kalt når innholdet eller data er oppdatert. Blokken tar en parameter av typen NCUpdateResult å beskrive hvis vi har nytt innhold som skal vises. Hvis ikke, vil operativsystemet vet at det ikke er behov for å lagre en ny snapshot

Trinn 1:. Egenskaper

Vi må først lage noen egenskaper for å holde den fri, brukt, og totale størrelser. Vi vil også legge en eiendom til å holde brukt plass på enheten. Dette gir oss større fleksibilitet senere. Legg disse egenskapene til klassen forlengelse i TodayViewController.m
property (nonatomic, tildele) usignert lang lang fileSystemSize;.property (Nonatomic, tildele) usignert lang lang freeSize;property (nonatomic, tildele) usignert lang lang usedSize;property (nonatomic, tildele) dobbel usedRate;
Trinn 2:. gjennomførings updateSizes

Deretter oppretter og implementere en hjelper metode, updateSizes, for å hente de nødvendige data og beregne enhetens brukt plass
- (void) updateSizes {//Hente attributter fra NSFileManagers NSDictionary * dict = [[NSFileManagers defaultManager] attributesOfFileSystemForPath: NSHomeDirectory () error: null]; //Sette verdiene self.fileSystemSize = [[dict valueForKey: NSFileSystemSize] unsignedLongLongValue]; self.freeSize = [[dict valueForKey: NSFileSystemFreeSize] unsignedLongLongValue]; self.usedSize = self.fileSystemSize - self.freeSize;}
Trinn 3: Caching

Vi kan dra nytte av NSUserDefaults å lagre beregnet brukt plass mellom lanseringer. Livssyklusen til en widget er kort, så hvis vi cache denne verdien, kan vi sette opp brukergrensesnittet med en startverdi og deretter beregne den faktiske verdien.

Dette er også nyttig for å avgjøre om vi trenger å oppdatere widget snapshot eller ikke. La oss lage to convenience metoder for å få tilgang til brukerstandarder database
//@ implementation- (dobbel) usedRate {return [[[NSUserDefaults standardUserDefaults] valueForKey: RATE_KEY] doubleValue];} -. (Void) setUsedRate: (dobbel) usedRate {NSUserDefaults * mislighold = [NSUserDefaults standardUserDefaults]; [mislighold SetValue: [NSNumber numberWithDouble: usedRate] Forkey: RATE_KEY]; [mislighold synkron];}

Merk at vi bruker en makro RATE_KEY så ikke glem å legge dette på toppen av TodayViewController.m
//Macro for NSUserDefaults nøkkel # definere RATE_KEY @ "kUDRateUsed" <. h3> Trinn 4: Oppdatere brukergrensesnitt

Fordi vår widget er en visning controller, er viewDidLoad metoden et godt sted å oppdatere brukergrensesnitt. Vi gjør bruk av en hjelper metode, updateInterface å gjøre det Anmeldelser - (void) updateInterface {dobbel hastighet = self.usedRate.; //Hente den lagrede verdien self.percentLabel.text = [NSString stringWithFormat: ".% 1f %%" @, (hastighet * 100)]; self.barView.progress = rate;} - (void) viewDidLoad {[super viewDidLoad]; [selvtillit updateInterface];}
Trinn 5: Starte Ferdigstillelse Handler

Antall ledige byte en tendens til å endre seg ganske ofte. For å sjekke om vi virkelig trenger å oppdatere widget, vi sjekker den beregnede brukt plass og bruke en terskel på 0,01% i stedet for det nøyaktige antall frie byte. Endre gjennomføringen widgetPerformUpdateWithCompletionHandler: som vist nedenfor Anmeldelser - (void) widgetPerformUpdateWithCompletionHandler:. (Void (^) (NCUpdateResult)) completionHandler {[selvtillit updateSizes]; double newRate = (dobbel) self.usedSize /(dobbel) self.fileSystemSize; if (newRate - self.usedRate < 0,0001) {completionHandler (NCUpdateResultNoData); } Else {[selv setUsedRate: newRate]; [selvtillit updateInterface]; completionHandler (NCUpdateResultNewData); }}

Vi rekalkulere brukt plass, og hvis det er vesentlig forskjellig fra den forrige verdien, lagre verdien og oppdatere grensesnitt. Vi så fortelle operativsystemet som noe endret. Hvis ikke, så er det ikke behov for en ny snapshot. Selv om vi ikke bruke det i dette eksempelet, er det også en NCUpdateResultFailed verdi for å indikere at det oppsto en feil

Trinn 6:. Bygg & Kjør

Kjør søknaden din en gang til. Det bør nå vise riktig verdi på hvor mye plass som brukes av enheten.

6. Oppsummering

La oss vurdere levetiden til ny widget. Når du åpner I dag
panel, kan systemet vise en tidligere øyeblikksbilde før den er klar. Utsikten er lastet og din widget vil hente en verdi lagret i NSUserDefaults og bruke den til å oppdatere brukergrensesnitt

Deretter widgetPerformUpdateWithCompletionHandler. Heter, og det vil beregne den faktiske verdien. Hvis bufret og ny verdi er ikke vesentlig forskjellig, så vi ikke gjør noe. Hvis den nye verdien er vesentlig forskjellig, vi cache det og oppdatere brukergrensesnitt tilsvarende.

Mens i bakgrunnen, kan widget bli lansert av operativsystemet og den samme prosessen gjentas. Hvis NCUpdateResultNewData returneres, er en ny snapshot opprettet for å vise for den neste opptreden.

7. Legge til mer informasjon og animasjon

Selv om vi er allerede viser brukt plass, ville det være interessant å ha et nøyaktig antall. For å unngå rot på brukergrensesnittet, vil vi gjøre vårt widget mer interaktiv. Hvis brukeren taps prosenten etiketten, utvides widget, viser en ny etikett med absolutte tall. Dette er også en flott mulighet til å lære å bruke animasjon i widgets

Trinn 1:. Endre brukergrensesnitt

Åpne MainInterface.storyboard og velg prosent etiketten. I attributter Inspector, under Vis-delen, finner brukermedvirkning Aktivert alternativet og aktivere den.

Deretter må vi fjerne bunnen begrensning av etiketten. Avstanden på etiketten til bunnen av visningen vil endre programmatisk, noe som betyr at begrensningen vil bli ugyldig.

Velg merke, åpner Størrelse i Størrelse Inspector, velge nederste plass begrensning, og traff slette. Du kan også velge begrensningen guide i visningen manuelt og slette den. Etiketten nå bare har en topp og etterfølgende plass begrensningen som vist nedenfor.

Velg den visningen kontrolleren ved å klikke den første av de tre ikonene på toppen av scenen. I Størrelse området av størrelse Inspector, sette høyden til 106.

Legg til en ny etikett til visningen, og som vi gjorde før, satt sin farge til hvit i Attributter Inspector. I tillegg angi antall linjer til tre, høyden til 61, og bredden 200. Dette bør være nok til å romme tre linjer med informasjon. Du ønsker også det justert til bunnen og venstre marg

Det siste trinnet er å åpne assisterende redaktør og skape et utløp for etiketten heter detailsLabel

Trinn 2:.. Setup Anmeldelser

Den widget vil bare bli utvidet for et kort øyeblikk. Vi kan spare en boolsk i NSUserDefaults og laste den huske tidligere tilstand, men å holde det enkelt, hver gang widgeten er lastet det vil være stengt. Når du trykker den prosentvise etiketten, vises ekstra informasjon.

La oss først definere to makroer på toppen av TodayViewController.m å hjelpe med størrelser.
#define KWClosedHeight 37.0 # definere kWExpandedHeight 106,0

I viewDidLoad, legge til to linjer med kode for å sette den opprinnelige høyden på widgeten og for å gjøre detaljene merke gjennomsiktig. Vi vil visne i detalj etiketten når den prosentvise etiketten er tappet Anmeldelser - (void) viewDidLoad {[super viewDidLoad].; [selvtillit updateInterface]; //Ny [selvtillit setPreferredContentSize: CGSizeMake (0.0, kWClosedHeight)]; [self.detailsLabel setAlpha: 0,0];}

Merk at vi angir bredden på widgeten til 0,0, fordi bredden vil bli satt av operativsystemet

Trinn 3: Oppdatere Detaljer etikett <. br>

I detalj etiketten viser vi verdier for gratis, brukt, og total plass med hjelp av NSByteCountFormatter. . Legg til følgende gjennomføringen til visningen kontrolleren Anmeldelser - (void) updateDetailsLabel {NSByteCountFormatter * formaterings = [[NSByteCountFormatter Alloc] init]; [formaterings setCountStyle: NSByteCountFormatterCountStyleFile]; self.detailsLabel.text = [NSString stringWithFormat: @ "Brukt: \\ t% @ \\ Nfritt: \\ t% @ \\ Ntotal: \\ t% @", [formaterings stringFromByteCount: self.usedSize], [formaterings stringFromByteCount: self.freeSize ], [formaterings stringFromByteCount: self.fileSystemSize]];}
Trinn 4: Capturing berører

For å oppdage berører, vi overstyre touchesBegan: withEvent: metode. Ideen er enkel, når en berøring blir oppdaget, blir widget utvidet og detalj etiketten er oppdatert. Legg merke til at størrelsen på widgeten oppdateres ved å ringe setPreferredContentSize: på view controller Anmeldelser - (void) touchesBegan: (NSSet *) berører withEvent:. (UIEvent *) hendelse {[selvtillit updateDetailsLabel]; [selvtillit setPreferredContentSize: CGSizeMake (0.0, kWExpandedHeight)];}
Trinn 5: Legge Animasjon

Selv om widget fungerer bøter, kan vi forbedre brukeropplevelsen ved fading detaljene merke i mens widget utvides . Dette er mulig hvis vi implementerer viewWillTransitionToSize: withTransitionCoordinator :. Denne metoden kalles når widgeten høyde endres. Fordi en overgang koordinator objekt er gått inn, kan vi inkludere flere animasjoner.

Som du ser, endrer vi alpha verdien av detaljer etiketten, men du kan legge alle typer animere at du føler forbedrer bruker . opplevelse Anmeldelser - (void) viewWillTransitionToSize: (CGSize) størrelse withTransitionCoordinator: (id < UIViewControllerTransitionCoordinator >) koordinator {[koordinator animateAlongsideTransition: ^ (id < UIViewControllerTransitionCoordinatorContext > sammenheng) {[self.detailsLabel setAlpha: 1,0]; } Ferdigstillelse: null];}
Trinn 6: Bygg & Kjør

Vi er klare til å kjøre programmet en gang til. Gi det en sjanse, og trykk den prosentvise etiketten for å avsløre nye detaljer.

Konklusjon

Mens all denne logikken kan virke uoversiktlig for en så enkel oppgave, vil du nå være kjent med den fullstendige Fremgangsmåte for å lage en dag forlengelse. Holde disse prinsippene i bakhodet når designe og bygge din widget. Husk å holde det enkelt og direkte, og ikke glem ytelse.

Caching her ville ikke være nødvendig i det hele tatt med disse raske operasjoner, men det er spesielt viktig hvis du har dyre behandlingen å gjøre. Bruk din kunnskap om visning kontrollere og sjekke at det fungerer for ulike skjermstørrelser. Det er også anbefalt at du unngår rulle synspunkter eller kompleks preg anerkjennelse.

Selv om utvidelsen vil få en egen beholder, som vi så tidligere, er det mulig å aktivere datadeling mellom utvidelsen og den inneholder appen. Du kan også bruke NSExtensionContext sin openURL: completionHandler: med en tilpasset URL ordning for å starte din app fra widgeten. Og hvis koden er det du trenger å dele med utvidelsen, gå videre og lage et rammeverk for å bruke i app og utvidelse.

Jeg håper at kunnskapen presenteres her kommer til nytte når du bygger din neste store dag widget.