Utworzenie w języku Swift aplikacji odczytującej wprowadzony tekst

() translation by (you can also view the original English article)

Wraz z wydaniem systemu iOS 7 firma Apple wprowadziła API pozwalające programistom na łatwe dodawanie do aplikacji możliwości odczytu wprowadzonego tekstu. To może być niezwykle użyteczne podczas implementacji warstwy związanej z funkcjami ułatwiającymi dostęp w aplikacji lub jako przydatna funkcja w aplikacji edukacyjnej. Z lektury niniejszego artykułu dowiesz się, jak zaimplementować wspomnianą funkcjonalność za pomocą języka Swift.

1. Wprowadzenie

W tym artykule zostanie omówiony proces tworzenia aplikacji mobilnej za pomocą języka Swift i narzędzia Xcode 6. Niezależnie od tego, czy masz doświadczenie w pracy z Xcode, czy dopiero zaczynasz przygodę, ten artykuł pomoże Ci poznać opracowane przez Apple środowisko IDE i język programowania Swift. W tworzonej przez nas aplikacji inicjalizacja funkcji odczytu tekstu nastąpi przez naciśnięcie przycisku na ekranie. Oczywiście użytkownik ma możliwość edycji tekstu przeznaczonego do odczytania.

Poruszone zostaną tutaj następujące aspekty programowania na platformie iOS:

utworzenie nowego projektu w Xcode 6;
przygotowanie interfejsu użytkownika za pomocą modułu Interface Builder;
połączenie elementów interfejsu użytkownika za pomocą outletów;
użycie akcji do wywoływania metod w interfejsie użytkownika.

2. Przygotowanie projektu

Krok 1. Szablon projektu

Uruchom Xcode, a następnie z menu File wybierz opcję New/Project…. W wyświetlonym oknie dialogowym kliknij iOS/Application, wybierz szablon Single View Application, a następnie kliknij przycisk Next.

Krok 2. Konfiguracja projektu

Teraz nadaj nazwę projektowi, a ponadto wprowadź nazwę organizacji i identyfikator aplikacji. Z listy rozwijanej Devices wybierz opcję iPhone, kliknij przycisk Next i wskaż katalog, w którym zostanie zapisany projekt. Nie zapomnij wybrać Swift jako używanego języka programowania.

3. Interfejs użytkownika

W tworzonej tutaj aplikacji interfejs użytkownika jest całkiem prosty. Ostateczny wygląd budowanego programu możesz zobaczyć na pokazanym poniżej rysunku. Niezbędną grafikę oraz pozostałe zasoby dla budowanej aplikacji znajdziesz w serwisie GitHub.

Krok 1. Dodaj pole tekstowe

Pracę rozpoczynamy od utworzenia pola tekstowego zawierającego tekst, który następnie będzie odczytany przez aplikację. Otwórz plik Main.storyboard, z panelu Object Library przeciągnij UITextView na widok kontrolera. Możesz pozostawić domyślny tekst pola tekstowego lub po prostu usunąć go.

Krok 2. Dodaj przycisk

Przycisk w interfejsie użytkownika naszej aplikacji jest odpowiedzialny za wywołanie funkcji odczytującej wprowadzony tekst. Z panelu Object Library przeciągnij obiekt UIButton na widok kontrolera. Tekst wyświetlany przez przycisk możesz zmienićbezpośrednio w widoku lub po prostu dodając obraz w panelu Attributes Inspector.

4. Import frameworka AVFoundation

W celu użycia API odpowiedzialnego za odczyt wprowadzanego tekstu konieczne jest uzyskanie dostępu do klasy AVSpeechSynthesizer, która jest częścią frameworka o nazwie AVFoundation. W oknie Xcode zaznacz projekt i przejdź do sekcji Linked Frameworks and Libraries, którą znajdziesz na dole karty General. Kliknij ikonę plusa, a następnie z listy rozwijanej wybierz AVFoundation.

Otwórz plik ViewController.swift i dodaj poniższy wiersz kodu tuż poniżej wiersza import UIKit:

1	import AVFoundation

