iOS 9: En introduksjon til 3D Touch

iOS 9: En introduksjon til 3D Touch
27
Del
11
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

Med iPhone-6s og 6s Plus, Apple introduserte en helt ny måte å kommunisere med våre enheter kalt 3D Touch. 3D Touch fungerer ved å oppdage hvor mye trykk som du søker på telefonskjermen for å utføre forskjellige handlinger. I denne opplæringen, skal jeg vise deg hvordan du kan dra nytte av 3D Touch, slik at du kan bruke denne nye teknologien i dine egne iOS 9 apps.

Forutsetninger

Denne opplæringen forutsetter at du kjører Xcode 7.1 eller senere. I skrivende stund, ikke iOS Simulator støtter 3D Touch ennå, noe som betyr at eventuelle testing må gjøres på en fysisk enhet, iPhone 6s eller iPhone 6s Plus. Hvis du ønsker å følge med, og deretter starte ved å laste ned start prosjektet fra GitHub.

1. Peek og Pop i Storyboards

I denne første delen, skal jeg vise deg hvordan du skal gjennomføre Peek og Pop funksjonalitet i appen din med storyboards-og en bit av koden. Hvis du ikke vet hva Peek og Pop er, er det i utgangspunktet en måte å trykke på et brukergrensesnitt element med litt mer kraft for å få en "Peek" på det.

Fra en slik forhåndsvisning, kan du deretter enten løfte fingeren for å avfeie det eller presse litt hardere igjen til "Pop" det i full skjerm. "Peekable" elementer kan være hvilken som helst visning controller, inkludert ting som e-post, meldinger og nettsider som vist i skjermbildet nedenfor.

Åpne starter prosjektet i Xcode og naviger til Main.storyboard. Zoome dreieboken ut ved å knipe på styreflaten eller ved å trykke Command + -. Velg segue vist i neste skjermbilde.

Med dette naturlig overgang valgt, åpner attributter
Inspector og se etter en ny seksjon som heter Peek og Pop. Aktiver avmerkingsboksen og konfigurere oppførselen som vist nedenfor.

I denne menyen kan du tildele tilpassede identifikatorer til både Peek (Preview) og Pop (forplikte) segues. Den forplikter segue har også alternativer for å konfigurere alt du kan for en vanlig naturlig overgang i storyboards som klasse, Modul, og Kind.

Bygg og kjøre programmet på din iPhone, og trykk på + -knappen øverst til høyre hjørne for å opprette et nytt element.

Trykk hardt på varen, og du vil se at vi får en forhåndsvisning av detaljvisningen kontrolleren for det elementet.

Du vil se at vår detaljvisning gjør ennå ikke viser de rette data for elementet vi forhåndsviser. Dette er fordi vi ennå ikke har konfigurert visningen for den tilpassede forhåndsvisning segue vi definert i dreieboken. Tilbake i prosjektet, åpen MasterViewController.swift og erstatte prepareForSegue (_: avsender :) metode med følgende gjennomføring:
styre func prepareForSegue (naturlig overgang: UIStoryboardSegue, avsender:? AnyObject) {if segue.identifier == "showDetail "{if la indexPath = self.tableView.indexPathForSelectedRow {la objekt = gjenstander [indexPath.row] as! NSDate la controller = (segue.destinationViewController som UINavigationController!) .topViewController Som! DetailViewController controller.detailItem = protestere controller.navigationItem.leftBarButtonItem = self.splitViewController? .displayModeButtonItem () Controller.navigationItem.leftItemsSupplementBackButton = true}} else if la celle = avsender som? UITableViewCell hvor segue.identifier == "showDetailPeek" {la controller = (segue.destinationViewController som UINavigationController!) .topViewController Som! DetailViewController controller.detailItem = cell.textLabel? .text Controller.navigationItem.leftBarButtonItem = self.splitViewController? .displayModeButtonItem () Controller.navigationItem.leftItemsSupplementBackButton = true}}

Den første hvis setningen forblir uendret. Hvis denne koden ikke er utført, vi så sjekk for å se om avsenderen er en UITableViewCell og naturlig overgang identifikator er lik "showDetailPeek". Dersom begge disse vilkårene er oppfylt, konfigurere vi detailItem til teksten i cellen.

Bygg og kjøre programmet på nytt. Denne gangen, da titte en vare, bør du få en riktig konfigurert forhåndsvisning som vist nedenfor.

En viktig ting å merke seg er at disse storyboard konfigurasjoner for Peek og Pop vil bare fungere på enheter som kjører iOS 9.1 eller nyere. For å støtte enheter med iOS 9.0, må du konfigurere Peek og Pop funksjonalitet i koden som vist i neste avsnitt.

2. Peek og Pop i Kode

Mens litt mer komplisert enn den storyboard oppsett, programma implementere Peek og Pop lar deg også legge til ekstra tiltak for å dine forhåndsvisninger når brukeren trekker opp. Ta en titt på følgende skjermbilde for å bedre forstå hva jeg mener.

