Práce s ikonami a obrázky tvOS v Xamarinu

Článek
03/16/2017

Vytváření poutavých ikon a obrázků je důležitou součástí vývoje imerzivního uživatelského prostředí pro vaše aplikace Apple TV. Tato příručka popisuje kroky potřebné k vytvoření a zahrnutí potřebných grafických prostředků pro vaše aplikace Xamarin.tvOS:

Spustit obrázek – spouštěcí obrázek se zobrazí při prvním spuštění aplikace a po dokončení spuštění se nahradí první obrazovkou aplikace.
Vrstvené obrázky – specifické pro Apple TV, nové vrstvené obrázky společnosti Apple pracují s paralaxním efektem pro vytvoření 3D efektu pro vybrané položky. Existuje několik způsobů, jak vytvořit vrstvené image.
Ikona aplikace – Ikony se vyžadují nejen pro domovskou obrazovku Apple TV, ale i pro App Store. Musí být k dispozici jako vrstvený obrázek.
Obrázek horní police – Pokud je vaše aplikace umístěná na horním řádku domovské obrazovky, bude k zvýraznění funkcí vaší aplikace potřebovat obrázek horní police. Volitelně můžete zadat obsah dynamické horní police , který zvýrazní obsah v aplikaci.
Obrázky Herního centra – Pokud je vaše aplikace hra a používá Game Center, bude potřeba několik dalších obrázků.
Nastavení imagí projektu Xamarin.tvOS – popisuje kroky potřebné k nastavení ikony Spustit obrázek a aplikaci pro aplikaci Xamarin.tvOS.

Důležité

Všechny obrázky na Apple TV jsou v rozlišení 1x (@1x) a měli byste používat jenom obrázky této velikosti. Zahrnutí větších grafik s vyšším rozlišením nejen chvíli trvá stahování a používání větší paměti a úložiště, ale musí se dynamicky škálovat za běhu a negativně ovlivnit výkon výkresu.

Spustit obrázek

Spouštěcí obrázek je první věc, která se zobrazí, když je aplikace Xamarin.tvOS původně spuštěna na Apple TV, a proto musí každá aplikace tvOS zadat spouštěcí obrázek.

Spouštěcí obrázek se zobrazí rychle a dává dojem, že aplikace je rychlá a responzivní. Apple TV nahradí spouštěcí obrázek první obrazovkou aplikace krátce po ní.

Spouštěcí obrázky nejsou příležitostí pro reklamy nebo grafické výrazy, existují pouze pro dojem, že se vaše aplikace spustí rychle a je připravená k použití.

Spustit velikost obrázku	Notes
1920 × 1080 px	Pouze nevrstvé soubory .png

Apple navrhuje návrh spouštěcí image vaší aplikace:

Téměř identické s první obrazovkou – Úvodní obrazovka by měla být co nejblíže první obrazovce vaší aplikace. Zahrnutí jiné grafiky nebo prvku může vést k nepříjemnému "blesku", když se objeví první obrazovka.
Vyhněte se použití textu – Spouštěcí obrázky jsou statické a proto se před zobrazením nebudou lokalizovat.
Downplay Launch - Protože uživatelé Apple TV často přepínají aplikace, neměli byste upoutat pozornost na proces spuštění aplikace.
Žádné reklamy ani branding – Spouštěcí obrázek by se neměl používat jako obrazovka O aplikaci ani by neměl obsahovat žádné značky, pokud není statickou součástí první obrazovky vaší aplikace. Reklamy jsou přísně zakázány.

Nastavení spouštěcího obrázku

Pokud chcete nastavit spouštěcí obrázek pro váš projekt tvOS, postupujte takto:

V Průzkumník řešení ho poklikáním Assets.xcassets otevřete pro úpravy:
V Editoru prostředků klikněte na LaunchImages asset:
Klikněte na položku 1x Apple TV a vyberte spustit obrázek nebo volitelně přetáhněte nový obrázek ze systému souborů:
Uložte provedené změny.

Vrstvené obrázky

Nové funkce Apple TV, vrstvené obrázky pracují s paralaxním efektem a vytvářejí 3D efekt, který pomáhá udržet uživatele na gauči mentálně propojený s obsahem na obrazovce v celé místnosti.