W ten sposób zasoby frameworka AVFoundation staną się dostępne dla widoku ViewController, co pozwoli nam na wykorzystanie klasy AVSpeechSynthesizer, która będzie potrzebna już za chwilę.

5. Outlet dla pola tekstowego

Aby uzyskać dostęp do pola tekstowego w klasie ViewController konieczne jest utworzenie tak zwanego outletu oraz umieszczenie go w kodzie, co odbywa się za pomocą modułu Interface Builder. Wspomniany ouotlet to po prostu właściwość, którą można zdefiniować w module Interface Builder.

Przejdź do Assistant Editor wybierając opcję Assistant Editor z menu View. W ten sposób interfejs użytkownika widoku klasy ViewController będzie wyświetlony po lewej stronie, natomiast kod implementacji tej klasy po prawej. Upewnij się, że w Xcode plik ViewController.swift jest wyświetlony po prawej stronie.

W module Interface Builder utwórz outlet dla pola tekstowego — trzymając naciśnięty klawisz Control przeciągnij kursor od pola tekstowego do edytora kodu po prawej stronie (zamiast klawisza Control możesz także użyć prawego przyciskumyszy). Na ekranie zauważysz niebieską linię pokazującą miejsce, w którym Xcode wstawi outlet dla pola tekstowego.

Po zwolnieniu przycisku myszy, Xcode wyświetli okno dialogowe pozwalające na zdefiniowanie nazwy dla outletu. W omawianym przykładzie podaj nazwę textEdit i kliknij przycisk Connect.

Outlet można poznać dzięki dyrektywie kompilatora @IBOutlet. W omawianej aplikacji dyrektywa informuje kompilator, że textView jest odniesieniem do obiektu UITextView utworzonego w module Interface Builder. Oznacza to, że wszelkie zmiany wprowadzane w textView będą automatycznie odzwierciedlane w obiekcie UITextView, który znajduje się w interfejsie użytkownika.

1	@IBOutlet weak var textView: UITextView!

Zwróć uwagę na dwa słowa kluczowe znajdujące się po dyrektywie kompilatora: weak i var. Słowo kluczowe weak to atrybut używany w stosunku do odniesień, których nie trzeba zachowywać na dłużej. Wymieniony atrybut jest powszechnie używany podczas definiowania outletów, ponieważ ich zatrzymaniem zajmuje się widok nadrzędny, czyli w omawianym przykładzie widok kontrolera widoku.

Natomiast drugie słowo kluczowe, var wskazuje, że textView jest zmienną, a nie stałą. Po nazwie zmiennej znajduje się dwukropek oraz typ tej zmiennej.

6. Zmienne wymagane przez funkcję odczytującą tekst

Po outlecie textView deklarujemy stałą o nazwie synth oraz zmienną myUtterance. Słowo kluczowe let wskazuje na zdefiniowanie synth jako stałej. To oznacza brak możliwości zmiany wartości synth.

1	let synth = AVSpeechSynthesizer()
2	var myUtterance = AVSpeechUtterance(string: "")

Stała synth przechowuje odniesienie do egzemplarza AVSpeechSynthesizer. Z kolei zmienna myUtterance zawiera ciąg tekstowy, który nieco później będzie odczytany przez budowaną tutaj aplikację

7. Dodanie akcji

Przycisk znajdujący się w interfejsie użytkownika powinien wywoływać funkcję o nazwie textToSpeech(). Musimy więc utworzyć akcję wykorzystując do tego celu kwalifikator typu @IBAction. Dzięki wymienionemu kwalifikatorowi, w module Interface Builder metoda będzie dostępna jako akcja. Przekonajmy się, jak takie rozwiązanie działa.

Przejdź do edytora Assistant Editor i upewnij się, że plik XIB jest wyświetlany po lewej stronie, natomiast klasa ViewController po prawej. W Interface Builder zaznacz przycisk, a następnie przytrzymaj klawisz Control i przeciągnij myszą od przycisku do klasy ViewController, jak pokazano na poniższym rysunku.

