Temat 4. Storyboard i element interfejsu użytkownika Gra w kulki- część 1 Wymagana wiedza wstępna: 1) Student musi 1) Umieć stworzyć projekt aplikacji konsolowej w XCode z wykorzystaniem Objective-C 2) Umieć skompilować i uruchomić program w XCode 3) Skorzystać z podstawowych klas i funkcji Objective-C 4) Nauczyć się zasad wywoływania metod w Objective-C 5) Znać język C 6) Znać zasady zarządzania pamięcią w komputerze 7) Znać pojecie wskaźnika 8) Znać podstawowe narzędzia tworzenia aplikacji konsolowych w C 9) Umieć tworzyć klasy Objective-C 10) Umieć tworzyć hierarchę klas w Objective-C 11) Umieć wykorzystywać późne wywołanie metod w Objective-C 12) Umieć korzystać z kolekcji 13) Umieć tworzyć własne inicjalizatory 14) Umieć tworzyć i konfigurować projekty IOS 15) Korzystać z StoryBoard i rozmieszczać elementy na Widokach 16) Umieć stworzyć własny kontroler widoku 17) Tworzyć referencje do obiektów znajdujących się na widoku 18) Obsługiwać domyślne interakcje z obiektami za pomocą własnych metod 19) Znać zasady korzystania z @property i @synthesize 2) Student powinien 1) Znać jezyk Java lub C# lub C++ 2) Znać zasady działania delegatów i hostów 3) Znać typ id Cel dydaktyczny 1) Student musi 1) Umieć definiować przejścia (Segue) i z nich korzystać 2) Umieć otwierać i zamykać widoki modalne za pomocą przejść 3) Tworzyć własne klasy rozszerzające kontrolki z UIKit 4) Dodawać i usuwać obiekty z widoku za pomocą kodu 5) Znać zasady korzystania z @property i @synthesize 2) Student powinien 1) Rozumieć ideę MVC - model - view - controller 2) Rozumieć ideę delegata dla widoku (kontrolera) Zakres tematyczny wykładu laboratorium Niniejsze zajęcia pokażą w jaki sposób tworzyć wielowidokowe aplikacje dla urządzeń IOS. Pokazane zostaną sposoby tworzenia własnych widoków, przeładowywania klas widoków, tworzenia własnych kontrolerów widoków. Pokazane zostaną zasady geometrii w UIKit. Storyboarding - etapy tworzenia nawigacji i struktury aplikacji Samowystarczalność widoków. Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 1/7
Przejścia (segue) zdefiniowane pomiędzy kolejnymi widokami. Przekazywanie danych między scenami i przesyłanie danych spowrotem - wykorzystanie delegatów i hostów Kontrolki UIKit Hierarchia klas kontrolek - UIView jako cegiełka budowy aplikacji Właściwości UIView Koordynaty UIView Wymiary ekranów urządzeń Apple UIView zarządzanie widokiem i podwidokami UIView zdarzenia akcji - UIResponder Geometria widoków (frame, bounds, center) Tworzenie widoku z pomocą StoryBoard i programistycznie Programistycznie Tworzenie podklas UIView Metody inicjalizacyjne, rysowania i wyglądu podklasy UIView Alternatywy dla tworzenia podklas Wydajność widoków Praca z dotykiem widoku Załączniki 1. Prezentacja_4.pdf - slajdy prezentacji wykładu 2. Praca ze storyboard.mp4 - film pokazujący jak edytować StoryBoard i tworzyć przejścia między widokami. Zadania na Laboratorium Stwórz projekt gry Uciekająca kulka Zasady gry. Gra polega na śledzeniu i blokowaniu ruchów kulki. Kulka porusza się w losowo wybranym kierunku. Jeśli wypadnie poza krawędź ekranu, gra kończy się. Aby zapobiec wypadnięciu, należy na krawędzi ekranu ustawić blokadę, tak aby przeciąć tor ruchu kulki. Kulka odbije się od blokady i będzie kontynuowała ruch w nowym kierunku. Program ma rozpoczynać się od menu, w którym można rozpocząć grę. Po przegranej, gra ma powrócić do menu. Zadanie 1. Stwórz nowy projekt aplikacji (SingleView) dla iphone. Do StoryBoard dodaj 2 widoki. Stwórz 2 klasy dziedziczące z UIViewController, odpwiedzialne za pracę z tymi widokami. 1) MainView - MainViewController 2) GameView - GameViewController Widok MainView ma być widokiem startowym. W widoku GameView stwórz referencję do obsługiwanego widoku Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 2/7
Podpowiedzi 1) Po dodaniu widoku do StoryBoard, klasę Kontrolera wybieramy we właściwościach Widoku, umieszczonych w prawym panelu XCode. 2) Zanim ustawimy klasę jako klasę Kontrolera Widoku, należy upewnić się, czy taką klasę posiadamy (klasa musi dziedziczyć z UIViewController i być dodana do projektu) 3) Referencję do widoku stworzymy przeciągając pole Referencing Outlet z jego właściwości do kodu kontrolera widoku. Zadanie 2. W widoku MainView dodaj przycisk, pełniący funkcję uruchamiania gry ( Rozpocznij grę ). Dodaj do niego akcję kliknięcia, zakładając, że delegatem jest MainViewController. Między MainView a widokiem gry dodaj modalne przejście (Segue) i nazwij je sgame Zaprogramuj wykonanie tego przejścia po dotknięciu przycisku. Podpowiedzi. 1) Przyciski i elementy dodajemy do widoku, przeciągając je z biblioteki dokumentów 2) Aby dodać Segue przeciągnij prawym przyciskiem myszy między widokami. Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 3/7
3) Identyfikator Segue jest bardzo ważny - za jego pomocą wybieramy przejścia do kolejnych widoków 4) Aby dodać kod obsługi zdarzenia dla przycisku, należy przeciągnąć odpowiednią akcję z listy możliwych zdarzeń na okno z kodem Controlera widoku zawierającego przycisk. 5) Kod uruchamiający wybrane przejście to uruchomiona na obiekcie klasy Kontrolera widoku metoda: performseguewithidentifier:sender: - (IBAction)StartGame:(id)sender { [self performseguewithidentifier:@"sgame" sender:self]; } Zadanie 3. Dodaj do StoryBoard kolejne kilka widoków (i odpowiadające im klasy Kontrolerów Widoków) 1) HelpViewController i HelpVIew 2) AboutViewController i AboutView 3) TopScoresViewController i TopScoresView Do każdego z widoków dodaj przejścia, na każdym z nich wstaw przycisk pozwalający na powrót do poprzedniego widoku. Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 4/7
Podpowiedzi 1) Każdy przycisk powinien mieć oprogramowaną akcję w klasie Kontrolera widoku na którym jest umieszczony 2) Kod akcji zamknięcia widoku powinien być wykonany na obiekcie kontrolera tego widoku i ma postać [self dismissviewcontrolleranimated:yes completion:nil]; Zadanie 4. Stwórz klasę Kulka, dziedziczącą z klasy UIImageView. W inicjalizaotrze załaduj plik z obrazkiem kulki i wstaw go do własnego widoku. Stworzony obiekt tej klasy dodaj do widoku GameView. Podpowiedzi 1) Jeżeli obiekt nowej klasy ma być umieszczany na widoku, powinien dziedziczyć z klasy UIView (lub pośrednio z niej dziedziczyć - UIImageView spełnia ten warunek) #import <UIKit/UIKit.h> @interface Kulka : UIImageView @end 2) Do klasy kulki należy dodać pole, w którym będzie przechowywany obrazek prezentujący kulkę. Przez wzgląd na późniejsze zadania, należy wykorzystać tu typ UIIMageView. Obiekt przechowywany w tym polu będzie później dodany jako podwidok widoku kulki. Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 5/7
W pliku nagłówkowym @property(nonatomic, retain) UIImageView * iv; W pliku źródłowym @synthesize iv; 3) W standardowo zaimplementowanej w klasie funkcji initwithframe należy dodać kod inicjalizujący i umieszczający obrazek kulki. - (id)initwithframe:(cgrect)frame { UIImage* i = [UIImage imagenamed:@"b_green.png"]; UIImageView * tiv = [[UIImageView alloc]initwithimage:i]; [tiv setframe: CGRectMake( tiv.frame.origin.x, tiv.frame.origin.y, tiv.frame.size.width/4, tiv.frame.size.height/4)]; self = [super initwithframe: CGRectMake( 230, 200, tiv.frame.size.width, tiv.frame.size.height)]; if (self) { self.iv = tiv; [self addsubview:iv]; } return self; } 4) Pamiętaj, że aby wykorzystać grafikę, należy 1) Dodać ją do projektu 2) Zawsze dodawać dwie wersje - plik.rozszerzenie - w zwykłej rozdzielczości i plik@2x.rozszerzenie w rozdzielczości dwukrotnie większej dla wyświetlaczy retina 3) Korzystać w kodzie z nazewnictwa dla standardowej rozdzielczości 4) Przy dodawaniu grafiki do projektu zadbać o to, aby były zaznaczone cele (Target), w których paczkach grafika ma być zawarta 5) Zadbać o to, aby nazwy plików były unikalne w obrębie całego projektu (nieistotne nazewnictwo katalogów) 5) Dodanie obiektu kulki do widoku gry sprowadza się do zainicjalizowania go i dodania za pomocą funkcji addsubview: k= [[UMKKULKIKulka alloc]init]; self.widok addsubview:k]; Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 6/7
Zadania samodzielne. Zadanie 1. Uzupełnij bezpośrednio na StoryBoard widoki AboutView - o opis autora programu i HelpView o instrukcję programu. Skorzystaj z obietów z biblioteki obiektów. Zadanie 2. Dodaj do GameView (za pomocą kodu) obiekt ImageViewController z teksturą. Zadbaj o to, aby obiekt ten był zawsze w odległości 20 pikseli od krawędzi ekranu, oraz odpowiednią kolejność elementów na ekranie. Zadanie 3. Dodaj do GameView właściwość Ograniczenie, dziedziczący z UIImageView, wyświetlający kwadrat i zadbaj aby był umieszczony na samym dole hierarchii obiektów Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 7/7