Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
Software
Programování pro iOS - 13. Kreslíme na iPhone
27. října 2010, 00.00 | Chcete-li napsat aplikaci umožňující kreslení jednoduchých obrázků na displeji iPhonu, je třináctý díl našeho seriálu stvořený právě pro vás.
Aplikace bude velmi podobná v analogickému projektu pro Mac OS X, v němž jsme se učili interpretovat události, generované myší.
Ačkoli prst není zdaleka tak přesný jako myš a kreslení nefunguje zdaleka tak dobře, ukážeme si téměř totožný kód jako tehdy, změněný právě jen natolik, aby fungoval v iOS; důvody jsou dva:
• nepíšeme aplikaci pro prodej na AppStore, ale učíme se zacházet s API. Proto vystačíme se simulátorem, a na simulátoru jsou doteky ve skutečnosti simulovány pomocí myši – jsou tedy fakticky přesnější, než by byly prsty na skutečném zařízení;
• co je hlavní, budete moci dobře porovnat tehdejší a současnou implementaci a tak srovnat rozdíly mezi Mac OS X a iOSem.
Později si ukážeme některé rozdíly mezi přístupem iOSu a Mac OS X a vysvětlíme si také, jak – a proč – by to šlo udělat poněkud lépe (a v iOS 3.2 nebo novějším dokonce daleko lépe); prozatím ale schválně zůstaneme u nakolik možno co nejpřesnější kopie tehdejšího projektu.
Základní projekt
Začneme jednoduše: spustíme Xcode, vyžádáme si vytvoření nového projektu pomocí příkazu "File / New Project", zvolíme variantu "iOS /Application / View-based Application" pro iPhone, a celkem libovolné jméno a umístění; necháme si vygenerovat základní projekt na základě standardních projektových vzorů.
Celkové struktuře projektu už bychom dnes měli dávno rozumět; nebudeme si proto popisovat, který prvek k čemu přesně slouží (to jsme si ukázali podrobně hned na začátku práce v iOSu; ačkoli jsme tehdy použili projektový vzor "iPhone OS / Application / Utility Application", dnes by nám stejně mělo být vše důvěrně známé, protože vzor "iOS /Application / View-based Application" je jednodušší), a pustíme se rovnou do práce.
Potřebujeme rámec
V projektovém vzoru ovšem není rámec – chybí zde vlastní podtřída UIView, která by byla třídou rámce, s nímž aplikace na obrazovce skutečně pracuje. To je obecně správně: v projektech pro iOS vytváříme vlastní třídy pro rámce jen celkem výjimečně, většinou využíváme rámců ze standardních knihoven. Pro náš projekt ale vlastní rámec potřebujeme.
Pozorní čtenáři už dávno vědí, jak to řešit.
Pro ostatní uvedeme stručný návod v několika bodech:
i. kdekoli v projektu – např. nad skupinou "Classes" – použijeme příkaz "Add / New File...", a v dialogovém okně zvolíme souborový vzor "iOS / Cocoa Touch Class / Objective-C class / Subclass of UIView":
ii. jméno nové třídy je celkem nepodstatné; můžeme zvolit třeba prostě "View" jako v minulém projektu. Ověříme si, že při vytváření souboru je zaškrtnutý přepínač "Also create 'View.h'";
iii. otevřeme XIB, který obsahuje hlavní rámec naší aplikace – nalezneme jej ve skupině "Resources", a jeho jméno bude "<jméno projektu>ViewController.xib". Soubor se samozřejmě otevře v aplikaci Interface Builder;
iv. nějakým vhazováním hlavičkového souboru jako tehdy se již zabývat nemusíme: současný Interface Builder je dost chytrý na to, aby si hlavičkové soubory z projektu načetl sám. Stačí tedy označit hlavní rámec, aktivovat inspektor identity – a zde v odpovídajícím textovém poli zadat jméno naší třídy, "View":
To je vše. Pokud jsme někde neudělali nějakou chybu, máme po uložení XIBu jisté, že hlavním rámcem bude právě instance naší třídy View – a že cokoli, co v této třídě implementujeme, se také využije. Pusťme se tedy do toho!
Instanční proměnné a kreslení
Instanční proměnné naší nové třídy budou přesně stejné, jako tomu bylo minule: podívejte se na ně do odstavce "Properties a kreslení" (v době, kdy byl minulý článek napsán, ještě Objective C nevyhradilo pojmu "properties" speciální význam; dnes jej již pro instanční proměnné používat nemůžeme).
Bude zde jen jedno pole (do nějž budeme ukládat nakreslené čáry), a jedna pomocná proměnná typu CGPoint (jak už víme, v iOSu geometrické struktury CG... nahradily odpovídající struktury NS... z Mac OS X). Té využijeme při kreslení – při doteku prstem na obrazovce si do ní uložíme momentální polohu, abychom mohli při jeho zdvižení nakreslit čáru:
@interface View:UIView {
NSMutableArray *lines;
CGPoint start;
}
@end
Ačkoli kód pro kreslení bude také v principu přesně týž jako v minulém projektu, konkrétních úprav zde budeme muset udělat trochu víc. Zdaleka nám nestačí pouhá náhrada prefixu NS prefixem CG (resp. prefixy UI u služeb na úrovni aplikačních knihoven): problém je v tom, že třídu, analogickou naší třídě NSBezierPath, již jsme tehdy použili pro kreslení, iOS nabízí až od verse 3.2 nahoru. Málokdo si ale dnes ještě může dovolit ignorovat poměrně velmi rozsáhlý trh iPhonů s iOSem ve versi 3.1 – to snad tak někdy za půl roku, rok –; proto musíme sestoupit na nízkou úroveň grafických služeb Core Graphics, a kreslení našich čar implementovat jejich pomocí.
Princip práce na úrovni třídy UIView je ale zcela stejný, jako tomu bylo u třídy NSView: implementujeme prostě metodu drawRect:, v níž vykreslíme kompletní obsah našeho rámce. Systém tuto metodu automaticky zavolá kdykoli, když je zapotřebí rámec překreslit – přesně stejně, jako tomu bylo v Mac OS X a jak jsme si vysvětlili v odstavci "Princip kreslení" na konci článku "Základy kreslení".
Ve skutečnosti jsou v iOS určité drobné rozdíly, dané větší optimalizací založenou na knihovnách Core Animation (v iOS vlastně standardně rámce "nekreslí samy sebe", ale spíše "se nechávají kreslit pomocí animačních knihoven"); to je ale prozatím pro nás irelevantní – rozdíly jsou na úrovni API, s níž zatím nepracujeme a která nás tedy prozatím nemusí zajímat. Samozřejmě, že si to vše podrobně a do detailů později v našem seriálu také vysvětlíme; řada jiných věcí má ale přednost, protože přímé kreslení v metodě drawRect: se v iOS používá relativně zřídka, rozhodně daleko méně často, než jak často potřebujeme zpracovávat události dotekové obrazovky.
Kreslicí kód si proto ukážeme jen zběžně a bez dlouhého výkladu – podstatné věci a rozdíly oproti minulé variantě ještě okomentujeme řádkem či dvěma:
-(void)drawRect:(CGRect)rect {
[[UIColor whiteColor] set]; //1
UIRectFill(rect);
CGContextRef gc=UIGraphicsGetCurrentContext(); //2
CGContextSetStrokeColorWithColor(gc,
[UIColor blueColor].CGColor); //3
for (NSArray *a in lines) { //4
CGPoint pts[2]={ //5
[[a objectAtIndex:0] CGPointValue],
[[a objectAtIndex:1] CGPointValue]
};
CGContextStrokeLineSegments(gc,pts,2); //6
}
}
1. prvé dva řádky jsou stejné jako minule, jen s odlišnými prefixy: vyplníme celé pozadí bílou barvou;
2. princip kreslení na úrovni Core Graphics spočívá v tom, že získáme odkaz na aktuální tzv. grafický kontext, a pak voláme jednotlivé funkce, jež nad ním pracují (při kreslení na aplikační úrovni jsou tyto služby skryty). Zde tedy pomocí standardní služby UIGraphicsGetCurrentContext získáme aktuální grafický kontext...
3. ... a zde pro něj nastavíme modrou barvu jako aktuální pro kreslení čar. Povšimněme si, že prvým argumentem služby CGContextSetStrokeColorWithColor je grafický kontext – tak je tomu u většiny funkcí Core Graphics. Druhým argumentem je barva, ale ve speciálním formátu CGColorRef; vytvořit takovou barvu přímo pomocí funkcí Core Graphics je poněkud otravné – je zapotřebí se zabývat také barevnými prostory. Proto si pomůžeme malým trikem: vezmeme barvu z aplikační úrovně UIColor; ta samozřejmě barvu ve formátu Core Graphics obsahuje, a my k ní máme přístup pomocí atributu CGColor;
4. pro příkaz cyklu jsme využili nový příkaz for/in, zavedený v Objective-C 2
5. Core Graphics neumí přímo "nakreslit čáru z bodu A do bodu B"; namísto toho ale dokáže "kreslit lomenou čáru z bodu A1 přes body A2, A3, ... až po An". Stačí tedy vytvořit pole – na úrovni Core Graphics to bude staré dobré pole plain-C, nikoli NSArray – dvou bodů...
6. ... a toto pole, spolu s počtem bodů "2" (a standardním odkazem na grafický kontext) předat kreslicí službě CGContextStrokeLineSegments.
A to je vše: pokud by pole lines obsahovalo nějaké dvojice bodů, korektně by se vykreslily odpovídající modré úsečky.
Hned si ukážeme, jak je do tohoto pole uložit.
Konečně práce s událostmi!
Nejprve stojí za to si připomenout, jak jsme kreslení implementovali v minulém projektu – bylo to opravdu velmi jednoduché: v metodě mouseDown: jsme si zapamatovali aktuální pozici v instanční proměnné start; v metodě mouseUp: jsme pak obsah proměnné start spolu s aktuální pozicí uložili do pole lines jako novou dvojici bodů.
Stejně tak tomu bude i nyní:
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
start=[[touches anyObject] locationInView:self];
}
Nejprve se chvilku zastavíme nad výrazem [touches anyObject]: cože? Co to má znamenat?
Inu, standardní zpráva anyObject je rychlý a efektivní způsob, jak vybrat nějaký – libovolný – prvek z dané množiny.
A proč je nám jedno, který prvek vybíráme?
To proto, že jsme u našeho rámce ponechali standardně atribut multipleTouchEnabled – vzpomeňme si na něj z minulého dílu! – vypnutý; v Interface Builderu to vypadalo nějak takto (přepínač "Multiple Touch" dole):
Proto budeme zpracovávat vždy pouze jediný tah, takže množina touches bude vždy jednoprvková, a tedy můžeme zcela bezpečně zvolit "libovolný z jejích prvků"
Povšimněme si také, že díky standardní službě locationInView: máme oproti projektu v Mac OS X kód trochu jednodušší – tehdy jsme museli aktuální pozici načíst z eventu a převádět do souřadnic rámce; v iOS nám ji v souřadnicích rámce předá rovnou instance třídy UITouch, representující tah.
Obsah metody touchesEnded:withEvent: je již asi zřejmý: stejně jako v touchesBegan:withEvent: zjistíme aktuální pozici; stejně jako v minulém projektu ji uložíme do pole lines jako dvojici objektů NSValue (jediný rozdíl zde je v tom, že pro uložení bodů CGPoint slouží zpráva valueWithCGPoint: na rozdíl od zprávy valueWithPoint:, již jsme užili minule pro uložení technicky malinko odlišných hodnot NSPoint).
Samozřejmě nezapomeneme vytvořit pole lines (inicializace na vyžádání je velmi šikovný přístup) a nakonec připomeneme rámci pomocí zprávy setNeedsDisplay, že bude zapotřebí jej při nejbližší vhodné příležitosti překreslit (na rozdíl od Mac OS X zde tato zpráva nemá argument – jeho hodnota v Mac OS X ostatně stejně vždy byla YES):
-(void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event {
if (!lines) lines=[NSMutableArray new];
[lines addObject:[NSArray arrayWithObjects:
[NSValue valueWithCGPoint:start],
[NSValue valueWithCGPoint:
[[touches anyObject] locationInView:self]
],nil]];
[self setNeedsDisplay];
}
To je v zásadě vše; díky zprávě setNeedsDisplay systém velmi brzy rámci pošle zprávu drawRect:, a ta nově uloženou čáru vykreslí.
Jen ještě drobnost: dokumentace Apple zdůrazňuje, že je podstatné v rámcích vždy implementovat kompletní čtveřici metod pro obsluhu dotekových událostí. Proč je tomu právě tak (a také proč by zrovna v této konkrétní aplikaci nedošlo k zásadním obtížím kdybychom to ignorovali) si řekneme příště; teď ale z tréninkových důvodů ještě přidáme
-(void)touchesMoved:touches withEvent:event {}
-(void)touchesCancelled:touches withEvent:event {}
A to je už opravdu vše. Můžeme projekt sestavit, spustit, a kochat se tím, jak hezky se nám v aplikaci kreslí:
Příště se podíváme na to, jak pomocí tohoto mechanismu implementovat ta nejběžnější gesta: uvidíme, že to není úplně jednoduché...
Obsah seriálu (více o seriálu):
- Nastal čas na kakao...
- Tak nejdřív kakao ochutnáme...
- Programovací jazyk C: velmi, velmi stručně
- Objective C: to si vysvětlíme podrobněji
- Co jsme si o Objective C ještě neřekli...
- Nastal čas na kakao - Vznik a zánik objektů
- Nastal čas na kakao - Kopírování objektů
- Nastal čas na kakao - Skryté podtřídy
- Nastal čas na kakao - Základní služby objektů
- Nastal čas na kakao - Jak správně psát v Objective C
- Nastal čas na kakao - Jak správně importovat
- Nastal čas na kakao - Podtřídy, delegáti, vkládání, jak se to rýmuje?
- Nastal čas na kakao - Využití kategorií namísto dědičnosti
- Nastal čas na kakao - Vkládání objektů a přesměrování zpráv
- Nastal čas na kakao - Inicializace a rušení objektů
- Nastal čas na kakao - Metody initWith... a designovaný inicializátor
- Nastal čas na kakao - Inicializace: tipy a triky
- Nastal čas na kakao - Accesory: přístup k proměnným instancí
- Nastal čas na kakao - Šedá je teorie, zelený je strom života...
- Nastal čas na kakao - Více o XCode: inspektory
- Nastal čas na kakao - Aplikace RSS2: datový model
- Nastal čas na kakao - Aplikace RSS: implementace datového modelu
- Nastal čas na kakao - Aplikace RSS: parsování XML
- Nastal čas na kakao - Interface Builder a uživatelské rozhraní
- Nastal čas na kakao - Interface Builder: atributy objektů
- Nastal čas na kakao - Interface Builder: atributy objektů
- Nastal čas na kakao - Druhý kontrolér a dokončení aplikace
- Nastal čas na kakao - Drobná vylepšení a zdokonalení...
- Nastal čas na kakao - Ladění
- Nastal čas na kakao - Třídy Foundation Kitu
- Nastal čas na kakao - Třídy Foundation Kitu (2)
- Nastal čas na kakao - Textové řetězce: NS(Mutable)String
- Nastal čas na kakao - Čísla, binární data a další...
- Nastal čas na kakao - Archivace objektů
- Nastal čas na kakao - Trocha magie, aneb distribuované objekty
- Nastal čas na kakao - Málem bychom zapomněli: NSAutoreleasePool
- Nastal čas na kakao - Zpracování výjimek: NSException
- Nastal čas na kakao - NSInvocation a černá magie
- Nastal čas na kakao - Kakao v Tygrovi
- Nastal čas na kakao - Notifikace: nepřímé předávání zpráv
- Nastal čas na kakao - NSUserDefaults
- Nastal čas na kakao - Co nového ve Foundation Kitu
- Nastal čas na kakao – s Intelem, s Intelem, jedeme do...
- Co nového v Xcode
- Začínáme s AppKitem
- Jak MVC v Kakau vypadá doopravdy?
- Jak MVC v Kakau vypadá doopravdy: dokončení
- Přehled tříd AppKitu
- Nastal čas na kakao - Přehled tříd AppKitu 2
- Přehled tříd AppKitu 3: zbývající třídy GUI
- Přehled tříd AppKitu 4: textový systém
- Nastal čas na kakao - Přehled tříd AppKitu 5: hlavně grafika
- Přehled tříd AppKitu 6: dokumentový systém
- Přehled tříd AppKitu 7: dokončení
- Pojmenované vlastnosti objektů
- Pojmenované vlastnosti objektů: implementace
- Pojmenované vlastnosti objektů: relace 1:N
- Pojmenované vlastnosti objektů: řazení jmen a agregační funkce
- Sledování změn objektů
- Sledování změn objektů – ukázka
- Sledování změn objektů – zdrojový kód
- Sledování změn objektů: kód modelu
- Sledování změn objektů: přímý přístup
- Kontroléry a vazby
- Vázání vazeb
- Další vazby s jednoduchým kontrolérem
- Implementace a použití převodu hodnot
- Validace hodnot
- Validace a chyby, a jedna hezká vazba...
- Práce s polem objektů
- Základní vazby NSArrayControlleru
- Převodníky, přepínače, placeholdery
- Mírná vylepšení v mezích zákona
- Objective C 2.0 - novinky z Leoparda
- NSTreeController
- Programování v Cocoa - Pár tipů a triků
- Programování v Cocoa - Základy kreslení
- Kterak nakreslit modrý obdélník...
- Další služby pro kreslení
- Obrázky a písmenka...
- Události a myš
- Lepší práce s myší
- Události klávesnice
- Input Management
- Příkazy a schránka
- Další události
- Táhni a padni
- Byli jsme na tahu; nyní padneme.
- Zvolme si, jak vhodit
- Drobnosti a chybičky
- Speciální případy tahání či házení
- Kterak táhnout něco, co neexistuje?
- Jak na sítě...
- NSURLConnection
- Safari za minutu
- Služby WebKitu
- Kakao v Leopardu
- Druhé Objective C
- Druhé Objective C: různé drobnosti
- Druhé Objective C: kategorie a protokoly
- Druhé Objective C: nový příkaz cyklu
- Druhé Objective C: atributy a accesory
- Druhé Objective C: atributy a accesory
- 64 je dvakrát 32
- Ubicumque dulce est, ibi et acidum invenies...
- Irbis: že prý žádné novinky?
- Blok sem, blok tam, nám už je to všechno jasné...
- Bloky jsou i v AppKitu
- Irbis a Foundation Kit
- Kde jsou má data?
- Kde jsou má data? V NSCache!
- Soubor, jméno, URL, jak se to rýmuje...
- Další podpora NSURL
- Zabíjení!
- A máme tady i...OS!
- Systémové prvky GUI
- Programování pro iOS 1. díl - Rozdíly mezi "i" a "Mac"
- Programování pro iOS - 2. Začínáme programovat
- Programování pro iOS - 3. základní ovladače a propojení GUI s kódem
- Programování pro iOS - 4. Varovná hlášení
- Programování pro iOS - 5. Rámce a jejich řídicí objekty
- Programování pro iOS - 6. Ukládání dat
- Programování pro iOS - 7. Správa paměti a starý restík
- Programování pro iOS - 8. Dokončení aplikace
- Programování pro iOS - 9. Jak dostat aplikaci do iPhone
- Programování pro iOS - 10. Instalace aplikace do cizího iPhone
- Programování pro iOS - 11. Jak dostat aplikaci do libovolného iPhone
- Programování pro iOS - 12. Touching!
- Programování pro iOS - 13. Kreslíme na iPhone
- Programování pro iOS - 14. Udělejme gesto
- Programování pro iOS - 15. Další gesta
- Programování pro iOS - 16. Více prstů, více zábavy
- Programování pro iOS - 17. Podpora standardních gest
- Programování pro iOS - 18. Recognizery v iOS
- Programování pro iOS - 19. Další standardní recognizery
- Programování pro iOS - 20. Co nového v iOSu
- Programování pro iOS - 21. "Multitasking"
- Programování pro iOS - 22. Nulla est honesta avaritia nisi temporis
- Programování pro iOS - 23. Jak se aktivovat, jsme-li v pozadí
- Programování pro iOS - 24. Zbývající drobnosti
- Programování pro iOS - 25. Řídicí objekty rámců
- Programování pro iOS - 26. Jak se dělá UIViewController
- Programování pro iOS - 27. Kde vzít rámce
- Programování pro iOS - 28. Základní služby
- Programování pro iOS - 29. Práce s rámci
- Programování pro iOS - 30. Rotace zařízení
- Programování pro iOS - 31. Správa paměti v rámcích
- Programování pro iOS - 32. Řídicí objekt pro tabulky
- Programování pro iOS - 33. Řídicí objekt pro strom
- Programování pro iOS - 33. Více o UINavigationControlleru
- Programování pro iOS - 35. Ještě jednou UINavigationController
- Programování pro iOS - 36. Po navigátoru taby
- Programování pro iOS - 37. Více o UITabBarControlleru
- Programování pro iOS - 38. Dokončení UITabBarControlleru
- Programování pro iOS - 39. UIPopoverController
- Programování pro iOS - 40. Další triky UIPopoverControlleru
- Programování pro iOS - 41. Zbývající služby UIPopoverControlleru
- Programování pro iOS - 42. UISplitViewController
- Programujeme v
iTunesXcode 4 - Programování pro iOS - 44. Předvolby Xcode 4
- Programování pro iOS - 45. Práce v Xcode 4
- Xcode 4: projekt a cíle
- Xcode 4: práce s cíli
- Xcode 4: Build Settings
- Xcode 4: Build Phases
- Xcode4: Build Phases podruhé
- Xcode 4: Co jsou to Build Rules?
- Xcode4: taje editoru
- Xcode4: automatické doplňování v editoru
- XIBy chyby
- Více o XIBech
- Editor XIBů
- Inspektory pro XIBy
- Vazby mezi objekty v XIBech
- Vazby mezi objekty v kódu
- Paletky Xcode pro XIBy
- Xcode 4: levý sloupec
- Xcode 4: okno Organizer
- Xcode 4: okno Organizer, část druhá
- Xcode 4: co je to Workspace?
- Xcode 4: základy schémat
- Xcode 4: akční schémata
Poslat článek
Nyní máte možnost poslat odkaz článku svým přátelům: