iOS 8 Crearea unei tastaturi personalizate în Swift

Începând cu versiunea iOS 8, aplicațiile dvs. pot extinde funcționalitatea personalizată și conținutul dincolo de aplicația dvs. și îl pot pune la dispoziția utilizatorilor în timp ce utilizează alte aplicații sau sistemul de operare. O modalitate de a extinde sistemul de operare este crearea unei tastaturi personalizate.

În acest tutorial vă voi arăta cum să creați propria tastatură utilizând Swift și noile interfețe API pentru extensia aplicațiilor. Înainte de a face acest lucru, vom trece peste ceea ce poate face o extensie de tastatură, ce nu poate face și ce ar trebui să obțină aprobarea pentru App Store.

1. Prezentare generală

O tastatură personalizată înlocuiește tastatura sistemului pentru utilizatorii care doresc capabilități, cum ar fi o metodă nouă de introducere a textului sau posibilitatea de a introduce text într-o limbă care nu este altfel acceptată de sistemul de operare.

Funcția esențială a unei tastaturi personalizate este simplă, răspunde la robinete, gesturi sau alte evenimente de intrare și oferă text sub forma unei cărți neatribuite NSString obiect la punctul de inserare a textului obiectului curent de introducere a textului.

După ce un utilizator alege o tastatură, rămâne ca cea implicită ori de câte ori deschide o aplicație. Din acest motiv, tastatura trebuie sa permiteți utilizatorului să comute la o altă tastatură.

Există două esențe de dezvoltare pentru fiecare tastatură personalizată:
Încredere. Tastatura personalizată vă oferă acces la ceea ce tipizează un utilizator, astfel încrederea între dvs. și utilizatorul dvs. este esențială.
O tastă "următoare tastatură". Avantajul care permite unui utilizator să treacă la o altă tastatură face parte dintr-o interfață de utilizator a tastaturii; trebuie să furnizați unul în tastatură. - Ghid de programare pentru extinderea aplicațiilor

Dacă trebuie doar să adăugați câteva butoane la tastatura sistemului, atunci ar trebui să căutați în vizualizări personalizate pentru introducerea datelor.

2. Cerințe și limite

Ce nu poate face o tastatură personalizată

Există anumite obiecte de introducere a textului pe care tastatura dvs. personalizată nu este eligibilă să le introduceți. Acestea includ câmpuri de text securizate pentru introducerea parolelor și a obiectelor de pe telefon, cum ar fi câmpurile de numere de telefon din Contacte cerere.

Tasta personalizată nu are acces la ierarhia de vizualizare a intrării, nu poate controla cursorul și nu poate selecta text. De asemenea, tastatura personalizată nu poate afișa nimic deasupra rândului de sus. Tastatura sistemului nu este limitată de aceste constrângeri. De exemplu, acesta afișează o extensie când atingeți o cheie pentru a afișa utilizatorului ce cheie a fost utilizată.

Linia roșie arată limita superioară a unei tastaturi personalizate.

sandbox

Implicit, o tastatură nu are acces la rețea și nu poate partaja fișiere cu aplicația care conține. Pentru a activa aceste capabilități, setați valoarea RequestsOpenAccess tastați în Info.plist fișier la DA. În acest fel, se extinde caseta de nisip a tastaturii, așa cum este descris în Ghidul de programare pentru extensia aplicațiilor Apple.

Dacă solicitați acces deschis, tastatura dvs. are următoarele capabilități, fiecare cu responsabilitate concomitentă:

  • accesul la serviciile de localizare și la baza de date a cărții de adrese, fiecare necesitând permisiunea utilizatorului pentru primul acces
  • opțiunea de a utiliza un container partajat cu aplicația care conține tastatura, care permite funcții, cum ar fi furnizarea unei interfețe personalizate de gestionare a lexiconului în aplicația care conține
  • capacitatea de a trimite intrări de la tastatură și alte evenimente de intrare pentru prelucrarea de la server
  • accesul la iCloud, pe care îl puteți utiliza, de exemplu, pentru a vă asigura că setările de tastatură și lexicoul dvs. de autocorecție personalizat sunt actualizate pe toate dispozitivele deținute de utilizator
  • accesul la Centrul de jocuri și cumpărarea în aplicație prin intermediul aplicației care le conține
  • capacitatea de a lucra cu aplicațiile gestionate dacă proiectați tastatura pentru a sprijini gestionarea dispozitivelor mobile (MDM)

