iphone programozás alapjai I. Gyakorlat

Átírás

1 iphone programozás alapjai I. Gyakorlat

2 A mai gyakorlat témái I. Számológép Egyszerű Interface Builder példa Outletek és Actionok bekötése II. Szakácskönyv Neki kezdünk a nagy feladatnak Megjelenítés elemei

3 I. Számológép

4 Egyszerű számológép Négy alapművelet Teljes egészében felépítjük a programot 1. Projekt létrehozás 2. UI tervezés 3. Kódváz elkészítése 4. Összekötés 5. Kód kidolgozása

5 Projekt létrehozása

6 XIB megnyitása

7 XIB szerkesztése

8 Összeállítjuk a felületet Drag&Drop húzogassuk be az egyes elemeket Segédvonalakkal pozícionáljunk Interfész elemek TextField a kijelző Jobbra igazítás, Enabled kiszedése Round Rect Button a számoknak Állítsuk be a tag értékét a szám értékére Round Rect Button a műveleteknek

9 A kód alapelemei Generált Osztályok: CalculatorAppDelegate: az indítóosztály, alkalmazás életciklussal kapcsolatos feladatok CalculatorViewController: Az elkészítendő view-hez tartozó programlogika Mi a CalculatorViewController-ben dolgozunk, ez az osztály felel a view-val kapcsolatos minden tevékenységért Elsőként a.h fájlban dolgozunk

10 CalculatorViewController.h #import CalculatorViewController : UIViewController {! UITextField* resultfield; (nonatomic,retain) IBOutlet UITextField* resultfield; -(IBAction) pushednumber:(id)sender; -(IBAction) pushedplus; -(IBAction) pushedminus; -(IBAction) pushedmul; -(IBAction) pusheddiv; -(IBAction) resultfield IBOutlet: azért, hogy kódból elérjük az eredményjelzőt. pushednumber: Esemény üzenet, ha valamelyik számgombot nyomta meg. pushedplus, pushedminus, pushedmul, pusheddiv, pushedequal: Esemény kezelők a műveletekhez

11 Outlet Bekötés Outlet bekötés: Kiválasztjuk a File s Owner elemet (Document Window) és jobb gombot nyomunk rajta Kiválasztjuk azt az elemet amit be akarunk kötni (itt resultfield) A kis karikára nyomva folyamatosan húzva kiválasztjuk a bekötendő elemet

12 Action Bekötés Action bekötés: Kiválasztjuk az adott elemet, amelyet be kívánunk kötni és jobb gombot nyomunk rajta Kiválasztjuk az adott eventet, amit bekötünk (itt Touch Up Inside) A kis karikára nyomva folyamatosan húzva kiválasztjuk a File s Owner-t Megjelennek a felvett IBAction metódusok, amelyek közül kiválasztjuk, amit szeretnénk

13 Action bekötés

14 Kidolgozzuk a kódot Megvalósítjuk a számológép működést Ehhez először a CalculatorViewController.h-ban vesszük fel az új elemeket Szükség van két belső (long) tárolóra, valamint egy enumra, ami mutatja mi az aktuális művelet Szükség van egy belső számolási metódusra (calculate)

15 Kidolgozzuk a kódot CalculatorViewController.h #import CalculatorViewController : UIViewController {! UITextField* resultfield;! long number,resultnumber;! enum Operation {none,plus,minus,mul,divide,equal} operation; (nonatomic,retain) IBOutlet UITextField* resultfield; -(void) calculate; -(IBAction) pushednumber:(id)sender; -(IBAction) pushedplus; -(IBAction) pushedminus; -(IBAction) pushedmul; -(IBAction) pusheddiv; -(IBAction)

16 a resultfield-et. #import resultfield; Inicializáljuk a belső változóinkat betöltéskor - (void)viewdidload { [super viewdidload];! number=0;! resultnumber=0;! operation=none; } Felszabadítjuk a változóinkat. - (void)dealloc {! [resultfield release]; [super dealloc]; }

17 CalculatorViewController.m -(void) calculate{! switch (operation) {!! case plus:!!! resultnumber+=number;!!! number=0;!!! break;!! case minus:!!! resultnumber-=number;!!! number=0;!!! break;!! case mul:!!! resultnumber=resultnumber*number;!!! number=0;!!! break;!! case divide:!!! resultnumber=resultnumber/number;!!! number=0;!!! break; Az aktuális művelet függvényében elvégezzük a számítást!! case equal:!!! break;!!!!! default:!!! resultnumber=number;!!! number=0;!!! break;! }! } Az eredményt betesszük az eredmény számolóba Az aktuális számot kitöröljük Az aktuális művelet függvényében elvégezzük a számítást Az eredményt betesszük az eredmény számolóba Az aktuális számot kitöröljük

