iOS 8: Opprette et tilpasset tastatur i Swift
20
Del
to
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Fra og med iOS 8, kan programmene utvide tilpasset funksjonalitet og innhold utover din app, og gjøre den tilgjengelig for brukerne mens de bruker andre apper eller operativsystemet. En måte å forlenge operativsystemet er ved å opprette en tilpasset tastatur.
I denne opplæringen jeg skal vise deg hvordan du kan lage dine egne tastaturet med Swift og de nye app skjøte APIer. Før vi gjør det, vi kommer til å gå over hva et tastatur forlengelse kan gjøre, hva den ikke kan gjøre, og hva det bør å få godkjent for App Store.
1. Oversikt
En tilpasset tastatur erstatter systemtastaturet for brukere som ønsker evner, for eksempel en ny skrivemetode eller evnen til å skrive inn tekst på et språk som ikke er støttet av operativsystemet.
Den viktigste funksjonen til en tilpasset tastatur er enkel, svare på kraner, gester, eller andre innspill hendelser, og gi teksten i form av en unattributed NSString objekt ved innsettingspunktet for dagens skriving objekt.
Etter en bruker velger et tastatur, er det fortsatt som standard én når de åpner en app. Av denne grunn tastaturet må Hvis du bare trenger å legge på noen knapper til systemet tastatur, så du bør se nærmere på egendefinerte visninger for datainput Det er visse skriving objekter som den tilpassede tastaturet er ikke kvalifisert til å skrive inn. Disse inkluderer sikre tekstfelt for å legge inn passord og telefon pad objekter, for eksempel telefonnummeret felt i kontaktprogrammet. Den tilpassede tastaturet ikke har tilgang til visningen hierarki av input, det kan ikke styre markøren , og er ute av stand til å velge tekst. Dessuten kan den tilpassede tastaturet ikke vise noe over den øverste raden. Systemet tastaturet er ikke begrenset av disse begrensningene. For eksempel viser det en forlengelse når du trykker på en tast for å vise brukeren hva nøkkelen ble avlyttet. Som standard en Tastaturet har ingen nettverkstilgang og kan ikke dele filer med sin inneholder appen. For å aktivere disse funksjonene, setter verdien av RequestsOpenAccess nøkkelen i Info.plist filen til YES. Gjør du det utvider tastaturets sandkasse som beskrevet i Apples App Extension Programming Guide Hvis du ber om åpen tilgang, tastaturet gevinster følgende kapasiteter, hver med en samtidig ansvar:. Sørg for å lese Apples Design for User Trust dokument som beskriver ditt ansvar for å respektere og beskytte brukerdata i tilfelle du ber om åpen tilgang. I den mest grunnleggende form har vi et program som inneholder et tastatur forlengelse og en UIInputViewController som styrer tastaturet og svarer på brukerhendelser. Custom Keyboard malen inneholder en underklasse av UIInputViewController, som er den primære syn kontrolleren på tastaturet. La oss se på grensesnittet å få en følelse av hvordan det fungerer La oss lage en tilpasset tastatur for å gjøre alt dette litt mer håndfast. Vi skal lage et enkelt tastatur som kan håndtere numerisk input og enkle operasjoner. Vi kommer til å bruke en XIB fil for tastaturet brukergrensesnitt Åpne Xcode 6, opprette et nytt Enkel visning Søknad og velg Swift som programmerings språk. Name it CalculatorKeyboard Åpne Main.storyboard og drar et tekstfelt fra Objects Library. Vi vil bruke dette til å teste tastaturet senere. Sentrere tekstfeltet og legge de nødvendige layout begrensninger som vist nedenfor Hvis du ringer textField.becomeFirstResponder () i viewDidLoad tastaturet vil åpne når du starter applikasjonen Velg prosjektfilen i Prosjekt Navigator og legge et nytt mål ved å klikke på pluss-knappen nederst. Velg Application Extension til venstre, velg Custom Keyboard mal, . og name it Kalkulator Dette vil opprette en ny gruppe med navnet kalkulator, som inneholder to filer KeyboardViewController.swift og Info.plist Åpne KeyboardViewController .swift. Malen Tastaturet har en knapp, la brukeren veksle mellom tastaturer. Fjern koden i viewDidLoad metoden Høyreklikk kalkulatoren gruppen, og velg Ny fil .... Velg seksjon brukergrensesnittet til venstre, velg Vis-mal, og gi den navnet Kalkulator. Dette bør opprette en fil med navnet Calculator.xib. Åpne XIB filen og, i Attributter Inspektør på høyre, angi størrelsen til freeform og statuslinjen til Ingen. I Størrelse Inspector angi bredden av utsikten til 320 og høyden til 160. Dra en knapp fra Objekter bibliotek til visningen. I attributter Inspector, satt tittelen til 1. I Size Inspector, sett knappen bredde og høyde til 30. Flytt knappen til høyre hjørne av visningen før den er justert etter margene. Kopier knappen ved å klikke og dra knappen mens du trykker på Tilvalg-tasten. Plasser den andre knappen under den første. Velg knappene ved å trykke Kommando-A og kopiere knappene. Plasser de nye knappene under første og andre knappen. Gjenta prosessen for å skape en annen kolonne av knappene til du har fire kolonner med knapper. Deretter velger du kolonnen til igjen og lage en kopi som er i tråd med venstre kant av visningen. Angi bredden av knappene til 140 poeng. Skift knappen øverst til venstre med en etikett som har samme størrelse som på knappen. Endre navn på knappene som i skjermbildet under. Gi utsikten en blåaktig bakgrunnsfarge og angi bakgrunnsfarge for knapper til hvitt med en tetthet på 15%. Og for displayet etiketten, gjør det svart med en tetthet på 15%. Angi tekststørrelsen til 18 poeng for hver brukergrensesnitt objektet og angi tekstfarge til hvit. Brukergrensesnittet skal nå se slik ut: Vi må først opprette en eiendom der du vil lagre brukergrensesnittet Lag en metode som heter loadInterface og kaller det i viewDidLoad metoden i KeyboardViewController På dette punktet bør du kunne teste den nye tastaturet. Med CalculatorKeyboard ordningen valgt, bygge og kjøre programmet på enheten. Dette vil legge til et nytt tastatur til enheten. Men før du kan bruke den må du først installere det Gå til Innstillinger >.; Generelt > Tastatur > Tastatur og velg Legg til ny Keyboard. Der vil du finne den Kalkulator tastaturet i listen over tredjeparts tastaturer. Velge og installere tastaturet. Neste gang du åpner tastaturet du bør være i stand til å se den nye tastaturet ved å trykke på neste tastaturknapp. Hvis du bruker iOS Simulator, skikken tastaturet fungerer kanskje ikke i din app. For å se tastaturet trykker du på hjem og åpne Spotlight Opprett en eiendom for neste tastaturknappen i KeyboardViewController klassen Åpne Calculator.xib, Select File eier, og i Identity Inspector endre sin klasse KeyboardViewController. Høyre klikk på Neste tastatur-knappen og koble en henvisning utløp til filens eier. I loadInterface metoden, legger vi til en handling i nextKeyboard knappen som vist nedenfor Opprett en eiendom til skjermen og koble henvisning utløp i Interface Builder Lag en metode som heter clearDisplay og kaller det i viewDidLoad metoden, etter påkalle loadInterface. Displayet skal nå vise 0 når du åpner tastaturet Koble knappen C touch opp inne hendelse til clearDisplay metoden i Interface Builder Tid for å håndtere numerisk innspill. Når du åpner tastaturet det viser 0 på displayet. Hvis du trykker på en talltast, bør den erstatte skjermen til det nummeret. Opprett en eiendom som heter shouldClearDisplayBeforeInserting å gjennomføre denne atferden. Lag en metode som heter didTapNumber og koble den i Interface Builder til alle tallknappene for touch opp inne hendelsen. Metoden bruker titleLabel av knappen for å finne ut hvilket nummer som ble tappet Oppdater clearDisplay metoden som vist nedenfor. Anmeldelser klasse KeyboardViewController: UIInputViewController {...IBAction func clearDisplay () {display.text = "0" shouldClearDisplayBeforeInserting = true}} Tastaturet kode er i et annet mål enn din app. På grunn av dette debug logger ikke er synlige. For å se loggene for Kalkulator mål, åpne systemloggen fra iOS Simulator knappen for å sette inn et punktum bør legge en prikk til skjermen, men bare hvis det ikke er en prikk stede ennå klasse KeyboardViewController. UIInputViewController {...IBAction func didTapDot () {if la innspill = skjerm .text {var hasDot = false for ch i input.unicodeScalars {if? ch == "." {HasDot = true pause}} hvis hasDot == false {display.text = "\\ (input)." }}}} knappen for å sette inn tekst bør legge kalkulatoren viser tekst til innsettingspunktet. For å gjøre dette, bruker vi textDocumentProxy eiendommen som vist nedenfor Fordi vi implementere en enkel tastatur som ikke støtter uttrykk trær, 1 + 2 * 3 vil tilsvare 9. Vi . 're kommer til å bruke en enklere modell der kalkulatoren har et internt minne slot som det kan gjelde operasjoner La oss ta et enkelt innspill for å forstå hvordan kalkulatoren algoritmen fungerer: Observasjoner: For å implementere kalkulatoren, vi kommer til å trenge: Lag en metode som heter didTapOperation og koble den til betjeningsknappene retusjere inne hendelse i Interface Builder. Metoden vil bruke tittelen på knappen for å avgjøre hvilken operasjon ble trykket Lag og implementere computeLastOperation metoden Oppdater clearDisplayMethod som vist nedenfor. Når brukeren begynner å skrive det første tallet, bør det interne minnet settes til 0 og nextOperation bør være tillegg. På den måten, etter at brukeren innganger det første tallet og presser en operasjon, vil kalkulatoren huske inputted antall La oss bruke IBInspectable erklæring attributt å legge et hjørne radius til knapper og skjerm. Først oppretter du en underklasse av UIButton og UILabel Velg knappene og endre sin klasse til RoundButton i Identity Inspector I Interface Builder. I attributter inspektør, bør du se den nye hjrneradius attributt. Gjør det samme for displayet etiketten. Tastaturet skal nå se slik ut. Du skal nå være i stand til å gjøre en tilpasset tastatur i iOS bruker app skjøte APIer. Husk at hver tilpasset tastatur må ha en måte å bytte til neste tastatur og at tastaturet kan ikke koble til internett, tilgang til stedstjenester, eller snakke med sin inneholder app som standard, men du kan be om disse evnene. Systemet vil bruke standardtastaturet for sikre felt, for eksempel passord og telefonnummer felt. Ikke glem at koden for den egendefinerte tastatur bor i et eget mål. På grunn av dette debug logger ikke er synlige. Å se dem, åpne systemloggen fra iOS Simulator.
tillate brukeren å bytte til et annet tastatur
Det er to utviklings essensielle for hver tilpasset tastatur:. Trust. Den egendefinerte tastatur gir deg tilgang til hva en bruker typer, slik tillit mellom deg og din bruker er essential.A "neste tastatur" -tasten. Den affordance som lar brukeren bytte til et annet tastatur er en del av et tastatur brukergrensesnitt; du må gi en i tastaturet. - App Extension Programming Guide
2.. Krav & Begrensninger
Hva en Custom Keyboard kan ikke gjøre
Røde linjen viser den øverste grensen for en tilpasset tastatur.
Sandboxing
muligheten til å bruke en felles beholder med tastaturets inneholder app, som gjør det mulig funksjoner, for eksempel å gi en tilpasset leksikon ledelse brukergrensesnitt i holdige app
evne til å sende tastetrykk og andre innsats arrangementer for server-side behandling
tilgang til iCloud, som du kan bruke, for eksempel for å sikre at tastaturinnstillinger og egendefinerte autokorrektur leksikon er opptil oppdatert på alle enheter som eies av brukeren
tilgang til Game Center og in-app kjøp via inneholder app
evne til å arbeide med administrerte apps hvis du designe tastaturet for å støtte mobile device management ( MDM)
3. Slik fungerer det
klasse UIInputViewController. UIViewController, UITextInputDelegate, NSObjectProtocol {var inputView: UIInputView! Var textDocumentProxy: NSObject! {Få} func dismissKeyboard () func advanceToNextInputMode () //Dette vil ikke gi en komplett register av et språks vokabular. //Det er utelukkende ment å supplere eksisterende leksika. func requestSupplementaryLexiconWithCompletion (completionHandler:! ((UILexicon) - > Void))}
inputView er utsikten brukes for tastaturet, er det det samme som utsikten eiendom
dismissKeyboard metoden kan bli kalt til skjule tastaturet
advanceToNextInputMode brukes til å bytte mellom tastaturene
textDocumentProxy er objektet som du skal bruke til å samhandle med dagens skriving
self.textDocumentProxy.insertText ( "Tuts +") //setter strengen "Tuts +" ved innsettings pointself.textDocumentProxy.deleteBackward () //Sletter tegnet til venstre for innsettingspunktet
UIInputViewController samsvar med UITextInputDelegate protokollen, som varsler deg når teksten eller tekst valget endres gjennom den selectionWillChange, selectionDidChange, textWillChange og textDidChangeevents
4. Å gjøre en kalkulator Keyboard
Trinn 1:. Opprett et nytt prosjekt
Trinn 2:. Legg et tekstfelt
Trinn 3:.. Legg Tastatur Extension
Trinn 4:. Rydder opp
Trinn 5:. Opprette brukergrensesnitt
Trinn 6: Legge User Interface
klasse KeyboardViewController. UIInputViewController {var calculatorView: UIView! ...}
klassen KeyboardViewController. UIInputViewController {... overstyring func viewDidLoad () {super.viewDidLoad () loadInterface ()} func loadInterface () {//laste blyet filen Var calculatorNib = UINib (nibName: "kalkulator", bunt: null) //instantiate de view calculatorView = calculatorNib.instantiateWithOwner (selvstendig, opsjoner: nil) [0] som UIView //legge grensesnittet til hovedvisningen view.addSubview (calculatorView) //kopiere bakgrunnsfargen view.backgroundColor = calculatorView.backgroundColor} ...}
Trinn 7: Testing av Keyboard
Trinn 8:. Neste Keyboard
klasse KeyboardViewController. UIInputViewController {IBOutlet Var nextKeyboardButton: UIButton! ...}
klasse KeyboardViewController. UIInputViewController {... func loadInterface () {... //Dette vil gjøre knappen samtalen advanceToNextInputMode () når tappet nextKeyboardButton.addTarget (selv, handling: "advanceToNextInputMode", forControlEvents: .TouchUpInside)}}
Trinn 9: Antall Skjerm
klasse KeyboardViewController. UIInputViewController {IBOutlet Var display: UILabel! ...}
klassen KeyboardViewController. UIInputViewController {... overstyring func viewDidLoad () {super.viewDidLoad () loadInterface () clearDisplay ()} ...IBAction func clearDisplay () {display.text = "0"}}
Trinn 10:. Antall Input
klasse KeyboardViewController. UIInputViewController {var shouldClearDisplayBeforeInserting = sant ...IBAction func didTapNumber (antall: UIButton) {if shouldClearDisplayBeforeInserting {display.text = "" shouldClearDisplayBeforeInserting = false} Hvis Var numberAsString = number.titleLabel? .text {var numberAsNSString = numberAsString som NSString Hvis Var oldDisplay = skjerm? .text! {Display.text = "\\ (oldDisplay) \\ (numberAsNSString.intValue)"} else {display.text = "\\ (numberAsNSString.intValue)"}}}}
Trinn 11:. Dot Input
Trinn 12: Sette Tekst
klasse KeyboardViewController. UIInputViewController {...IBAction func didTapInsert () {var proxy = textDocumentProxy som UITextDocumentProxy hvis la innspill = vise .text som String? {Proxy.insertText (input)}}}
Trinn 13: Håndtering Operations
user kraner 1, skjermen bør endres fra 0 til 1
bruker kraner +, bør kalkulatoren huske å legge neste Angitt nummer til en
user kraner 2, skjermen bør endres fra 1 til 2
user kraner *, displayet og det interne minnet på kalkulatoren bør endre til tre, bør kalkulatoren huske å multiplisere det interne minnet med neste Angitt antall
kraner bruker 3 bør displayet gjenstår 3
user kraner =, bør kalkulatoren gjelder den siste operasjonen, og skjermen bør endres til 9
kalkulatoren bør Husk neste operasjon å søke
etter inntasting av et nummer hvis en operasjon eller lik trykkes, bør kalkulatoren gjelder den siste husket drift
hvis brukeren trykker to eller flere operasjoner uten å skrive inn et nummer bør kalkulatoren huske sist en
etter en operasjon er brukt, bør skjermen oppdatere med resultatet
etter en resultatet vises, bør skjermen fjerne før du skriver et annet nummer Anmeldelser
en internalMemory eiendom som lagrer den midlertidige resultat
en eiendom som lagrer nextOperation
en annen som å huske om det bør gjelde den nextOperation etter en operasjon er trykket
enum Operation {case Tilsetting tilfelle Multiplikasjon tilfelle subtraksjon tilfelle Division tilfelle None} class KeyboardViewController: UIInputViewController {var internalMemory = 0.0 Var nextOperation = Operasjon .None Var shouldCompute = false ...}
klasse KeyboardViewController. UIInputViewController {...IBAction func didTapOperation (drift: UIButton) {if shouldCompute {computeLastOperation ()} Hvis Var op = operation.titleLabel? .text {bryter op {case "+": nextOperation = Operation.Addition case "-": nextOperation = Operation.Subtraction case "X": nextOperation = Operation.Multiplication case "%": nextOperation = Operation.Division standard: nextOperation = Operation.None}}}}
klasse KeyboardViewController. UIInputViewController {...IBAction func computeLastOperation () {//husk å ikke beregne hvis en annen operasjon trykkes uten inputing et annet nummer første shouldCompute = false Hvis Var innspill = skjerm .text {var inputAsDouble = (input som NSString) .doubleValue Var resultat = 0.0 //gjelder betjeningsbryteren nextOperation {saken .Addition: resultat = internalMemory + inputAsDouble tilfelle .Subtraction: resultat = internalMemory - inputAsDouble tilfelle .Multiplication: resultat = internalMemory * inputAsDouble tilfelle .Division: resultat = internalMemory /inputAsDouble standard: resultat = 0.0} nextOperation = Operation.None Var output = "\\ (resultat)" //hvis resultatet er et heltall don 't vise desimaltegnet hvis output.hasSuffix (". 0") {output = "\\ (Int (resultat))"} //truncatingg å vare fem sifre Var komponenter = output.componentsSeparatedByString (".") hvis komponenter. telle > = 2 {var beforePoint = komponenter [0] Var afterPoint = komponenter [1] hvis afterPoint.lengthOfBytesUsingEncoding (NSUTF8StringEncoding) > 5 {la Indeks: String.Index = forhånd (afterPoint.startIndex, 5) afterPoint = afterPoint.substringToIndex (indeks)} output = beforePoint + "." + AfterPoint} //oppdatere skjermen display.text = utgang //lagre resultatet internalMemory = resultere //husk å tømme displayet før du setter inn et nytt nummer shouldClearDisplayBeforeInserting = true}}}
klasse KeyboardViewController. UIInputViewController {...IBAction func clearDisplay () {display.text = "0" internalMemory = 0 nextOperation = Operation.Addition shouldClearDisplayBeforeInserting = true}}
Trinn 14: finpuss
klasse RoundButton. UIButton {IBInspectable Var cornerRadius: CGFloat = 0 {didSet {layer.cornerRadius = cornerRadius}}} class RoundLabel: UILabel {IBInspectable Var cornerRadius: CGFloat = 0 {didSet {layer.cornerRadius = cornerRadius}}}
Konklusjon