Asigurați-vă că ați citit documentul Apple Designing for User Trust, care descrie responsabilitățile dvs. privind respectarea și protejarea datelor utilizatorului în cazul în care solicitați acces liber.

3. Cum funcționează

În forma cea mai de bază avem o aplicație care conține o extensie de tastatură și o UIInputViewController care controlează tastatura și răspunde la evenimentele utilizatorilor.

Tastatura personalizată șablon conține o subclasă de UIInputViewController, care este controlerul principal de vizualizare a tastaturii. Să ne uităm la interfață pentru a ne simți cum funcționează.

clasa UIInputViewController: UIViewController, UITextInputDelegate, NSObjectProtocol var inputView: UIInputView! var textDocumentProxy: NSObject! get func dismissKeyboard () func advanceToNextInputMode () // Aceasta nu va oferi un depozit complet al vocabularului unei limbi. // Se intenționează exclusiv să completeze lexicoanele existente. func requestAdditionalLexiconWithCompletion (completionHandler: ((UILexicon!) -> Void)!) 
  • inputView este vizualizarea folosită pentru tastatură, este aceeași cu cea folosită pentru tastatură vedere proprietate
  • dismissKeyboard metoda poate fi apelată pentru a elimina tastatura
  • advanceToNextInputMode este folosit pentru a schimba între tastaturi
  • textDocumentProxy este obiectul pe care îl veți utiliza pentru a interacționa cu introducerea curentă a textului
self.textDocumentProxy.insertText ("Tuts +") // introduce șirul "Tuts +" la punctul de inserare self.textDocumentProxy.deleteBackward () // Șterge caracterul din stânga punctului de inserare 
  • UIInputViewController este în conformitate cu UITextInputDelegate protocol, care vă notifică atunci când textul sau selecția textului se modifică prin selectionWillChangeselectionDidChangetextWillChange și textDidChangeevenimente

4. Efectuarea unei tastaturi Calculator

Să creați o tastatură personalizată pentru a face toate acestea puțin mai tangibile. Vom face o tastatură simplă care să poată gestiona intrările numerice și operațiile simple. Vom folosi un fișier XIB pentru interfața de utilizator a tastaturii.

Pasul 1: Creați un proiect nou

Deschideți Xcode 6, creați un nou Vizualizare individuală și selectați Rapid ca limbaj de programare. Numeste CalculatorKeyboard.

Pasul 2: Adăugați un câmp text

Deschis Main.storyboard și trageți un câmp de text din Biblioteca de obiecte. Vom folosi acest lucru pentru a testa tastatura mai târziu. Centrează câmpul de text și adaugă constrângerile de aspect necesare, după cum se arată mai jos.

Dacă sunați textField.becomeFirstResponder () în viewDidLoad tastatura se va deschide la pornirea aplicației.

Pasul 3: Adăugați extensia tastaturii

Selectați fișierul proiectului din Project Navigator și adăugați o nouă destinație făcând clic pe butonul plus din partea de jos.

Selectați Extensie de aplicație din stânga, alegeți Tastatura personalizată șablon și numește-l Calculator.

Acest lucru va crea un nou grup numit Calculator, conținând două fișiere KeyboardViewController.swift și Info.plist.

Pasul 4: Curățarea

Deschis KeyboardViewController.swift. Tastatura șablonului are un buton, permițând utilizatorului să comute între tastaturi. Eliminați codul în viewDidLoad metodă.

Pasul 5: Crearea interfeței utilizator

Faceți clic dreapta pe Calculator grup și selectați Fișier nou ... . Selectează Interfața cu utilizatorul din stânga, alegeți Vedere șablon și numește-l Calculator. Acest lucru ar trebui să creeze un fișier numit Calculator.xib.

Deschideți fișierul XIB și, în Atribuții Inspector din dreapta, setați dimensiunea la Liber de la și bara de stare la Nici unul.

În Inspector de mărime setați lățimea ecranului la 320 și înălțimea până la 160.

Glisați un buton din Biblioteca de obiecte la vedere. În Atribuții Inspector, setați titlul la 1. În Inspector de mărime, setați lățimea și înălțimea butonului la 30. Deplasați butonul în colțul din dreapta sus al vizualizării până când se aliniază marginile.

Copiați butonul făcând clic și deplasând butonul în timp ce apăsați pe Opțiune cheie. Poziționați al doilea buton sub prima.

