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

Vytváření ikon a snímků Captivating je důležitou součástí vývoje moderního uživatelského prostředí pro aplikace Apple TV. Tato příručka popisuje kroky potřebné k vytvoření a zahrnutí nezbytných grafických prostředků pro 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í nahradí první obrazovku aplikace.
  • Vrstvené obrázky – pro vybrané položky fungují na Apple TV, s využitím nových vrstvených obrázků od společnosti Apple. Existuje několik způsobů vytváření vrstvených imagí.
  • Ikona aplikace – ikony se vyžadují jenom pro domovskou obrazovku Apple TV, ale pro App Store. Musí se zadat jako vrstvený obraz.
  • Obrázek horní poličky – Pokud je vaše aplikace umístěná v horním řádku domovské obrazovky, bude potřeba, abyste si mohli zvýraznit funkce vaší aplikace na horní polici. Volitelně můžete zadat dynamický obsah nejvyšší poličky pro zvýraznění obsahu v aplikaci.
  • Game Center image – Pokud je vaše aplikace hra a používá Game Center, bude nutné provést několik dalších imagí.
  • nastavení imagí Project xamarin. tvOS – zahrnuje kroky potřebné k nastavení Image pro spuštění a ikonu aplikace v aplikaci Xamarin. tvOS.

Důležité

Všechny image na Apple TV jsou v rozlišení 1x ( @1x ) a měli byste používat @1x image této velikosti. Zahrnutí většího množství grafiky s vyšším rozlišením nestačí ke stažení a používání více paměti a úložiště, ale je nutné je dynamicky škálovat za běhu a negativně ovlivnit výkon vykreslování.

Spustit obrázek

Spouštěcí image je první věc, která se zobrazí při počátečním spuštění aplikace Xamarin. tvOS v TV Apple a jako taková, každá aplikace tvOS musí poskytovat spouštěcí image.

Spouštěcí image se zobrazí rychle a dává dojem, že je vaše aplikace rychlá a reaguje. Apple TV nahradí spouštěcí image první obrazovkou aplikace za chvíli.

Spouštěcí image nejsou příležitostí k reklamám nebo uměleckému výrazu, ale existují jenom k tomu, aby se dala dojem, že se aplikace spouští rychle a je připravená k použití.

Velikost spouštěcího obrázku Poznámky
1920x1080px Pouze soubory .png bez vrstvy

Apple pro návrh spouštěcí image aplikace provede následující návrhy:

  • Skoro stejně jako první obrazovka – spouštěcí obrazovka by měla být co nejblíže první obrazovce vaší aplikace. Zahrnutím různých grafik nebo elementů může být při zobrazení první obrazovky vysvětlené "bliknutí".
  • Vyhněte se použití obrázků po spuštění, které jsou statické a jako takové, nebudou před zobrazením lokalizovány.
  • Downplay Launch – protože uživatelé Apple TV často přepínají aplikace, neměli byste upozornit na proces spuštění aplikace.
  • Žádné reklamy ani branding – image při spuštění by se neměla používat jako na obrazovce ani zahrnovat značky, pokud se nejedná o statickou součást první obrazovky vaší aplikace. Reklamy jsou striktně zakázané.

Nastavení spouštěcí bitové kopie

Chcete-li nastavit spouštěcí image pro projekt tvOS, postupujte následovně:

  1. Na Průzkumník řešenídvakrát klikněte a otevřete ho pro úpravy:

    Soubor assets. xcassets

  2. V editoru assetůklikněte na Asset:

    Prostředek LaunchImages

  3. Klikněte na položku 1x Apple TV entry a vyberte spouštěcí image nebo volitelně přetáhněte nový obrázek ze systému souborů:

    Vybrat spouštěcí bitovou kopii

  4. Uložte provedené změny.

Vrstvené obrázky

Novinkou v programu Apple TV, vrstvené obrázky fungují s paralaxní efektem, aby se vytvořil prostorový efekt, který pomáhá udržet uživatele na couchně připojený k obsahu na obrazovce v místnosti.

