Urządzenia Apple takie jak iPhone, iPad czy iPod stale zdobywają rzesze nowych użytkowników. Również w Polsce coraz więcej osób sięga po produkty tej firmy, choć przyznać trzeba, że ich cena nie zachęca. Wraz ze wzrostem liczby osób posiadających produkty firmy z Cupertino, coraz więcej z nich pragnie także zacząć tworzyć pod te gadżety własne aplikacje. Dlatego w tym artykule omówię absolutne podstawy tworzenia aplikacji pod iOS.

Xcode

Zanim rozpoczniemy tworzenie aplikacji pod iOS potrzebujemy odpowiedniego środowiska programistycznego. Tym środowiskiem jest Xcode. Pobierzemy je zupełnie za darmo z serwisu AppStore. W chwili pisania tego artykułu najnowsza wersja Xcode nosi numer 4.2.

Środowisko Xcode dostępne jest tylko pod systemy Mac OS. Z tego też względu aby tworzyć aplikacje na iPhone potrzebujemy Mac-a.

Po pobraniu Xcode musimy je jeszcze zainstalować. Domyślnie instaluje się ono w katalogu /Developer/. Dlatego po zainstalowaniu tego środowiska, aby je uruchomić przechodzimy do katalogu /Developer/Applications/ i uruchamiamy Xcode. Dobrym pomysłem jest również stworzenie sobie odpowiedniego skrótu w systemowym Docku lub na Biurku.

Pierwsze uruchomienie

Po uruchomieniu Xcode naszym oczom ukaże się okno powitalne jak na rysunku poniżej.

W oknie tym będziemy zawsze mieli dostęp do ostatnio otwieranych projektów. Z poziomu tego okna możemy również rozpocząć tworzenie nowego projektu. Wystarczy w tym celu kliknąć Create a new Xcode project. Po wywołaniu polecenia utworzenia projektu wyświetli okno kreatora. W pierwszym kroku musimy wybrać szablon aplikacji, jaką chcemy stworzyć. Z sekcji iOS wybieramy Application a następnie wybieramy szablon Single View Application i klikamy Next.

W kolejnym kroku ustalamy podstawowe parametry tworzonej aplikacji tj. jej tytuł (Product Name), identyfikator naszej firmy (Company Identifier), Prefiks klas (Class Prefix), wybierany rodzinę urządzeń na które chcemy stworzyć aplikację (Device Family). Wypełnijmy zatem okno jak na rysunku poniżej i klikamy na Next.

W ostatnim kroku musimy wybrać folder, w którym chcemy stworzyć naszą aplikacje. Wybieramy dowolny katalog i wciskamy Create.

Projekt zostanie utworzony i automatycznie otworzony.

Interfejs Xcode

Po otwarciu naszego projektu okno Xcode wygląda jak poniżej.

Po lewej stronie widzimy panel zakładek. Obszar ten nazywamy Navigators a poszczególne zakładki, które się w nim znajdują to: Project Navigator, Symbol Navigator, Search Navigator, Issue Navigator, Debug Navigator, Breakpoint Navigator i Log Navigator. Z prawej strony okna widzimy tzw. obszar Utilities. On również składa się z zakładek, których liczba i znacznie będzie się zmieniać w zależności od obiektu, który będziemy mieli zaznaczony. W dolnej części tego prawego obszaru widzimy kolejny panel z zakładkami, w którym wyświetlają się gotowe obiekty (komponenty), z których będziemy budować aplikacje. Środkowa część ekranu Xcode to obszar roboczy.

W obszarze roboczym wyświetlać się będą różne informacje zależnie od tego co w danej chwili będziemy robić. Ponieważ w Project Navigator mamy wybrany plik główny projektu (PierwszyProgram), w obszarze roboczym widzimy różne informacje związane z naszym projektem. Widzimy np. pole Version, w którym ustalamy wersję naszego programu, sekcje App Icons za pomocą której możemy zmieniać ikonę naszej aplikacji itp.