Vrstvené obrázky obsahují dvě (2) až pět (5) samostatných vrstev, které jsou sloučeny a tvoří kompletní obrázek. S výjimkou vrstvy pozadí každá vrstva používá své pořadí Z spolu s průhledností k vytvoření iluze hloubky. Když uživatel pracuje s vrstveným obrázkem, budou se vrstvy uspořádané podle Z škálovat a překrývat, aby tento efekt vytvořil.

Důležité

Pro ikony vaší aplikace jsou vyžadovány vrstvené obrázky a jsou volitelné pro další prioritní položky (například obrázek horní police). Apple ale navrhuje používat vrstvené obrázky pro libovolný obrázek, který se může zaměřit na vaši aplikaci.

Apple navrhuje vrstvené obrázky takto:

Nastavení neprůhleného pozadí vrstvy – Vrstva pozadí (vrstva 1) musí být neprůžná nebo se při pokusu o použití vrstveného obrázku na Apple TV zobrazí chyba. Všechny ostatní vrstvy můžou obsahovat více úrovní průhlednosti, aby se zlepšil prostorový efekt.
Izolovat prvky popředí, střední a pozadí – umístěte do popředí významné prvky (například herní znaky) a použijte střed pro sekundární prvky nebo stíny. Nakonec zahrňte neutrální pozadí pro zajištění fáze pro horní vrstvy.
Zachovat text v popředí – pokud nechcete, aby byl text zakrytý vyššími úrovněmi, obecně by měl být na nejvyšší vrstvě.
Použití jednoduchého vrstvení - Paralax Efekt byl navržen tak, aby byly jemné, takže vrstvy nechte minimální, aby se zabránilo vyřazování, nerealistické efekty.
Zahrnout Sejf Zónu – protože horní vrstvy je možné oříznout během paralaxního efektu, musíte do každé vrstvy vytvořit ohraničení Sejf zóny. Pokud získáte obsah příliš blízko okraje vrstev, může se oříznout. Horní vrstvy budou mít větší měřítko a oříznutí než nižší vrstvy. Níže si prohlédni část Vrstvy obrázků s velikostí.
Náhled často – Vrstvené obrázky by se měly zobrazit v náhledu, aby se zajistilo, že dojde k požadovanému 3D efektu a že se ořízne žádný obsah na jednotlivých vrstvách. Měli byste zobrazit náhled vrstvených obrázků na skutečném hardwaru Apple TV, abyste měli jistotu, že se vykreslují podle očekávání.

Kdykoli je to možné, měli byste k zobrazení vrstvených obrázků vždy použít předdefinované UIKit ovládací prvky, protože automaticky získají paralaxní efekt, když se dostanou do fokusu.

Změna velikosti vrstev obrázků

Nezapomeňte do každé vrstvy zahrnout ohraničení Sejf zóny, které vytvoří vrstvený obrázek. Vzhledem k tomu, že jednotlivé vrstvy lze škálovat a oříznout během paralaxního efektu, můžete obsah vrstev oříznout, pokud je příliš blízko okraje vrstvy:

Vytváření vrstvených obrázků

tvOS funguje s vrstvenými obrázky v následujících formátech:

SOUBORY CAR - Jedná se o proprietární formát katalogu assetů vytvořený společností Apple. Soubory CAR nevytvoříte přímo, vytvoří se v době kompilace z jakýchkoli souborů LSR a zahrnutých do vaší sady aplikací.
Obrázky LSR – jedná se o proprietární formát obrázku vytvořený společností Apple. K vytváření a náhledu vrstvených obrázků ve formátu LSR použijte modul plug-in Adobe Photoshop exportér Parallax nebo Náhled Parallax Previewer.
Assets.xcassets – ze dvou (2) až pěti (5) standardních .png formátovaných obrázků zahrnutých v katalogu prostředků, které budou zkompilovány do CAR nebo LSR formátované vrstvené image v době kompilace.
LCR Files - Jedná se o proprietární formát souboru vytvořený společností Apple. Soubory LCR se mají použít jako další obsah stažený z jednoho ze serverů obsahu. Soubor LCR by nikdy neměl být součástí sady aplikací. Soubory LCR se generují ze souborů LSR nebo Photoshop pomocí nástroje příkazového layerutil řádku, který je součástí Xcode.

Náhled paralaxu