Vrstvené obrázky obsahují dvě (2) až pět (5) samostatných vrstev, které jsou kombinovány, aby tvořily úplný obrázek. S výjimkou vrstvy pozadí každá vrstva používá pořadí vykreslování a průhlednost k vytvoření iluze hloubky. Když uživatel pracuje s vrstveným obrázkem, jsou škálované vrstvy seřazené nahoru a překryté pro vytvoření tohoto efektu.

Vrstvené obrázky Z – uspořádaný diagram

Důležité

Vrstvené obrázky jsou vyžadované pro ikony vaší aplikace a jsou volitelné pro další položky, které se zaměřují na fokus (například obrázek horní poličky). Společnost Apple ale navrhuje použití vrstvených imagí pro libovolný obrázek, který může mít fokus ve vaší aplikaci.

Společnost Apple provede následující návrhy pro návrh vrstvených imagí:

  • Nastavit vrstvu pozadí jako neprůhledné – vaše vrstva pozadí (vrstva 1) musí být neprůhledná nebo při pokusu o použití vrstvené image v Apple TV se zobrazí chyba. Všechny ostatní vrstvy mohou obsahovat více úrovní transparentnosti pro zlepšení 3D efektu.
  • Izolovat popředí, prostřední a pozadí prvky – umístit do popředí výrazné prvky (například hry), pro sekundární prvky nebo stíny použijte prostřední. Nakonec zahrňte neutrální pozadí, které poskytne fázi pro horní vrstvy.
  • Ponechá text v popředí – Pokud nechcete, aby byl váš text zakrytý většími úrovněmi, obvykle by měl být na vrchní vrstvě.
  • Použití jednoduchých vrstev – paralaxní efekt byl navržen jako jemný, takže vrstvy musí být minimální, aby nedocházelo k jarring, nereálné účinky.
  • zahrnout Sejf zónu – vzhledem k tomu, že horní vrstva může být během paralaxního efektu oříznuta, je třeba vytvořit ohraničení Sejf zóny v každé vrstvě. Pokud obsah obdržíte příliš blízko okraje vrstev, může dojít k jeho oříznutí. Horní vrstvy budou mít větší škálovatelnost a oříznutí než nižší vrstvy. Viz část nastavení vrstev obrázku níže.
  • Náhled často vrstvených imagí by se měly často zobrazovat, aby se zajistilo, že dojde k požadovanému trojrozměrnému efektu a že se neořízne žádný obsah v jednotlivých vrstvách. Měli byste zobrazit náhled vrstvených imagí na skutečném hardwaru Apple TV, abyste se ujistili, že se vykreslují podle očekávání.

Kdykoli je to možné, měli byste vždy použít předdefinované UIKit ovládací prvky k zobrazení vrstev s vrstvami, protože budou automaticky získávat paralaxní efekt, když se zaměří.

Změna velikosti vrstev obrázků

je důležité pamatovat, že do každé vrstvy, která bude tvořit vrstvený obraz, zadáte ohraničení zóny Sejf . Vzhledem k tomu, že je možné jednotlivé vrstvy škálovat a oříznout během Paralaxního efektu, může být obsah vrstev oříznutý, pokud je příliš blízko k okraji vrstvy:

ohraničení 35 pixelů

Vytváření vrstvených imagí

tvOS pracuje s vrstvenými bitovými kopiemi v následujících formátech:

  • Soubory auta – jedná se o proprietární formát katalogu assetů vytvořený společností Apple. Nevytvářejte přímo soubory auta, jsou vytvořeny během kompilace z libovolných souborů LSR a zahrnuté do sady prostředků aplikace.
  • LSR images – jedná se o speciální formát obrázku vytvořený společností Apple. Pomocí modulu Plug-in paralaxní Exportér Adobe Photoshop nebo náhledu paralaxní můžete vytvořit a zobrazit náhled vrstvených imagí ve formátu LSR.
  • Assets. xcassets – ze dvou (2) na pět (5) standardních formátovaných imagí obsažených v katalogu assetů, které se zkompiluje do auta nebo LSR formátovaného obrazu v době kompilace.
  • Soubory LCR – jedná se o speciální formát souboru vytvořený společností Apple. Soubory LCR jsou určeny k použití jako dalšího obsahu staženého z jednoho ze serverů obsahu. Soubor LCR by nikdy neměl být součástí sady prostředků vaší aplikace. Soubory LCR se generují z LSR nebo souborů aplikace Photoshop pomocí layerutil nástroje příkazového řádku, který je součástí Xcode.

Náhled paralaxní

Apple vytvořil náhled paralaxní k zobrazení náhledu a vytváření vrstvených imagí potřebných pro ikony aplikace a volitelné položky, které se zaměřují na výběr. Náhled zobrazuje všechny vrstvy, které tvoří dokončený obrázek s vrstvami:

Náhled paralaxní

Při prohlížení náhledu vrstveného obrázku můžete použít myš k otočení obrázku a zobrazení náhledu efektu paralaxní. +- K přidávání a odebírání vrstev použijte tlačítka (plus) a (minus).

Když vytváříte nový vrstvený obrázek, dá se exportovat ve formátu LSR a zahrnout do sady aplikace.

Další informace o vytváření a náhledu vrstvených imagí najdete v části vytváření paralaxní kreseb v tématu Průvodce programováním aplikací pro tvOS.

Ikony aplikací

Vaše aplikace Xamarin. tvOS bude vyžadovat nejen ikonu aplikace pro domovskou obrazovku Apple TV, ale také ikonu pro obchod s aplikacemi. Ikona aplikace je vaše první změna, která vám umožní skvělé dojmy na potenciálního uživatele a měla by na první pohled sdělit účel vaší aplikace.

Ikona aplikace

Každá aplikace musí poskytovat malou i velkou verzi své ikony aplikace. Malá ikona se použije na domovské obrazovce Apple TV při instalaci aplikace. V obchodě s aplikacemi se používá Velká verze. Ikona velké aplikace by měla napodobovat vzhled a chování malé verze ikony.

Malá ikona Řešení Velká ikona Řešení
Skutečná velikost 400 × 240 px 1280 × 768 px
Sejf velikosti zóny 370 × 222 px
Velikost bez zaměření 300 × 180 px
Focused Size 370 × 222 px

Důležité

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

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

  • Poskytnutí jednoho fokusu – navrhujte ikonu s jedním fokusem umístěným přímo uprostřed ikony.
  • Použít jednoduché pozadí – pozadí ikony nechte jednoduché, aby horní vrstvy vynikala. Zvažte použití jednoduché barvy nebo drobné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 neumožňují uživateli vidět účel vaší aplikace na první pohled.
  • Zachovat čtvercové ikony – tvOS automaticky použije masku, která ohraničuje rohy ikon. Toto zaokrouhlení nezahrnujte 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é umožňuje, aby horní vrstvy zazářily.
  • Používejte přechody a stíny Pečlivě – Přechody a stíny se mohou ckolidovat s paramixním efektem, takže byste je měli používat opatrně. Jednoduché styly přechodu od shora dolů k tmavému přechodu fungují nejlépe. Stíny obvykle fungují nejlépe jako ostré tinty s pevnými hranami.
  • Různé průhlednosti vrstev – ke zvýšení 3D efektu použijte různé úrovně průhlednosti na horních úrovních ikony aplikace. Vrstva pozadí musí být neprůhledná, jinak dojde k chybě.

Nastavení ikon aplikace

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

  1. V Průzkumník řešenípoklikejte a otevřete ho pro úpravy:

    Soubor Assets.xcassets

  2. V Editoru prostředkůrozbalte asset:

    Rozbalte asset Top Shelf Image (Obrázek s nejlepší policí).

  3. Dále rozbalte App Icon - Small asset:

    Rozbalení ikony aplikace – malý prostředek

  4. Potom rozbalte Back asset a klikněte na Contents položku:

    Potom rozbalte asset Back.

  5. Klikněte na položku Apple TV 1x a vyberte soubor obrázku.

  6. Opakujte výše uvedené kroky pro FrontMiddle prostředky a .

  7. Pak stejný postup zopakujte a definujte App Icon - Large asset.

  8. Uložte provedené změny.

Top Shelf Image

Pokud uživatel umístil vaši aplikaci Xamarin.tvOS do horního řádku na domovskou obrazovku Apple TV, zobrazí se při výběru aplikace uživatelem velký obrázek Top Shelf. Tento obrázek by měl zvýraznit funkce vaší aplikace nebo poskytnout přímé odkazy na její obsah.

