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ő
• •
Round Rect Button a számoknak
• •
Jobbra igazítás, Enabled kiszedése Á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
@interface CalculatorViewController : UIViewController { ! UITextField* resultField; } @property (nonatomic,retain) IBOutlet UITextField* resultField; -(IBAction) -(IBAction) -(IBAction) -(IBAction) -(IBAction) -(IBAction)
pushedNumber:(id)sender; pushedPlus; pushedMinus; pushedMul; pushedDiv; 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
•
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)
Ehhez először a CalculatorViewController.h-ban vesszük fel az új elemeket
Kidolgozzuk a kódot CalculatorViewController.h #import @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) -(IBAction) -(IBAction) -(IBAction) -(IBAction) -(IBAction) @end
pushedNumber:(id)sender; pushedPlus; pushedMinus; pushedMul; pushedDiv; pushedEqual;
CalculatorViewController.m #import "CalculatorViewController.h"
•
@Synthesize-oljuk a resultField-et.
@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;
! ! ! ! ! ! ! ! }
! ! ! ! ! ! ! }!
case equal: elvégezzük a !függvényében break; !számítást default: !AzresultNumber=number; eredményt betesszük az !eredmény number=0; számolóba ! break;
Az aktuális művelet
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
•
Beállítjuk a cella paramétereit
Először megpróbálunk újrahasznosítani, ha nincs mit, akkor újat csinálunk
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 [email protected]