Xcode wyświetli na ekranie znane Ci już okno dialogowe. Jednak tym razem typem połączenia jest akcja (Action). Nadaj jej nazwę textToSpeech, upewnij się o wybraniu opcji Touch Up Inside w liście rozwijanej Event i kliknij przycisk Connect.

Xcode utworzy metodę o podanej nazwie. Szkielet nowej metody został przedstawiony poniżej, a sama metoda będzie wywoływana, gdy użytkownik naciśnie przycisk na ekranie.

1	@IBAction func textToSpeech(sender: UIButton)
2	{
3
4	}

Słowo kluczowe func powoduje zadeklarowanie metody lub funkcji. W omawianym przykładzie nazwa metody to textToSpeech(). Zwróć uwagę na parametr sender typu UIButton odwołuje się do obiektu UIButton utworzonego wcześniej w module Interface Builder.

8. Implementacja metody textToSpeech()

Kolejny blok kodu jest odpowiedzialny za odczytanie wprowadzonego tekstu, gdy użytkownik naciśnie przygotowany wcześniej przycisk.

@IBAction func textToSpeech(sender: UIButton)
{
    myUtterance = AVSpeechUtterance(string: textView.text)
    myUtterance.rate = 0.3
    synth.speakUtterance(myUtterance)
}

W pierwszej kolejności tworzymy egzemplarz AVSpeechUtterance przez przekazanie w konstruktorze tekstu obiektu textView. W drugim wierszu kodu określamy szybkość (rate), z jaką będzie odczytywany tekst. Im mniejsza wartość wymienionej właściwości, tym wolniej będzie odczytywany tekst. Na końcu wywoływana jest metoda speakUtterance() egzemplarza AVSpeechSynthesizer, której przekazujemy obiekt myUtterance. W tym momencie rozpoczyna się odczyt wskazanego tekstu.

Pełny kod źródłowy klasy ViewController przedstawia się następująco:

import UIKit
import AVFoundation

class ViewController: UIViewController
{
    @IBOutlet weak var textView: UITextView!
    
    let synth = AVSpeechSynthesizer()
    var myUtterance = AVSpeechUtterance(string: "")
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func textToSpeech(sender: UIButton)
    {
        myUtterance = AVSpeechUtterance(string: textView.text)
        myUtterance.rate = 0.3
        synth.speakUtterance(myUtterance)
    }
}

9. Testowanie aplikacji w symulatorze

Nadeszła pora na przetestowanie aplikacji w symulatorze iOS. Aby uruchomić aplikację naciśnij klawisze Command+R lub teżprzycisk Run umieszczony w lewym górnym rogu okna Xcode. Przetestuj aplikację wprowadzając dowolny tekst w polu tekstowym, a następnie naciskając przycisk.

Zakończenie

Z powyższego artykułu dowiedziałeś się, jak w aplikacji iOS zaimplementować funkcję odczytującą wprowadzony tekst. Zobaczyłeś, jak wygląda praca z modułem Interface Builder, tworzenie outletów i akcji. Gorąco zachęcam Cię do eksperymentowania ze zbudowaną tutaj aplikacją, a także do jej modyfikacji. Mam nadzieję, że lektura artykułu byłą przyjemnością, a przedstawione w nim informacje okażą się dla Ciebie użyteczne.

1	import UIKit
2	import AVFoundation
3
4	class ViewController: UIViewController
5	{
6	@IBOutlet weak var textView: UITextView!
7
8	let synth = AVSpeechSynthesizer()
9	var myUtterance = AVSpeechUtterance(string: "")
10
11	override func viewDidLoad()
12	{
13	super.viewDidLoad()
14	// Do any additional setup after loading the view, typically from a nib.
15
16	}
17
18	override func didReceiveMemoryWarning()
19	{
20	super.didReceiveMemoryWarning()
21	// Dispose of any resources that can be recreated.
22	}
23
24	@IBAction func textToSpeech(sender: UIButton)
25	{
26	myUtterance = AVSpeechUtterance(string: textView.text)
27	myUtterance.rate = 0.3
28	synth.speakUtterance(myUtterance)
29	}
30	}