Peek og pop håndteres i koden ved UIViewControllerPreviewingDelegate protokollen. I prosjektet, lage en ny iOS > Source > . Swift File og navn det MasterPreviewing

Legg til følgende kode i MasterPreviewing.swift:
import UIKitextension MasterViewController: UIViewControllerPreviewingDelegate {func previewingContext (previewingContext: UIViewControllerPreviewing, viewControllerForLocation plassering: CGPoint) - > UIViewController? {Vakt la viewController = self.storyboard? .instantiateViewControllerWithIdentifier ("ForceViewController") som? ForceViewController annet {return null} viewController.preferredContentSize = CGSize (bredde: 0, høyde: 0) returnerer viewController} func previewingContext (previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {showViewController (viewControllerToCommit, avsender: selv)}}

gjøre MasterViewController klasse i samsvar med den UIViewControllerPreviewingDelegate protokollen

I previewingContext (_:. viewControllerForLocation :) metode, instantiate vi en ForceViewController fra dreieboken og returnere dette objektet. Den preferredContentSize egenskapen avgjør hvor stor Peek forhåndsvisning vises på skjermen. Når en størrelse på (0, 0) blir brukt, gjør forhåndsvisnings seg automatisk så stor som den kan for gjeldende skjerm

I previewingContext (_:. CommitViewController :) metoden må fullføre overgangen fra MasterViewController forekomst og pop ForceViewController vi opprettet på Peek scenen på skjermen.

For å bruke denne nye koden, trenger vi også å registrere spesifikke synspunkter som vi ønsker å generere en forhåndsvisning for når presset på ordentlig. For å gjøre dette, åpne MasterViewController.swift og legge til følgende kode i viewDidLoad ():
hvis traitCollection.forceTouchCapability == erholdbar {self.registerForPreviewingWithDelegate (selv, sourceView: forceButton)}

Vi sjekker først for å se om 3D Touch er tilgjengelig på enheten (referert til som Force Touch av API). Hvis det er tilfelle, registrer vi forceButton (den nederst i tabellen) som kvalifisert utsikt til Peek og Pop med.

Til slutt, for å legge handlinger til en forhåndsvisning, må du definere dem i forhåndsvisningen er
view controller klasse. Åpne ForceViewController.swift og legge til følgende metode for klassen:
styre funk previewActionItems () - > [UIPreviewActionItem] {la regularAction = UIPreviewAction (tittel: "Vanlig", stil: .DEFAULT) {(handling: UIPreviewAction, vc: UIViewController) - > Ugyldig i} la destructiveAction = UIPreviewAction (tittel: "Destructive", stil: .Destructive) {(handling: UIPreviewAction, vc: UIViewController) - > Ugyldig i} la actionGroup = UIPreviewActionGroup (tittel: "Group ...", stil: .DEFAULT, handlinger: [regularAction, destructiveAction]) avkastning [regularAction, destructiveAction, actionGroup]}

Vi skaper tre handlinger å vise med ForceViewController forhåndsvisning. Den første er en vanlig virkning og er de mest vanlige. Når denne handlingen er valgt (tom) blokk med kode du definerer når du oppretter handlingen vil bli henrettet. Den andre er en destruktiv handling som vil fungere akkurat det samme som den første, men det vises røde på forhåndsvisningsskjermen. Til slutt lager vi en aksjonsgruppe som kollapser en rekke andre tiltak i henhold til en enkelt knapp.

Bygg og kjøre programmet igjen. Denne gangen, trykk bestemt på Force-knappen for å se en ny ForceViewController forhåndsvisning som vist nedenfor.

Sveip opp på denne forhåndsvisningen for å se handlingene som vi definert i ForceViewController klassen.

Til slutt, trykker Group ... tiltak for å åpne opp de handlingene som finnes i denne gruppen.

3. Oppdager Force Gjennom UITouch

På 3D Touch kompatible enheter, den UITouch klassen også får noen ny funksjonalitet i form av to nye egenskaper, kraft og maximumPossibleForce. Disse egenskapene er svært nyttig for enhver bruk tilfelle der du vil ha en nøyaktig måling av hvor mye press blir brukt til skjermen

Start med å legge følgende metode til ForceViewController klassen.
Styre func touchesMoved ( berørt: Set < UITouch >, withEvent hendelsen:? UIEvent) {if la berørings = touches.first hvor traitCollection.forceTouchCapability == erholdbar {self.forceOutput.text = "\\ (touch.force) \\ n \\ (touch.maximumPossibleForce ) "}}

Vi registrerer når en berøring på skjermen beveger seg, blant annet mot og vekk fra skjermen. Vi tar den nåværende styrken blir brukt fra første UITouch objekt i settet og vise verdiene på skjermen.

Bygg og drive din app og trykk på Force-knappen for å åpne ForceViewController. Skyv hvor som helst på skjermen med varierende mengder av trykk og du vil se at etiketten på skjermoppdateringen tilsvarende for å vise gjeldende påførte kraften samt maksimal kraft som kan brukes.

Merk at disse verdiene er ikke knyttet til noen fysisk enhet og er uavhengig av brukerens 3D Touch følsomhetsinnstillinger. En verdi på 1,0 representerer den kraft som utøves på en gjennomsnittlig trykk.

4. Startsiden rask Handlinger

I tillegg til den nye in-app funksjonalitet som 3D Touch tilbyr, kan du også legge opp til fire snarveier for spesifikke funksjoner i søknaden din om din app ikonet. Kan nås disse raske handlinger når en bruker trykker dypt på appens ikon på startskjermen som vist i neste skjermbilde.

Det finnes to hovedtyper av raske handlinger du kan opprette for programmet, statiske og dynamiske . Statiske raske handlinger er definert i appens Info.plist og er tilgjengelig til enhver tid for din søknad. Dynamiske raske handlinger er skapt i koden din, og er lagt til den delte UIApplication gjenstand for programmet.

For vår app, vi kommer til å skape både en statisk og en dynamisk rask handling som vil ha nøyaktig samme implementeringen , og legger til et nytt element i tabellvisningen. Den vil vise deg hvordan du kan utnytte både handlingstypene i dine egne applikasjoner

Hurtig handlinger er representert ved den nye UIApplicationShortcutItem klassen, som har følgende egenskaper:.

  • localizedTitle hovedtittel av rask handling (f.eks Ny fane i skjermbildet over)

    localizedSubtitle en valgfri teksting for rask handling, som vises under hovedtittelen

    skriv en unik streng identifikator for du kan bruke til å finne ut hvilke rask handling ble valgt

    ikonet en valgfri UIApplicationShortcutIcon objekt som kan vise et system levert ikon eller et egendefinert bilde

    userinfo en valgfri ordbok, som er nyttig for å knytte data med en rask handling

    For det første, vi skal lage den statiske rask handling. Åpne målets Info.plist fil og legge til følgende elementer nøyaktig som vist i skjermbildet nedenfor:

    Merk at UIApplicationShortcutItemIconType nøkkelen kan byttes med UIApplicationShortcutItemIconFile nøkkelen med verdien som er på bildet filnavnet du ønsker å bruke .

    UIApplicationShortcutItemUserInfo verdien vi tilbys er også bare en grunnleggende eksempel ordbok for å vise deg hvordan du kan sette opp dine egne data.

    Neste, vi skal lage den dynamisk handling. Åpne MasterViewController.swift og legge til følgende to linjer med kode i viewDidLoad () metode:
    la snarvei = UIApplicationShortcutItem (type: "com.tutsplus.Introducing-3D-Trykk.på.Legg post", localizedTitle: "Legg til element "localizedSubtitle:" Dynamic Handling ", ikon: UIApplicationShortcutIcon (type: .Legg), Userinfo:. nil) UIApplication.sharedApplication () shortcutItems = [snarvei]

    Akkurat sånn, du har opprettet både en statisk og dynamisk rask handling for søknaden din.

    Til slutt må vi håndtere vår app logikk for når disse raske handlinger er faktisk valgt fra startskjermen. Dette håndteres av din app delegat søknad (_: performActionForShortcutItem: completionHandler :) metode. Åpne AppDelegate.swift og legge til følgende metode til AppDelegate Klasse:
    func program (applikasjon: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: (Bool) - > Void) {if shortcutItem.type == "com.tutsplus .Introducing-3D-Trykk.på.Legg-item "{la splitViewController = self.window! .rootViewController som! UISplitViewController la navigationController = splitViewController.viewControllers [splitViewController.viewControllers.count-1] som! UINavigationController la masterViewController = navigationController.viewControllers [0] as! MasterViewController masterViewController.insertNewObject (UIButton ()) completionHandler (true)} completionHandler (falsk)}

    Vi sjekker først type rask handling og deretter få tilgang til MasterViewController objektet. På dette objektet, kaller vi det insertNewObject (_ :) metode for å sette inn et nytt element inn i tabellvisningen. Merk at denne metoden er gitt av
    iOS > Application > Master-Detail Application mal og krever en AnyObject parameter. Denne parameteren brukes ikke i selve metoden implementering, imidlertid, og kan være en hvilken som helst objekt. Til slutt, vi kaller den completionHandler med en boolsk verdi å fortelle systemet hvorvidt den raske handlingen ble utført med hell.

    Bygg og kjøre programmet ditt en siste gang. Når den har lastet inn, går du til enhetens startskjermen og trykk bestemt på app-ikonet. Du vil se at to raske handlinger er tilgjengelige for din app.

    Deretter trykker du på det ene av disse, og søknaden bør åpne med et nytt element lagt til tabellvisningen.

    Konklusjon

    Du skal nå være komfortabel med 3D Touch API tilgjengelig i iOS 9, inkludert Peek og Pop, oppdager kraft via UITouch, og Startsiden rask handlinger. 3D Touch tilbyr mange nye måter å samhandle med enheten, og jeg sterkt oppfordre alle til å vedta det innenfor sine egne applikasjoner.

    Som alltid, kan du la dine kommentarer og tilbakemeldinger under.



    Next Page: