iphone programozás alapjai I. Gyakorlat 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 I. Számológép
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 Projekt létrehozása XIB megnyitása
XIB szerkesztése Ö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 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
CalculatorViewController.h #import <UIKit/UIKit.h> @interface CalculatorViewController : UIViewController {! UITextField* resultfield; @property (nonatomic,retain) IBOutlet UITextField* resultfield; -(IBAction) pushednumber:(id)sender; -(IBAction) pushedplus; -(IBAction) pushedminus; -(IBAction) pushedmul; -(IBAction) pusheddiv; -(IBAction) pushedequal; @end 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 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 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
Action bekötés 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) Kidolgozzuk a kódot CalculatorViewController.h #import <UIKit/UIKit.h> @interface CalculatorViewController : UIViewController {! UITextField* resultfield;! long number,resultnumber;! enum Operation {none,plus,minus,mul,divide,equal operation; @property (nonatomic,retain) IBOutlet UITextField* resultfield; -(void) calculate; -(IBAction) pushednumber:(id)sender; -(IBAction) pushedplus; -(IBAction) pushedminus; -(IBAction) pushedmul; -(IBAction) pusheddiv; -(IBAction) pushedequal; @end
CalculatorViewController.m @Synthesize-oljuk a resultfield-et. #import "CalculatorViewController.h" @implementation CalculatorViewController @synthesize 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]; 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 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 stringwithformat:@"%d",number]; -(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
Elkészültünk, próbáljuk ki! II. Szakácskönyv 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
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 Készítsük el a projektet! 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)
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 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 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
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 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 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
Ö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 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 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: http://www.ponte.hu/ 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
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 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! 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;
A cellák megjelenítése - (UITableViewCell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static NSString *CellIdentifier = @"RecipeCell"; 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 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 = @"CategoyCell"; 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; 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];
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]; Próbáljuk ki! Köszönöm a figyelmet! Sallai Péter peter.sallai@ponte.hu