Příklad s obrázkem s nejlepší policí

Top Shelf Image je možné skytovat buď jako jeden statický soubor, nebo jako soubor (viz Vytváření vrstvovaných obrázků), nebo ho můžete dynamicky vytvořit za běhu jako jeden řádek položek, na které můžete zaměřit (viz obsah dynamic .png.lsr top .lsr níže). .png

Top Shelf Image Size Poznámky
1920 × 720 px Statický .png nebo vrstvený soubor .lsr

Apple nabízí následující návrhy pro vytvoření obrázků s nejvyššími polici:

  • Použít bohaté statické snímky – pokud vaše aplikace neposkytuje dynamický obsah, nebude možné se na něj zaměřit. Na tomto obrázku můžete zvýraznit funkce aplikace nebo vaší značky.
  • Odkaz na obsah aplikace – dynamická rozložení pro nejlepší polici poskytují rychlý odkaz na obsah, který uživatel ve vaší aplikaci považuje za nejdůležitější. Pomocí této oblasti můžete rychle vytvořit odkaz na spuštění aplikace a okamžitě přejít na daný obsah.
  • Showcase the Latest Content – Rich Top Shelf content can draw a user into your app and make them want to use it more. Tuto možnost použijte jako oblast k prezentaci obsahu s nejvyšším hodnocením nebo nejnovějším obsahem.
  • Přizpůsobený obsah – Uživatelé umistí nejčastěji používané nebo oblíbené aplikace do horního řádku domovské obrazovky. K zobrazení obsahu, který by ho nejvíce zajímá, použijte horní polici.
  • Reklamy nejsou povolené – V horní polici se nesmí zobrazovat výhradně reklamy. Můžete zobrazit nejnovější nákupní obsah, ale neměly by se zobrazovat žádné informace o cenách.

Nastavení horního odkládacího obrázku

Pokud chcete nastavit top shelf image vyžadované pro váš projekt tvOS, postupujte následovně:

  1. V Průzkumník řešenípoklikejte a otevřete ho pro úpravy:

    Soubor Assets.xcassets

  2. V Editoru prostředkůrozbalte asset:

    Rozbalte asset Top Shelf Image (Obrázek s nejlepší policí).

  3. Klikněte na Top Shelf Image asset:

    Asset Top Shelf Image

  4. Klikněte na položku Apple TV 1x a vyberte soubor obrázku.

  5. Uložte provedené změny.

Obsah s dynamickou horní policí

Místo zobrazení statického obrázku s nejlepší policí může horní polička obsahovat dynamický řádek zaostřených položek nebo dynamickou sadu bannerů s posouváním. Oba tyto dynamické styly umožňují zvýraznit obsah poskytovaný vaší aplikací nebo přejít k nejčastěji používaným funkcím.

Řádek obsahu s oddíly

Tento dynamický typ obsahu Top Shelf představuje jeden řádek posouvání, zacílené položky volitelně rozdělené na oddíly. Obvykle se používá ke zvýraznění nového, oblíbeného nebo nedávno prohlížet obsah aplikace.

Obsah se prezentuje jako jeden vodorovný posouvání obsahu s popiskem, který se zobrazí pod vybranou aktuální součástí obsahu (na který se aktuálně zaměřuje). Pokud uživatel vybere danou část obsahu, spustí se vaše aplikace a měla by se přímo dostat do tohoto obsahu.

Bude potřeba mít následující velikosti obsahu:

Velikost Poster (2:3) Square (1:1) HDTV (16:9)
Skutečná velikost 404 × 608 px 608 × 608 px 908x512px
Sejf velikosti zóny 380 × 570 px 570 × 570 px 852x479px
Velikost bez zaměření 333x500px 500 × 500 px 782 × 440 px
Focused Size 380 × 570 px 570 × 570 px 852x479px

Apple pro řádek s oddílem obsahu nabízí následující návrhy:

  • Dokončete řádek – měli byste poskytnout dostatek obsahu, aby bylo možné vyplnit celou šířku obrazovky.
  • Škálování smíšených imagí – řádek s oddíly obsahu byl navržen tak, aby obsahoval kombinaci velikostí obrázků (ze seznamu uvedeného výše). Pokud ale použijete kombinaci velikostí obrázků, budete mít na paměti, že k normalizaci zobrazení obsahu se použije další škálování.

Posunutí proužkových proužků

V případě potřeby může aplikace Xamarin. tvOS prezentovat svůj obsah v horním police jako automatické posouvání a cyklicky shromažďování proužkových proužků, které téměř vyplňují obrazovku. Tento styl se obvykle používá k prezentaci formátovaného a nového obsahu, jako je nová televizní pořadová ukázka.

Kromě automatického posouvání může uživatel převzít kontrolu bannerů a posouvat se v obou směrech pomocí vzdáleného Siri. Když se v Siriete na dálkovém ovládání malý kulatý gesto, aktivuje se paralaxní efekt pro daný banner.

Obrázek banneru (extra roztažitelné)

Velikost Řešení
Skutečná velikost 1940x624px
velikost Sejf zóny 1740x620px
Nesoustředěná velikost 1740x560px
Prioritní velikost 1740x620px

Posunutí bannerů se dá zadat buď jako statický, .png nebo jako soubor ve vrstvách .lsr .

Společnost Apple poskytuje pro informační bannery s posouváním následující návrhy:

  • Množství obsahu – měli byste zadat minimálně tři (3) nápisy, které se budou pohybovat v přirozeném rozsahu. Měli byste použít více než osm (8) bannerů nebo pro koncového uživatele provést navigaci.
  • Text obsahu – Pokud banner vyžaduje, aby byl v obrázku banneru obsažený text. Pokud používáte vrstvené obrázky, měl by váš text být ve vrchní vrstvě.

Další informace o přidání rozšíření horní částice do vaší aplikace pro zajištění dynamického obsahu poličky najdete v referenčních informacích k rozhraní TVServices společnosti Apple.

Game Center image

Pokud je vaše aplikace Xamarin. tvOS hra a pokud jste zahrnuli Game Center podporu, budete potřebovat několik dalších prostředků imagí:

  • Ikony reputace – neprůhledný obrázek je nutný pro každý úspěch, který se automaticky ořízne na kruh. Ocenění jsou položky, které nelze zaměřit.
  • Kresba řídicího panelu – k dispozici může být volitelný obrázek, který se zobrazí v horní části řídicího panelu vaší aplikace v rámci Game Center. Tyto image se nezaměřují.
  • Tabulek výsledků kresby – pro každou tabulek výsledků, kterou vaše aplikace podporuje, je nutné zadat jednu (1) až tři obrázky poměru stran (3) 16:9. Můžou to být statické .png nebo vrstvené .lsr soubory. Obrázek tabulek výsledků je zaměřený na.
Velikost Ikony reputace Kresba řídicího panelu Tabulek výsledků kresby
Viditelná velikost 200x200px 923x150px Není k dispozici
Skutečná velikost 320x320px Není k dispozici 659x371px
velikost Sejf zóny Není k dispozici Není k dispozici 618x348px
Nesoustředěná 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 tématu Průvodce programováním Game Centerspolečnosti Apple.

Práce s obrázky

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

nastavení imagí Project Xamarin. tvOS

Jak je uvedeno výše, všechny aplikace tvOS vyžadují bitovou spouštěcí kopiia ikonu aplikace. Tato část se zabývá výběrem ikony spouštěcí image a aplikace pro projekt aplikace Xamarin. tvOS po jejich nastavení v katalogu assetů.

Postupujte následovně:

  1. V Průzkumník řešenídvakrát klikněte na položku a otevřete ji pro úpravy:

    Soubor info. plist

  2. V editoru info. plistvyberte katalog assetů (nakonfigurované výše v části Nastavení ikon aplikace ) pro ikony aplikace:

    Editor info. plist

  3. V dalším kroku vyberte katalog assetů (nakonfigurované výše v části nastavení spouštěcí bitové kopie ) pro spouštěcí image.

  4. Uložte provedené změny.

Souhrn

Tento článek pojednává o všech typech a velikostech imagí použitých v aplikaci Xamarin. tvOS. Jako první se týkaly spouštěcích imagí, vrstvených imagí, ikon aplikací, horních imagí na police a Game Center imagí. Pak pokryla práci s imagemi v aplikaci Xamarin. tvOS.