Selectați butoanele apăsând Command-A și copiați butoanele. Poziționați noile butoane sub primul și al doilea buton.

Repetați procesul pentru a crea o altă coloană de butoane până când aveți patru coloane de butoane.


Apoi, selectați coloana din stânga și faceți o copie care se aliniază cu marginea din stânga a ecranului.

Setați lățimea butoanelor la 140 puncte. Înlocuiți butonul din stânga sus cu o etichetă care are aceeași dimensiune ca și butonul. Redenumiți butoanele ca în ecranul de mai jos.

Oferiți vederii o culoare de fundal albastru și setați culoarea de fundal a butoanelor pe alb, cu o opacitate de 15%. Și pentru eticheta de afișare, faceți-o negru cu o opacitate de 15%. Setați dimensiunea textului la 18 puncte pentru fiecare obiect al interfeței utilizator și setați culoarea textului la alb. Interfața cu utilizatorul ar trebui să arate astfel:

Pasul 6: Încărcarea interfeței utilizator

Mai întâi trebuie să creăm o proprietate în care să stocăm interfața cu utilizatorul.

clasa KeyboardViewController: UIInputViewController var calculatorView: UIView! ... 

Creați o metodă numită loadInterface și apelați-l în viewDidLoad metodă a KeyboardViewController.

() // suprascrie func vizualizareDidLoad () super.viewDidLoad () loadInterface () func loadInterface () // încărcați fișierul nib var calculatorNib = UINib (nibName: "Calculator", bundle: nil) // instantiate calculatorul viewView = calculatorNib.instantiateWithOwner (auto, opțiuni: nil) [0] ca UIView // adăugați interfața la vizualizarea principală view.addSubview (calculatorView) // copiați culoarea de fundal view.backgroundColor = calculatorView.backgroundColor ... 

Pasul 7: Testarea tastaturii

În acest moment ar trebui să puteți testa noua tastatură. Cu CalculatorKeyboard selectați schema, construiți și executați aplicația de pe dispozitiv. Aceasta va adăuga o nouă tastatură pe dispozitiv. Cu toate acestea, înainte de ao putea utiliza, mai întâi trebuie să o instalați.

Mergi la Setări > General > Tastatură > Tastaturi și selectați Adăugați tastatură nouă. Acolo veți găsi Calculator tastatură în lista tastaturilor terță parte. Selectați și instalați tastatura. La următoarea deschidere a tastaturii, ar trebui să puteți vedea noua tastatură apăsând următorul buton de tastatură.

Dacă utilizați Simulatorul iOS, este posibil ca tastatura personalizată să nu funcționeze în interiorul aplicației dvs. Pentru a vedea tastatura apasă acasă și deschideți Spotlight.

Pasul 8: Tastatura următoare

Creați o proprietate pentru următorul buton de tastatură din KeyboardViewController clasă.

clasa KeyboardViewController: UIInputViewController @IBOutlet var nextKeyboardButton: UIButton! ... 

Deschis Calculator.xib , Selectați Proprietarul dosarului, și în Inspectorul de identitate schimba clasa sa KeyboardViewController.

Faceți clic dreapta pe Următoarea tastatură și conectați o priză de referință la Proprietarul dosarului.

În loadInterface , adăugăm o acțiune la nextKeyboard , după cum se arată mai jos.

Clasa de KeyboardViewController: UIInputViewController ... FUNC loadInterface () ... // Acest lucru va face advanceToNextInputMode butonul de apel () când este atinsă nextKeyboardButton.addTarget (auto, acțiune: "advanceToNextInputMode", forControlEvents: .TouchUpInside)

Pasul 9: Afișarea numărului

Creați o proprietate pentru afișare și conectați priza de referință în Interface Builder.

clasa KeyboardViewController: UIInputViewController @IBOutlet var display: UILabel! ...

Creați o metodă numită clearDisplay și apelați-l în viewDidLoad după invocare loadInterface. Afișajul ar trebui să apară acum 0 când deschideți tastatura.

Clasa de KeyboardViewController: UIInputViewController ... suprascrie func viewDidLoad () super.viewDidLoad () loadInterface () clearDisplay () ... @IBAction func clearDisplay () display.text = "0"

Conectați C butoane atingeți înăuntru eveniment la clearDisplay metoda în Interface Builder.

Pasul 10: Introducerea numărului