Apple vytvořil Náhled parallaxu pro náhled a vytvořil vrstvené obrázky vyžadované pro ikony aplikací a volitelné prioritní položky. Náhled zobrazuje každou vrstvu, která tvoří dokončený vrstvený obrázek:

Při zobrazení náhledu vrstveného obrázku můžete obrázek otočit myší a zobrazit náhled efektu Parallax. + K přidání a odebrání vrstev použijte tlačítka (plus) a - (minus).

Při vytváření nové vrstvené image je možné ji exportovat ve formátu LSR a zahrnout ji do sady vaší aplikace.

Další informace o vytváření a náhledu vrstvených obrázků najdete v části Vytváření paralaxních obrázků společnosti Apple v Průvodci programováním aplikací pro tvOS.

Ikony aplikací

Aplikace Xamarin.tvOS bude vyžadovat nejen ikonu aplikace pro domovskou obrazovku Apple TV, ale také ikonu obchodu App Store. Ikona aplikace je první změna, která na potenciálního uživatele udělá skvělý dojem a měla by na první pohled sdělit účel vaší aplikace.

Každá aplikace musí poskytovat malou i velkou verzi její ikony aplikace. Malá ikona se po instalaci aplikace použije na domovské obrazovce Apple TV. Velká verze se používá v App Storu. Velká ikona aplikace by měla napodobovat vzhled a chování malé verze ikony.

Malá ikona	Rozlišení	Rozlišení
Skutečná velikost	400 × 240px	1280x768px
velikost zóny Sejf	370x222px
Nezaostřená velikost	300x180px
Prioritní velikost	370x222px

Důležité

Ikony aplikací musí být k dispozici jako vrstvené obrázky. Další podrobnosti najdete v části Vrstvený obrázek výše.

Apple nabízí následující návrhy pro vytváření ikon aplikací:

Zadejte jeden fokus – navrhněte ikonu jedním fokusem umístěným přímo uprostřed ikony.
Použijte jednoduché pozadí – Nechte pozadí ikony jednoduché, aby horní vrstvy vynikly. Zvažte použití jednoduché barvy nebo jemného přechodu.
Omezit množství textu – vzhledem k tomu, že se název aplikace zobrazí pod ikonou, když ji uživatel vybere, měli byste text zahrnout jenom v případě, že je pro návrh ikony nezbytné.
Nepoužívejte snímky obrazovky – Snímky obrazovky jsou pro ikonu příliš složité a nepovolují uživateli vidět účel vaší aplikace na první pohled.
Zachovat čtvereček ikon – tvOS automaticky použije masku, která bude v rozích ikon zaokrouhlovat subtálně. Nezahrnujte toto zaokrouhlování sami.
Pečlivě oddělte vrstvy – Text by měl být na horní vrstvě, sekundární položky uprostřed a neutrální pozadí, které vašim horním vrstvám umožňuje lesknout.
Přechody a stíny používejte opatrně – přechody a stíny můžou kolidovat s paralaxním efektem, aby se měly používat pečlivě. Jednoduché styly přechodu shora dolů, světlé až tmavé přechody fungují nejlépe. Stíny obvykle fungují nejlépe jako ostré, pevně ohrané odstíny.
Různá průhlednost vrstvy – Pokud chcete zvýšit prostorový efekt, použijte různé úrovně průhlednosti na horních úrovních ikony aplikace. Vrstva pozadí musí být neprůrůžná nebo výsledkem bude chyba.

Nastavení ikon aplikací

Pokud chcete nastavit ikony aplikací vyžadované pro váš projekt tvOS, postupujte takto:

V Průzkumník řešení ho poklikáním Assets.xcassets otevřete pro úpravy:
V Editoru App Icon & Top Shelf Image prostředků rozbalte asset:
Dále rozbalte App Icon - Small asset:
Potom rozbalte Back asset a klikněte na Contents položku:
Klikněte na položku Apple TV 1x a vyberte soubor obrázku.
Opakujte výše uvedené kroky pro prostředky Front a Middle prostředky.
Potom stejný postup zopakujte a definujte App Icon - Large asset.
Uložte provedené změny.

Obrázek horní police

Pokud uživatel umístil aplikaci Xamarin.tvOS na horní řádek na domovské obrazovce Apple TV, zobrazí se při výběru aplikace uživateli velký obrázek nahoře. Tento obrázek by měl zvýraznit funkce vaší aplikace nebo poskytnout přímé odkazy na jeho obsah.