18 CalculatorViewController.m -(IBAction) pushednumber:(id)sender{! if (operation==equal) {!! operation=none;!! number=0;! }! UIButton* button=(uibutton*)sender;! number=number*10+button.tag;! resultfield.text=[nsstring } -(IBAction) pushedplus{! [self calculate];! operation=plus; } -(IBAction) pushedminus{! [self calculate];! operation=minus; } -(IBAction) pushedmul{! [self calculate];! operation=mul; } -(IBAction) pusheddiv{! [self calculate];! operation=divide; } -(IBAction) pushedequal{! [self calculate];! operation=equal;! resultfield.text=[nsstring stringwithformat:@"%d",resultnumber] ;! } Megvalósítjuk az esemény kezelőket Mindenhol végrehajtjuk az aktuális műveletet, majd rögzítjük az újat

19 Elkészültünk, próbáljuk ki!

20 II. Szakácskönyv

21 Készítsünk szakácskönyvet! Mostantól, a kurzus végéig, ugyanazt az alkalmazást fejlesztjük tovább Egy igazi összetett alkalmazást készítünk, amely felépítésében alapja lehet a jövőbeli projekteknek Minden egyes alkalommal egy-egy új témakörrel egészítjük ki Szakácskönyvet készítünk Kliens-Szerver kommunikáció Design

22 Mi készül el ma? TabBar alapú felépítés Ajánlatok Kategóriák Kedvencek Beállítások Különböző lista nézetek Recept lista (ajánlatok, kategórián belüli receptek, kedvencek listája) Kategória lista Recept megjelenítés

23 Készítsük el a projektet!

24 Mit készít el a template? A MainWindow-nak létrehoz egy xib-et Felveszi a TabBarControllert Létrehoz két minta tabot, amelyet két külön xib-ből tölt be Az elsőhöz létrehoz, egy ViewControllert A második sima UIViewControllert használ (lehet ilyet is)

25 Töröljük, ami nem kell Nincs szükség a FirstViewControllerre, mert úgyis üres, és a mienket nem így akarjuk hívni Nincs szükség a két betöltődő XIB-re sem, mert úgyis megcsináljuk ebből is a sajátot MainWindow marad, mivel pont azért használtuk a templatet, hogy benne legyen a TabBarController A XIB-eket a resources pont alatt tudjuk törölni

26 Nézzünk bele a XIB-be Megtaláljuk a TabBarControllert Alatta a grafikus megjelenítést végző tabbart Alatta pedig az egyes fülek Controllereit és TabBar részeit

27 Saját tabok Nyissuk meg a TabBarController inspectorát Töröljük ki a felvett tabokat Adjuk hozzá a képen látható 4 darabot Az első 3 típusa legyen navigation controller, mivel ezekben hierarchikus lista fog megjelenni A 4. az egy egyszerű képernyő legyen a típusa View Controller Nézzük meg az eredményt a Document Window-ban és a szimulátoron is

28 Felvesszük az osztályokat Létrehozunk egy RecipeListViewControllert UITableViewController subclass és XIB-et is kérünk hozzá A XIB-et tegyük át a resource-k közé, nevezzük át (RecipeList) és nyissuk meg

29 Nézzük meg a XIB-et! Alapból létrehozta az Xcode a TableView-et Nézzük meg az OutLeteket Automatikusan bekötötte, mind a DataSource-ot, mind a delegate-et a kontrollerbe

30 Bekötjük az új elemeket Nyissuk meg a MainWindow.xib-ben a Document Windowt Válasszuk ki az Ajánlatokhoz tartozó view Controllert Nyissuk meg az Inspectort Az Identity fülön állítsuk be a NIB Name a frissen felvettre (RecipeList), valamint az Identity fülön a Classt a hozzá tartozó view Controlerre (RecipeListViewController) Most tartunk ott, hogy az ajánlatok pont alatt betöltődik a saját ViewControllerünk és NIB fájlunk

31 Önálló feladat Ugyanezeken a lépéseken végighaladva vegyünk fel egy CategoryViewControllert és állítsuk be ugyanígy mint az előzőt Nézzük meg, hogy hol tartunk, próbáljuk ki a Simulátoron

32 Navigation Bar beállítása Nyissuk meg a Document Window-t Keressük ki az Ajánlatokhoz tartozó Navigation Item elemet Állítsuk be az attribútumok között a Title elemet. Nyissuk meg a Navigation Bar elemelet és állítsuk be a stílusát Black Translucent-re Igen látványos fekete-átlátszó megjelenés Csináljuk meg ugyanezt a kategóriáknál

33 Képek feltöltése A következőekhez szükségünk lesz néhány képre, hogy látványos legyen az eredmény Töltsük le: oktatas/pics.zip Tömörítsük ki, majd adjuk hozzá a resourceshez (add existing file) Pipáljuk be, hogy másolja be a fájlokat a projektbe

34 Receptek megjelenítése Még egy View Controller-re és XIB-re van szükségünk, hozzuk létre a RecipeViewControllert (ez nem táblázat, sima UIViewControllet subclass) Nyissuk meg a XIB-et és építsük fel a recept megjelenítését Baloldalra egy UIImageView (food.jpeg) Mellé 3 UILabel a névnek és az elkészítési időne Alá egy UITextView a recept szövegének

35 Nekiállunk programozni Igen régóta dolgozunk és sok mindent összeállítottunk Főablakot a TabBarral létrehoztuk Létrehoztuk két Tab tartalmát (listákat), és be működően be is kötöttük Megterveztük a recept megjelenítőt És mindez idáig nem írtunk le egy sor programkódot sem!

36 Feltöltjük a táblázatot Nyissuk meg a RecipeListViewControllert Három metódus adja meg a táblázat adatait, ezeket most feltöltjük statikus értékekkel Ez a táblázat 1 részből fog állni - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableview { // Return the number of sections. return 1; } És 5 sort fog tartalmazni - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section { // Return the number of rows in the section. return 5; }

37 A cellák megjelenítése - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static NSString *CellIdentifier UITableViewCell *cell = [tableview dequeuereusablecellwithidentifier:cellidentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initwithstyle:uitableviewcellstylesubtitle reuseidentifier:cellidentifier] autorelease];!! cell.imageview.image=[uiimage imagenamed:@"recipe.jpeg"]; } cell.textlabel.text=[nsstring stringwithformat:@"recept %d",indexpath.row];! cell.detailtextlabel.text=@"nagyon finom";! cell.accessorytype=uitableviewcellaccessorydetaildisclosurebutton; } return cell; Megkapjuk, hogy melyik cellát kéri a rendszer és ezt kell visszaadnunk Először megpróbálunk újrahasznosítani, ha nincs mit, akkor újat csinálunk Beállítjuk a cella paramétereit