Este timpul să se ocupe de intrarea numerică. Când deschideți tastatura, se afișează 0 pe ecran. Dacă apăsați o tastă numerică, ar trebui să înlocuiți afișajul cu acel număr. Creați o proprietate numită shouldClearDisplayBeforeInserting pentru a implementa acest comportament.

Creați o metodă numită didTapNumber și conectați-l în Interface Builder la toate butoanele numerice pentru atingeți înăuntru eveniment. Metoda utilizează titleLabel a butonului pentru a determina ce număr a fost atins.

(dacă ar trebui să fieClearDisplayBeforeInserting display.text = "" shouldClearDisplayBeforeInserting = false dacă var numberAsString = number.titleLabel? .text var numberAsNSString = numberAsString ca NSString dacă var oldDisplay = afișează .text! display.text = "\ (oldDisplay) \ (numberAsNSString.intValue)" altceva display.text = "\ (numberAsNSString.intValue)" 

Actualizați clearDisplay așa cum se arată mai jos.

clase tastăViewController: UIInputViewController ... @IBAction func clearDisplay () display.text = "0" shouldClearDisplayBeforeInserting = true

Codul tastaturii se află într-o țintă diferită de aplicația dvs. Din acest motiv, jurnalele de depanare nu sunt vizibile. Pentru a vedea jurnalele pentru Calculator țintă, deschideți jurnalul de sistem din Simulatorul iOS.

Pasul 11: Introducerea punctului

Butonul pentru introducerea unui punct ar trebui să adauge un punct pe afișaj, dar numai dacă nu există încă un punct.

Clasa de KeyboardViewController: UIInputViewController ... @IBAction FUNC didTapDot () if lasa de intrare = afișare .text var hasDot = false pentru ch în input.unicodeScalars if ch ==? "" hasDot = true break dacă hasDot == false display.text = "\ (input)."  

Pasul 12: Introducerea textului

Butonul pentru introducerea textului trebuie să adauge textul afișat al calculatorului în punctul de inserare. Pentru a face acest lucru, folosim textDocumentProxy proprietate după cum se arată mai jos.

Clasa de KeyboardViewController: UIInputViewController ... @IBAction func didTapInsert () var proxy = textDocumentProxy ca UITextDocumentProxy daca lasa intrare = afișa .text ca String? proxy.insertText (intrare)

Pasul 13: Operațiuni de manipulare

Pentru că implementăm o tastatură simplă care nu suportă arbori de expresie, 1 + 2 * 3 va fi egal 9. Vom folosi un model mai simplu în care calculatorul are un slot de memorie internă pe care se pot aplica operațiuni.

Să luăm o simplă intrare pentru a înțelege cum funcționează algoritmul calculatorului:

  • robinetele utilizatorilor 1, ecranul trebuie să se schimbe 0 la 1
  • robinetele utilizatorilor +, calculatorul trebuie să rețină adăugarea următorului număr introdus 1
  • robinetele utilizatorilor 2, ecranul trebuie să se schimbe 1 la 2
  • robinetele utilizatorilor *, afișajul și memoria internă a calculatorului trebuie să se schimbe 3, calculatorul trebuie să-și amintească să înmulțească memoria internă cu următorul număr introdus
  • robinetele utilizatorilor 3, afișajul ar trebui să rămână 3
  • robinetele utilizatorilor =, calculatorul ar trebui să aplice ultima operație și afișajul trebuie să se schimbe 9

observaţii:

  • calculatorul trebuie să-și amintească următoarea operație de aplicat
  • după introducerea unui număr dacă este apăsată o operație sau una egală, calculatorul trebuie să aplice ultima operație memorată
  • dacă utilizatorul apasă două sau mai multe operații fără a introduce un număr, calculatorul trebuie să-și amintească ultimul
  • după ce o operație este aplicată, afișajul trebuie să se actualizeze cu rezultatul
  • după afișarea unui rezultat, afișajul trebuie să fie șters înainte de a scrie un alt număr

Pentru a implementa calculatorul, vom avea nevoie de:

  • un memorie interna care stochează rezultatul temporar
  • o proprietate care stochează nextOperation
  • un altul care să-și amintească dacă ar trebui să aplice nextOperation după ce o operație este apăsată
enum Operation caz Adăugarea caz multiplicare caz Scadere caz Divizia caz Niciuna clasă KeyboardViewController: UIInputViewController var internalMemory = 0.0 var nextOperation = Operation.None var shouldCompute = false ... 

Creați o metodă numită didTapOperation și conectați-l la butoanele de operare atingeți înăuntru eveniment în Interface Builder. Metoda va folosi titlul butonului pentru a determina ce operație a fost apăsată.

Clasa de KeyboardViewController: UIInputViewController ... @IBAction FUNC didTapOperation (operare: UIButton) if shouldCompute computeLastOperation () dacă var op = operation.titleLabel .text comutator op caz "+": nextOperation = Operation.Addition caz „- ": nextOperation = Operațiunea.Subtraction case" X ": nextOperation = Operație. Cazul de multiplicare"% ": nextOperation = Operație.Diviziune implicită: nextOperation = Operation.None

Creați și implementați computeLastOperation metodă.

Clasa de KeyboardViewController: UIInputViewController ... @IBAction FUNC computeLastOperation () // nu uitați pentru a calcula dacă o altă operație este apăsat fără a inputing un alt număr mai întâi shouldCompute = false dacă intrare var = afișare .text var inputAsDouble = (intrare ca NSString)?. doubleValue rezultat var = 0.0 // aplica comutator operație nextOperation caz .Addition: rezultatul = internalMemory + caz inputAsDouble .Subtraction: rezultatul = internalMemory - caz inputAsDouble .Multiplication: rezultatul = internalMemory * caz inputAsDouble .Division: rezultat = internalMemory / inputAsDouble default : result = 0.0 nextOperation = Operation.None var output = "(rezultat)" // dacă rezultatul este un întreg, nu se afișează punctul zecimal dacă output.hasSuffix (".0") output = "\ Int (rezultat)) " // truncatingg pentru ultimele cinci cifre componente var = output.componentsSeparatedByString (". ") dacă components.count> = 2 beforePoint var = componente [0] var afterPoint = componente [1] dacă afterPoint. lengthOfBytes UsingEncoding (NSUTF8StringEncoding)> 5 lasa index: String.Index = avans (afterPoint.startIndex, 5) afterPoint = afterPoint.substringToIndex (index) output = beforePoint + "" + afterPoint // actualizarea afișării display.text = ieșire // salvați rezultatul internalMemory = rezultat // rețineți afișarea înainte de a introduce un nou număr shouldClearDisplayBeforeInserting = true

Actualizați clearDisplayMethod așa cum se arată mai jos. Când utilizatorul începe să scrie primul număr, memoria internă trebuie setată la 0 și nextOperation ar trebui să fie adăugate. Astfel, după ce utilizatorul introduce primul număr și apasă o operație, calculatorul își va aminti numărul introdus.

Clasa de KeyboardViewController: UIInputViewController ... @IBAction func clearDisplay () display.text = "0" internalMemory = 0 nextOperation = Operation.Addition shouldClearDisplayBeforeInserting = true

Pasul 14: Touch-uri de finisare

Să folosim IBInspectable declarație atribut pentru a adăuga o rază de colț la butoane și afișaj. Mai întâi, creați o subclasă de UIButton și UILabel.

Clasa de RoundButton: UIButton @IBInspectable var cornerRadius: CGFloat = 0 didSet layer.cornerRadius = cornerRadius class RoundLabel: UILabel @IBInspectable var cornerRadius: CGFloat = 0 didSet layer.cornerRadius = cornerRadius 

În interfața Builder, selectați butoanele și schimbați clasa lor RoundButton în Inspectorul de identitate. În Atribuții inspector, ar trebui să vedeți noul atribut de rază de colț.

Faceți același lucru pentru eticheta afișată. Tastatura ar trebui să arate așa.

Concluzie

Acum ar trebui să puteți realiza o tastatură personalizată în iOS utilizând API-urile de extensii de aplicații. Rețineți că fiecare tastatură particularizată trebuie să aibă o modalitate de a trece la următoarea tastatură și că tastatura nu se poate conecta la Internet, accesa servicii de localizare sau poate vorbi în mod implicit cu aplicația care o conține, dar puteți solicita aceste capacități.

Sistemul va utiliza tastatura implicită pentru câmpuri sigure, cum ar fi câmpurile de parolă și numărul de telefon. Nu uitați că codul pentru tastatura personalizată trăiește într-o țintă separată. Din acest motiv, jurnalele de depanare nu sunt vizibile. Pentru a le vedea, deschideți jurnalul de sistem din Simulatorul iOS.

Cod