Obrázek horní police lze poskytnout buď jako jeden statický .png , nebo .lsr soubor (viz Vytváření vrstvených obrázků), nebo ho lze dynamicky vytvořit za běhu jako jeden řádek prioritních položek (viz dynamický obsah top police níže).

Velikost obrázku nahoře	Notes
1920x720px	Statický .png nebo vrstvený soubor .lsr

Apple nabízí následující návrhy pro vytváření obrázků top police:

Používejte bohaté statické obrázky – Pokud vaše aplikace neposkytuje dynamický obsah, nebude se jeho obrázek nahoře soustředit. Na tomto obrázku můžete zvýraznit funkce aplikace nebo vaší značky.
Odkaz na obsah aplikace – Rozložení dynamické horní police poskytují rychlý odkaz na obsah, který uživatel najde v aplikaci nejdůležitější. Pomocí této oblasti můžete rychle spustit aplikaci a okamžitě přejít na daný obsah.
Prezentace nejnovějšího obsahu – bohatý obsah top police může nakreslit uživatele do vaší aplikace a zajistit, aby ho mohli používat více. Můžete ho použít jako oblast k prezentaci nejvyššího hodnocení nebo nejnovějšího obsahu.
Přizpůsobený obsah – Uživatelé umístí nejčastěji používané nebo oblíbené aplikace do horního řádku domovské obrazovky. Pomocí horní police zobrazte obsah, který by nejvíce zajímal.
Reklamy Nejsou povoleny – Reklamy jsou přísně zakázány, aby se zobrazovaly v horní police. Můžete zobrazit nejnovější nákupní obsah, ale neměly by se zobrazovat žádné informace o cenách.

Nastavení obrázku horní police

Pokud chcete nastavit obrázek horní police vyžadovaný pro váš projekt tvOS, postupujte takto:

V Průzkumník řešení ho poklikáním Assets.xcassets otevřete pro úpravy:
V Editoru App Icon & Top Shelf Image prostředků rozbalte asset:
Klikněte na Top Shelf Image asset:
Klikněte na položku Apple TV 1x a vyberte soubor obrázku.
Uložte provedené změny.

Dynamický obsah horní police

Místo zobrazení statického obrázku horní police může horní police obsahovat dynamický řádek prioritních položek nebo dynamickou sadu nápisů pro posouvání. Oba tyto dynamické styly umožňují zvýraznit obsah poskytovaný vaší aplikací nebo přejít na nejčastěji používané funkce.

Řádek oddílu obsahu

Tento typ obsahu s dynamickým horním policem představuje jeden řádek posouvání, položky s fokusem volitelně rozdělené do oddílů. Obvykle se používá ke zvýraznění nového, oblíbeného nebo nedávno zobrazovaného obsahu aplikace.

Obsah se zobrazí jako jeden vodorovný posuvný seznam obsahu s popiskem zobrazeným pod aktuální částí vybraného obsahu (který má aktuálně fokus). Pokud uživatel vybere danou část obsahu, spustí se vaše aplikace a bude se nacházet přímo do tohoto obsahu.

Budou vyžadovány následující velikosti obsahu:

Velikost	Plakát (2:3)	Čtverec (1:1)	HDTV (16:9)
Skutečná velikost	404x608px	608x608px	908x512px
velikost zóny Sejf	380x570px	570x570px	852x479px
Nezaostřená velikost	333x500px	500x500px	782x440px
Prioritní velikost	380x570px	570x570px	852x479px

Apple nabízí následující návrhy pro řádek oddílového obsahu:

Dokončete řádek – Měli byste poskytnout dostatek obsahu pro celou šířku obrazovky.
Škálování smíšených obrázků – Řádek oddílového obsahu byl navržen tak, aby držel kombinaci velikostí obrázků (ze seznamu uvedeného výše). Pokud ale namícháte velikosti obrázků, mějte na paměti, že při normalizaci zobrazení obsahu se použije další měřítko.

Posouvání bannerů inset

Volitelně může aplikace Xamarin.tvOS prezentovat svůj obsah v horní police jako automaticky posouvání a smyčkování kolekce nápisů, které téměř vyplňují obrazovku. Tento styl se obvykle používá k prezentaci bohatého a nového obsahu, jako jsou nové televizní pořady.

