iphone programozás alapjai

Átírás

1 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

2 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

3 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

4 CalculatorViewController.h #import CalculatorViewController : UIViewController {! UITextField* (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 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

5 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 CalculatorViewController : UIViewController {! UITextField* resultfield;! long number,resultnumber;! enum Operation {none,plus,minus,mul,divide,equal (nonatomic,retain) IBOutlet UITextField* resultfield; -(void) calculate; -(IBAction) pushednumber:(id)sender; -(IBAction) pushedplus; -(IBAction) pushedminus; -(IBAction) pushedmul; -(IBAction) pusheddiv; -(IBAction)

6 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]; 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

7 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

8 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)

9 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

10 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

11 Ö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: 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

12 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;

13 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 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; 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];

14 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