Programování pro iOS - 8. Dokončení aplikace - MujMAC.cz - Apple, Mac OS X, Apple iPod

Navigace:  » Úvodní stránka  » Rubriky  » Informace  

22. září 2010, 00.00 | Aplikace pro měření vzdálenosti bouřky nám hezky vyrostla pod rukama. Zbývá dokončit pár posledních detailů a verzi 1.0 prohlásit za hotovou.

Nejprve ale jedno slíbené vysvětlení.

Mezi řadou dalších námětů jak aplikaci vylepšit jsme si minule uvedli také variantu: "Mohli bychom také měnit grafické pozadí rámce podle toho, zda se bouře blíží nebo vzdaluje". Na rozdíl od všech ostatních, které jsme si vyjmenovali, tato není úplně triviální; proto si dnes ukážeme, jak na to.

Nejprve si připravíme vhodné obrázky – nejspíše budou tři, jeden pro běžné pozadí (můžeme jej nazvat třeba "storm.png"), druhý nějaký velmi romantický pro blížící se bouři (ten se může jmenovat například "stormComing.png") a třetí klidný pro bouřku na odchodu ("stormGoing.png"). Uložíme je do projektu pomocí služby "Add / Existing files..."; dáme si přitom pozor na to, aby byl ve druhém dialogovém lístku v tabulce "Add to Targets" označený cíl. To zajistí, že obrázky budou při sestavování aplikace zkopírovány do její složky, a při jejím běhu je budeme mít k dispozici.

Pak se postaráme o to, aby náš hlavní rámec dokázal statický obrázek na pozadí zobrazovat.

Možností je několik; asi nejjednodušší ale je nahradit obyčejný rámec třídy UIView jeho podtřídou UIImageView; ta funguje stejně dobře jako hlavní rámec, a navíc je právě speciálně vytvořena pro podporu obrázků (hodně speciálně: dokonce používá zvlášť optimalizované nestandardní kreslení obsahu, takže pokud bychom si vytvořili její podtřídu, nebude nám v ní fungovat ani standardní metoda drawRect:!).

Otevřeme tedy objektovou síť "MainView.xib", v hlavním okně Interface Builderu označíme objekt "View", a v inspektoru identity hned v prvním textovém poli "Class" změníme text "UIView" na "UIImageView" – pro větší pohodlí můžeme použít rozevírací nabídku.

Pak se vrátíme do zdrojového kódu a doplníme jej např. takto:

// MainViewController.h
...
@interface MainViewController:UIViewController
  <FlipsideViewControllerDelegate> {
    IBOutlet UILabel *range,*speed;
}
@property (retain) NSMutableArray *history;
@property
  (nonatomic, retain, getter=view, setter=setView)
    UIImageView *imageView;
...

Tím definujeme nový atribut imageView; má stejné parametry jako atribut view, který jsme zdědili od třídy UIViewController (a v němž máme odkaz na rámec); má stejné přístupové metody view a setView – tedy má fakticky touž hodnotu; má ale odlišný typ: namísto UIView* je jeho typem UIImageView*. To nám umožní nový atribut přímo používat v konstrukcích, kde je zapotřebí odpovídající typ, aniž bychom se museli obracet k nehezkým konstrukcím s přetypováním (jako třeba "[(UIImageView*)self.view setImage:...]" nebo dokonce "((UIImageView*)self.view).image=...").

Je mimochodem velká škoda, že Objective C nezůstalo u jediného objektového typu id – konkrétní typy odpovídající jednotlivým třídám přinášejí daleko víc problémů než užitku; objektový systém má ideálně být zcela beztypový. Ale to odbočujeme.

Implementace by pak mohla vypadat kupříkladu takto:

// MainViewController.m
...
-(IBAction)rangeButtonTapped {
  ...
  if (pdist>dist) {
    speed.text=@"Bouře se blíží!";
    self.imageView.image=
      [UIImage imageNamed:@"stormComing.png"];
  } else {
    speed.text=@"Bouře se vzdaluje...";
    self.imageView.image=
      [UIImage imageNamed:@"stormGoing.png"];
  }
  ...
}
-(void)viewDidLoad {
[super viewDidLoad];
    self.history=[OCSAutosavedMutableArray array];
    self.imageView.image=
      [UIImage imageNamed:@"storm.png"];
}
...

Standardní třída UIImage nabízí řadu služeb pro práci s obrázky; prozatím nám stačí to, že na základě zprávy imageNamed: dokáže vyhledat obrázek uložený v aplikační složce podle jména – od verze iOS 4 již není zapotřebí zadávat příponu; služba si stejně dobře poradí s obrázkem .png jako třeba s GIFem nebo s čímkoli jiným, co iOS podporuje; my ji však použili, aby náš kód pracoval stejně dobře i ve starších systémech – a načíst jej z disku.

Služba navíc obrázky automaticky cachuje, takže si nemusíme dělat starost s její efektivitou.

Často se můžeme setkat s varováním, že to je zároveň její velký problém, neboť cache nevyprázdní při nedostatku paměti; podle dostupných informací to sice byla pravda v iOS 2, ale od verze 3 nahoru by mělo chování cache třídy UIImage fungovat korektně.

Mimochodem – když už máme obrázek na pozadí hlavního rámce, bylo by hezké, aby se týž obrázek, ale zrcadlově převrácený, objevil také na pozadí rámce "FlipsideView", v němž máme předvolby. Je asi zřejmé, kterak toho můžeme docílit – všechny tři obrázky zrcadlově převrátíme (na to nepotřebujeme žádný Photoshop, to umí i Preview) a uložíme do aplikace. Z rámce v objektové síti "FlipsideView.xib" uděláme UIImageView přesně týmž postupem, jaký jsme použili pro hlavní rámec. A obrázky načteme podle potřeby.

Pokud ovšem pracujeme v iOS 4, máme k dispozici daleko elegantnější řešení – zde úplně stačí v metodě viewDidLoad řídicího objektu rámce použít tento hezký trik:

//  FlipsideViewController.m
...
-(void)viewDidLoad {
  [super viewDidLoad];
  self.imageView.image=
    [UIImage
      imageWithCGImage:delegate.imageView.image.CGImage
      scale:1 orientation:UIImageOrientationUpMirrored];
  units.selectedSegmentIndex=
    [[NSUserDefaults standardUserDefaults]
      boolForKey:@"ImperialUnits"]?1:0;
  int hc=[[NSUserDefaults standardUserDefaults]
    integerForKey:@"HistoryCapacity"];
  [capacity selectRow:hc/10 inComponent:0 animated:NO];
  [capacity selectRow:hc%10 inComponent:1 animated:NO];
}
...

"Autosizing"

Jednou z šikovných vlastností rámců Cocoa je to, že dokáží při změně vlastní velikosti automaticky upravit rozmístění a velikost podřízených rámců, aniž bychom kvůli tomu museli programovat; stačí jen správně nastavit jejich atributy v Interface Builderu; vysvětlili jsme si to v našem seriálu už před šesti lety v odstavci "Změna velikosti objektů". Konkrétní vzhled ovladače v inspektoru nového Interface Builderu se poněkud změnil (podle mého názoru k horšímu, současné čárky jsou méně intuitivní, než bývaly "pružiny a dráty" starého), ale zato je k dispozici dynamický náhled, který ukazuje, jak se při změnách velikosti bude rámec chovat, takže v praxi to nevadí.

Ale proč se tím vůbec tady zabýváme, vždyť iPhone má obrazovku pevné velikosti, žádná okna s možností změn se nepoužívají, takže nás to vůbec nezajímá a můžeme se na "autosizing" vykašlat, ne?

Ne.