W oknie Project Navigator widzimy listę wszystkich plików, z których składa się nasz projekt. Klikając w te pliki w obszarze roboczym zobaczymy edytor kodu, Interface Builder, podgląd pliku graficznego, czy też jeszcze inne narzędzia - zależnie od tego co klikniemy.

Nasz przykładowy projekt składa się od razu z kilku plików. Mają one rozszerzenia: .m, .h i .xib. Pliki z rozszerzeniem .m to pliki źródłowe napisane w języku Objective-C. Pliki z rozszerzeniem .h to pliki nagłówkowe, w których znajdują się nagłówki klas i funkcji (podobnie jak w C). Klikając te pliki w obszarze roboczym zawsze zobaczymy edytor kodu. Pliki .xib to pliki opisujące wygląd okna aplikacji (tzw. widoki). Po wybraniu takiego pliku w obszarze roboczym pojawi się Interface Builder pozwalający na budowanie widoków.

Budowanie widoku

Klikamy w plik ViewController.xib. W obszarze roboczym pojawi się Inteface Builder. Okno to wygląda jak poniżej.

Z palety obiektów (komponentów) odszukujemy Label i przeciągamy go do widoku. Podobnie odszukujemy obiektu Round Rect Button i go również przeciągamy do widoku.

Mając umieszczone obiekty w widoku możemy je wybierać myszką, zmieniać ich rozmiar i położenie. W panelu Utilities pojawią się dodatkowe zakładki, na których wyświetlać się będą różne informacje związane z wybranymi obiektami. Te zakładki to: File Inspector, Quick Help Inspector, Identity Inspector, Attributes Inspector, Size Inspector i Connections Inspector.

Po lewej stronie od widoku widzimy dwa okienka: Placeholders oraz Objects. O pierwszym z nich powiemy szerzej nieco później. W drugim z tych okien widzimy zawsze listę wszystkich obiektów z jakich składa się nasz widok oraz ich zależności między sobą. Chcąc wybrać dowolny obiekt czasami łatwiej jest go kliknąć właśnie w tym okienku niż odszukiwać w samym widoku.

Wybierzmy zatem obiekt przycisku (Button) i przejdźmy na zakładkę Attributes Inspector. Odszukujemy atrybut (właściwość) Title i wpisujemy w nim "Kliknij mnie". Zmieni się również napis wyświetlany na przycisku. Zmieniając różne inne atrybuty możemy zmienić również wygląd tego przycisku. Zachęcam do eksperymentów!

Podobnie postępujemy z obiektem Label. Zmieńmy jego atrybut Text na "Witaj Świecie!". Zmieńmy także atrybut Alignment na wyśrodkowanie. Na koniec zmieńmy rozmiar i położenie tych obiektów by prezentowały się jak na rysunku poniżej.

Kodowanie czas zacząć!

W naszym przykładowym programie chcemy umożliwić użytkownikowi kliknięcie w utworzony przycisk oraz zmienić tekst wyświetlany w etykiecie po tym kliknięciu. Niezbędne jest zatem napisanie odpowiedniego kodu w języku Objective-C, który się tym zajmie. Na liście plików naszego projektu wybieramy zatem ViewController.h. Edytujemy go by wyglądał jak poniżej:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {
    IBOutlet UILabel *etykieta;
}

@property (nonatomic, retain) IBOutlet UILabel *etykieta;

-(IBAction)klikniecie:(id)sender;

@end

Jest to plik nagłówkowy. W plikach takich umieszczamy nagłówki funkcji i klas. W naszym przykładzie znajduje się tutaj deklaracja klasy o nazwie ViewController. Deklaracje klasy rozpoczynamy od słowa @interface i kończymy na @end. Po słowie kluczowym @inteface wpisujemy nazwę klasy, znak dwukropka i nazwę klasy bazowej, z której ma się odbyć dziedziczenie. W naszym przykładzie klasa ViewController dziedziczy po klasie UIViewController. Następnie w nawiasach kwadratowych umieszczamy deklaracje pól wewnętrznych klasy. W naszym przykładzie znalazło się jedno pole (zmienna) - jest nią etykieta. Jest to wskaźnik na obiekt UILabel. Deklaracja ta została poprzedzona słowem kluczowym IBOutlet. Czym zajmuje się to magiczne słowo? Powiemy o tym nieco później.