38 A cellák megjelenítése Csináljuk meg a CategoryListViewControllert is. Ugyanúgy 1 szekció és legyen benne 10 sor Hasonlóan csináljuk meg a cella visszaadást is // Customize the appearance of table view cells. - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static NSString *CellIdentifier UITableViewCell *cell = [tableview dequeuereusablecellwithidentifier:cellidentifier]; if (cell == nil) { cell = [[[UITableViewCell alloc] initwithstyle:uitableviewcellstyledefault reuseidentifier:cellidentifier] autorelease];!! cell.imageview.image=[uiimage imagenamed:@"category.gif"]; } } cell.textlabel.text=@"kategória"; return cell;

39 Mi történjen kattintásra? A kategóriáknál váltsunk át egy recept listára (CategoryListViewController): - (void)tableview:(uitableview *)tableview didselectrowatindexpath: (NSIndexPath *)indexpath {! RecipeListViewController *recipelistviewcontroller = [[RecipeListViewController alloc] initwithnibname:@"recipelist" bundle:nil];! recipelistviewcontroller.title=@"receptek";! [self.navigationcontroller pushviewcontroller:recipelistviewcontroller animated:yes];! [recipelistviewcontroller release]; }

40 Mi történjen kattintásra? A receptlistában pedig töltsünk be egy receptet (RecipeListViewController): - (void)tableview:(uitableview *)tableview didselectrowatindexpath: (NSIndexPath *)indexpath {! RecipeViewController *recipeviewcontroller = [[RecipeViewController alloc] initwithnibname:@"recipe" bundle:nil];! recipeviewcontroller.title=@"recept";! [self.navigationcontroller pushviewcontroller:recipeviewcontroller animated:yes];! [recipeviewcontroller release]; }

41 Próbáljuk ki!

42 Köszönöm a figyelmet! Sallai Péter peter.sallai@ponte.hu