Programování pro iOS - 13. Kreslíme na iPhone - MujMAC.cz - Apple, Mac OS X, Apple iPod

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é...