Kromě automatického posouvání může uživatel převzít kontrolu nad bannery a posunout se v libovolném směru pomocí Siri Remote. Malé kruhové gesto na Siri Remote, když je banner v fokusu, aktivuje paralaxní efekt pro tento banner.

Obrázek banneru (extra široký)

Velikost	Rozlišení
Skutečná velikost	1940x624px
velikost zóny Sejf	1740x620px
Nezaostřená velikost	1740x560px
Prioritní velikost	1740x620px

Posouvání bannerů typu Inset lze zadat buď jako statický .png soubor, nebo jako vrstvený .lsr soubor.

Apple nabízí následující návrhy pro bannery inset pro posouvání:

Množství obsahu – měli byste poskytnout minimálně tři (3) bannery pro posouvání tak, aby se cítilo přirozeně. Neměli byste obsahovat více než osm (8) bannerů nebo navigace pro koncového uživatele.
Text obsahu – pokud banner vyžaduje text, měl by být součástí obrázku banneru. Pokud používáte vrstvené obrázky, měl by být text v nejvyšší vrstvě.

Další informace o přidání rozšíření Top Police do vaší aplikace s dynamickým obsahem top police najdete v referenčních informacích k rozhraní TVServices Framework společnosti Apple.

Obrázky herního centra

Pokud je vaše aplikace Xamarin.tvOS hra a vy jste zahrnuli podporu Game Center, bude potřeba několik dalších imagí:

Ikony úspěchů – pro každý úspěch se vyžaduje neprůhledný obrázek, který se automaticky ořízne do kruhu. Dosažené cíle jsou nezaostřitelné položky.
Kresba řídicího panelu – Volitelný obrázek je možné zadat, který se zobrazí v horní části řídicího panelu vaší aplikace v centru Game Center. Tyto obrázky nejsou fokusovatelné.
Kresba v tabulce výsledků – Pro každou tabulku výsledků, kterou vaše aplikace podporuje, musíte zadat mezi jednou (1) až třemi (3) 16:9 obrázky poměru stran. Může se jednat o statické .png nebo vrstvené .lsr soubory. Kresba tabulky výsledků je zaměřená.

Velikost	Ikony úspěchů	Kresba řídicího panelu	Kresba tabulky výsledků
Viditelná velikost	200x200px	923x150px	Není k dispozici
Skutečná velikost	320x320px	Není k dispozici	659x371px
velikost zóny Sejf	Není k dispozici	Není k dispozici	618x348px
Nezaostřená velikost	Není k dispozici	Není k dispozici	548x309px
Prioritní velikost	Není k dispozici	Není k dispozici	618x348px

Další informace o práci s Game Center najdete v Průvodci programováním v Centru her společnosti Apple.

Práce s obrázky

Vzhledem k tomu, že tvOS 9 je podmnožinou iOS 9, fungují stejné techniky, které se používají k zahrnutí a zobrazování obrázků v aplikaci Xamarin.iOS, také pro aplikaci Xamarin.tvOS. Další informace najdete v naší dokumentaci k zobrazení obrázku .

Nastavení imagí projektu Xamarin.tvOS

Jak je uvedeno výše, všechny aplikace tvOS vyžadují spouštěcí obrázek a ikonu aplikace. Tato část popisuje výběr ikony Spustit obrázek a aplikaci pro projekt aplikace Xamarin.tvOS po nastavení v katalogu assetů.

Postupujte následovně:

V Průzkumník řešení ho Info.plist poklikáním otevřete pro úpravy:
V editoru Info.Plist vyberte katalog prostředků (nakonfigurovaný výše v části Nastavení ikon aplikací) pro ikony aplikací:
Dále vyberte katalog assetů (nakonfigurovaný výše v části Nastavení spouštěcí image ) pro spouštěcí image.
Uložte provedené změny.

Shrnutí

Tento článek popisuje všechny typy a velikosti obrázků používané v aplikaci Xamarin.tvOS. Nejprve zahrnoval spouštěcí obrázky, vrstvené obrázky, ikony aplikací, obrázky top police a obrázky herního centra. Pak se probrala práce s obrázky v aplikaci Xamarin.tvOS.

Sdílet prostřednictvím

Práce s ikonami a obrázky tvOS v Xamarinu