Już poza deklaracją pól (a więc poza nawiasami klamrowymi), ale jeszcze w obrębie deklaracji klasy (przed @end) znajdują się deklaracje wszystkich metod (funkcji) naszej klasy. W naszym przykładzie tworzymy tutaj "właściwość" z pola etykieta. Mamy tutaj także jedną metodę. Nazywa się ona klikniecie:, przyjmuje jeden argument o nazwie sender typu id oraz zwraca wartość typu IBAction.

Możemy teraz przejść do edycji pliku ViewController.m. W postaci komentarzy oznaczono część jaką dopisaliśmy:

#import "ViewController.h"

@implementation ViewController

//--- nowy kod ---
@synthesize etykieta;

-(IBAction)klikniecie:(id)sender {
    [etykieta setText:@"Działa!"];
}

-(void)dealloc {
    [super dealloc];
    [etykieta release];
}
//--------

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

W plikach .m znajdują się implementacje klas. Implementacja rozpoczyna się słowem kluczowym @implementation po którym wpisujemy nazwę klasy i @end. W naszym przykładzie w pliku znajduje się implementacja tylko jednej klasy, tej której deklaracje umieściliśmy w poprzednim kroku - czyli ViewController.

Implementacja klasy składa się z implementacji metod jakie są zadeklarowane w tej klasie. W naszym pliku źródłowym znajdują się implementacje metod, które nasza klasa odziedziczyła po klasie bazowej. My dodaliśmy tylko implementacje metody klikniecie: oraz dealloc oraz dodaliśmy automatyczne metody obsługujące właściwość etykieta.

Implementacja metody wygląda tak samo jak jej deklaracja tylko posiada ciało umieszczone w nawiasach kwadratowych. W naszym przykładzie w metodzie klikniecie: znajduje się jedna instrukcja. Wykona się ona wtedy, kiedy użytkownik kliknie (dotknie) na naszym przycisku. Zadaniem tego kodu jest zmiana wyświetlanego napisu na etykiecie. W przykładzie wywołujemy zatem metodę setText: obiektu etykieta i przekazujemy mu wartość @"Działa!". W efekcie tekst w etykiecie zmieni się właśnie na ten przekazany w parametrze. Zaraz po rozpoczęciu implementacji klasy znalazło się słowo kluczowe @synthesize z nazwą etykieta. Zadaniem tej instrukcji jest automatyczne utworzenie metod zapewniających dostęp do pola etykieta. Ponieważ w naszym projekcie nie korzystamy z mechanizmu automatycznego zarzadzania pamięcią (mechanizm ten dostępny jest dopiero od iOS 5 i nie włączyliśmy go tworząc nasz projekt) pamięć przydzieloną dla obiektów musimy samodzielnie zwalniać. Dlatego dodaliśmy implementację metody dealloc. Jest to automatycznie wywoływany w momencie usuwania obiektu destruktor. W naszym przykładzie wywołujemy w nim destruktor z klasy bazowej a następnie zwalniamy pamięć przydzieloną do etykiety.

Tworzenie powiązań

Jeśli uruchomilibyśmy w tym momencie nasz program okazałoby się, że klikanie (dotykanie) w przycisk nie działa jak należy. Dlaczego? Na żadnym z dotychczasowych etapów tworzenia naszego programu nie stworzyliśmy odpowiednich powiązań. Oznacza to, że kod który stworzyliśmy i widok (wygląd okna) nie są ze sobą w ogóle powiązane. Skąd zatem przycisk ma wiedzieć, którą metodę ma wywoływać. Podobnie skąd zmienna etykieta ma wiedzieć, że odnosi się ma do etykiety umieszczonej w widoku? Dlatego kolejnym krokiem w tworzeniu aplikacji jest stworzenie odpowiednich powiązań.