iPhone sice má obrazovku pevné velikosti, ale oblast, již z ní má k dispozici aplikace, se mění: pokud je zrovna aktivní telefonní hovor, při horním okraji je vyhrazen širší stavový pruh, a všechny rámce v aplikaci se odpovídajícím způsobem zmenší. S tím je nutno počítat kdykoli; simulátor na to dokonce nabízí službu "Toggle in-call status bar", díky níž si to můžeme vyzkoušet.

Kromě toho bychom u většiny aplikací měli podporovat možnost změny orientace a práce po otočení o 90 º; náš "bouřkoměr" je zde zrovna trochu výjimka v tom směru, že pro něj to opravdu není zapotřebí (ale v některém z příštích dílů si ukážeme, jak na to). U mnoha rámců se může ukázat, že pro jejich presentaci "na výšku" i "na šířku" není třeba nic přeprogramovávat – stačí jen správně nastavit "autosizing" (samozřejmě, u mnoha jiných tomu tak není, a musíme programově "přeskládat" GUI tak, aby to, co máme při pohledu na výšku nad sebou, bylo po pootočení vedle sebe).

Vraťme se k "bouřkoměru": zde se musíme postarat především o to, aby tlačítka při dolním okraji obrazovky zůstala i při aktivním hovoru skutečně při dolním okraji (a nesklouzla pod něj), nějak takto:

U ostatních objektů je vhodné upravit automatické změny velikosti také, hlavně proto, aby se vzájemně nepřekrývaly: u větších vnořených rámců bychom tak nastavili zvětšování/zmenšování (aktivací "šipek" uvnitř čtverečku) apod.

A ještě pár obrázků

Už jsme s aplikací skoro hotovi, ale pořád zbývají dvě důležité drobnosti.

Prvou z nich je aplikační ikona: je asi zřejmé, proč se bez ní nemůžeme obejít.

Její instalace je extrémně jednoduchá: vytvoříme prostě v libovolném grafickém programu vhodný obrázek velikosti 57×57 pixelů, pojmenujeme jej "Icon.png" a uložíme jej do projektu ve formátu PNG. V Xcode jej vložíme do cíle, aby se při jeho sestavení automaticky zkopíroval do složky "Resources" – a to je vše.

Až se později budeme zabývat iPadem a podporou více různých zařízení, uvidíme, že existuje podpora pro více různých a libovolně pojmenovaných ikon; prozatím se tím ale nemusíme zabývat. Za zmínku ale stojí to, že není třeba, abychom se snažili o standardní vzhled ikony iPhone s jejím "nasvícením shora" – to k našemu obrázku systém doplní automaticky předtím, než jej uloží do hlavní obrazovky. Naopak ale pokud to uděláme, můžeme dodatečné zpracování vypnout tak, že do souboru Info.plist přidáme položku

<key>UIPrerenderedIcon</key>
<true/>

ve specializovaném editoru Xcode ji máme k dispozici jako "Icon already includes gloss effects".

Kromě toho je zapotřebí sestavit a vložit do aplikace ještě jeden obrázek; jeho standardní jméno je "Default.png" a musí mít rozměry obrazovky (stejně jako u ikony, existuje způsob, jak uložit do aplikace různě pojmenované varianty pro různá zařízení, ale zatím nás to nemusí zajímat). iPhone v okamžiku spuštění aplikace přepkryje obrazovku tímto obrázkem, takže uživatel má pocit, že se hned něco děje – a po skutečné inicializaci (jež nějaký čas zabere), je obrázek nahrazen skutečným UI aplikace. Jde tedy vlastně o "švindl", který v uživateli vzbuzuje dojem, že se aplikace aktivují rychleji, než tomu je ve skutečnosti.

V našem případě je volba zřejmá – použijeme samozřejmě týž obrázek, který ukládáme na pozadí hlavního rámce.

Tím máme prvou, jednoduchoučkou verzi aplikace skutečně hotovou, a je na čase ji vyzkoušet nejen v simulátoru, ale také na skutečném zařízení: o tom si budeme povídat příště.