Przechodzimy zatem ponownie do edycji pliku ViewController.xib. Pokaże się Interface Builder, w którym zaznaczamy obiekt Label. Wciskamy teraz klawisz CTRL na klawiaturze i nie puszczając go wciskamy lewy przycisk myszy na File's Owner w okienku Placeholders. Następnie nie puszczając ani klawisza na klawiaturze ani przycisku na myszce rysujemy linię wskazując obiekt Label. W tym momencie puszczamy klawisz i przycisk. Pokaże się małe menu z listą wszystkich pól wewnętrznych w klasie ViewController, z którym możemy powiązać wskazany obiekt. Wybieramy z tego menu etykieta.

W ten sposób powiązaliśmy pole etykieta z obiektem Label. W menu, które się ukazało nie wyświetlają się jednak wszystkie wewnętrzne pola klasy, tylko te dla których możliwe jest stworzenie powiązań. A takimi polami są właśnie te, przy których deklaracji użyto słowa IBOutlet.

Zaznaczmy teraz przycisk Button. Tym razem nie chcemy stworzyć powiązania pola z obiektem tylko obiekt z metodą. Dlatego wciskamy klawisz CTRL i nie puszczając rysujemy linię OD obiektu DO File's Owner. Kiedy puścimy klawisze ponownie pojawi się małe menu z listą metod, z jakimi możemy dokonać połączenia. Wybieramy z niego metodę klikniete:.

Podobnie jak w przydpadku pól, lista metod składa się tylko z tych, które zwracają wartości typu IBAction. Stworzone przez nas połączenie "domyślnie" ustalone jest na "dotknięcie". Dostępnych jest jednak więcej zdarzeń. Mając zaznaczony obiekt Button wystarczy przejść do zakładki Connections Inspector. Znajdziemy tam listę wszystkich zdarzeń. Widzimy w niej również, że jedno zdarzenie jest już powiązane (te, które powiązaliśmy przed momentem).

Testowanie aplikacji

Nasz program jest już gotowy. Możemy go teraz skompilować. Wybieramy zatem z menu Product opcję Build lub używamy kombinacji CMD+B. Następnie możemy uruchomić program wybierając z menu Product opcję Run lub używając kombinacji CMD+R. Możemy także użyć ikony "Play" widocznej w górnej części okna Xcode.

Po wydaniu komendy uruchomienia aplikacji pojawi się okno symulatora iPhone, a w nim odpalona zostanie nasza aplikacja. Możemy w niej kliknąć przycisk "Kliknij mnie", aby przekonać się, czy program działa prawidłowo.

Symulator iPhone bardzo wiernie odtwarza rzeczywiste urządzenie. Możemy np. kliknąc przycisk Home aby zobaczyć wszystkie zainstalowane w nim aplikacji. Możemy te aplikacje usuwać tak jak ze zwykłego iPhone-a, zmieniać położenie ikon, uruchomić aplikację Kontakty, zmienić ustawienia językowe itp. Korzystając z menu symulatora możemy zmienić jego wersję np. na iPad lub iPhone Retina, obrócić go i wykonać jeszcze wiele innych czynności.

Zakończenie

W artykule pokazano jak w kilku prostych krokach stworzyć prostą aplikację na iPhone. Skorzystaliśmy w tym celu z edytora intefejsów (Interface Builder) oraz edytora kodu. Napisaliśmy jedną metodę i stworzyliśmy jedną właściwość.

Tworzenie aplikacji pod iOS wiąże się jednak z opanowaniem podstaw języka Objective-C. O tym jednak w kolejnym artykule...

• Tags
• ·
• iPhone
• ·
• iOS
• ·
• xCode