Spuštění obrazovek pro aplikace Xamarin.iOS

Tento článek vysvětluje, jak vytvořit úvodní obrazovku aplikace pro všechna zařízení s iOSem v libovolném rozlišení a orientaci pomocí jediné sjednocené scénáře.

Upozorňující

Návrhář pro iOS byl v sadě Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob, jak vytvářet uživatelská rozhraní pro iOS, je přímo na Macu se systémem Xcode. Další informace naleznete v tématu Navrhování uživatelských rozhraní pomocí Xcode.

Před iOSem 8 vyžadovalo vytvoření úvodní obrazovky pro aplikaci pro iOS, aby vývojář zadal prostředek obrázku pro každý z různých faktorů a rozlišení, ve kterých by mohla aplikace běžet. Od vydání iOS 8 však bylo možné použít jednu sjednocenou storyboard k vytvoření spouštěcí obrazovky, která ve všech případech vypadá správně.

Tento stručný návod popisuje, jak vytvořit úvodní obrazovku s scénářem poskytovanou ve výchozím nastavení v novém projektu nebo s scénářem přidaným ručně do existujícího projektu. Pak předvádí, jak pomocí iOS Designeru přidat zobrazení obrázku a popisek do scénáře, nastavit omezení těchto zobrazení a ověřit, že storyboard vypadá správně pro různá zařízení a orientaci.

Správa úvodních obrazovek pomocí scénářů

V iOSu 8 (a novějších) může vývojář vytvořit speciální sjednocenou storyboard, která místo použití jedné nebo více statických spouštěcích imagí poskytne úvodní obrazovku. Při vytváření scénáře spuštění v iOS Designeru použijte třídy velikostí a automatické rozložení k definování různých rozložení pro různá prostředí zobrazení. Pomocí tříd velikostí a automatického rozložení může vývojář vytvořit jednu úvodní obrazovku, která vypadá dobře na všech zařízeních a v prostředích zobrazení.

Visual Studio pro Mac

1. V Visual Studio pro Mac vytvořte nový projekt tak, že vyberete Soubor nové řešení a pak zvolíte Aplikaci s jedním zobrazením:>

   

   • Ve výchozím nastavení nový projekt obsahuje soubor LaunchScreen.storyboard , který definuje rozhraní Launch Screen.
   • Pokud chcete místo toho přidat scénář pro spuštění obrazovky do existujícího projektu, klikněte pravým tlačítkem na název projektu na panelu řešení a zvolte Přidat > nový soubor... a pak vyberte Spustit obrazovku:

   

   • Pojmenujte soubor LaunchScreen nebo jiný název podle vašeho výběru.

2. Nakonfigurujte projekt tak, aby pro úvodní obrazovku používal příslušnou storyboard:

   • Poklikejte na soubor Info.plist v oblasti řešení a otevřete ho pro úpravy.
   • V části Spustit obrázky se ujistěte, že je spouštěcí obrazovka nastavená na název příslušné scénáře:

   

   • Ve výchozím nastavení je nový projekt nakonfigurovaný tak, aby jako úvodní obrazovku používal launchScreen.storyboard .

3. Přidejte obrázek do katalogu assetů Assets.xcassets , aby byl k dispozici pro použití na úvodní obrazovce. Další informace najdete v části Přidání obrázků do sady obrázků katalogu assetů v průvodci zobrazením obrázku .

4. Otevřete LaunchScreen.storyboard pro úpravy tak, že na ni poklikáním na panelu řešení.

5. Zvolte zařízení a orientaci, na které se má zobrazit náhled scénáře pro spuštění obrazovky v iOS Designeru. Otevřete panel pro výběr zařízení na dolním panelu nástrojů a vyberte i Telefon 4S a Na výšku.

   

   • Všimněte si, že výběrem zařízení a orientace se změní jenom způsob zobrazení náhledu návrhu v iOS Designeru. Bez ohledu na výběr zde se nově přidaná omezení použijí ve všech zařízeních a orientacích, pokud není tlačítko Upravit vlastnosti použito k určení jinak.

6. Nastavte barvu pozadí hlavního zobrazení kontroleru zobrazení. Vyberte zobrazení kliknutím uprostřed kontroleru zobrazení a úpravou barvy pozadí pomocí oblasti Vlastnosti:

   

7. Přidejte zobrazení obrázku na úvodní obrazovku a nastavte jeho zdrojový obrázek:

   • Přetáhněte zobrazení obrázku z panelunástrojů do středu zobrazení.
   • Když je vybrané zobrazení obrázku, v oddílu Widget v Oblasti vlastností nastavte vlastnost Obrázek na Sadu obrázků již přidán do katalogu assetů Assets.xcassets . Podle potřeby přemísťujte zobrazení obrázku a jeho velikost:

   

8. Přidejte popisekpod zobrazení obrázku a pomocí panelu Vlastností nastavte jeho atributy:

   

9. Pomocí pravého tlačítka na panelu nástrojů Omezení přepněte do režimu úprav omezení:

   

10. Přidejte omezení do zobrazení obrázku, nastavte jeho výšku a šířku a vodorovně a svisle na střed:

    

    • Další podrobnosti o tom, jak přidat omezení, najdete v tématu Automatické rozložení pomocí Xamarin Designeru pro iOS.

11. Přidejte omezení k popisku, vodorovně ho zarovnáte na střed, dejte jí výšku a šířku a umístěte ji svisle ze zobrazení obrázku na pevnou vzdálenost:

    

12. Otestujte další zařízení a orientaci a ověřte, že návrh vypadá podle očekávání ve všech scénářích. V případech, kdy je potřeba provést úpravy pro konkrétní zařízení nebo orientaci, použijte tlačítko Upravit vlastnosti a přidejte omezení pro konkrétní třídy velikostí:

    

13. Uložte změny do scénáře. Spusťte aplikaci na simulátoru nebo zařízení a při spuštění aplikace se zobrazí obrazovka pro spuštění.

Visual Studio

1. Vytvoření nového projektu V sadě Visual Studio vyberte Soubor > nový > projekt > Visual C# > i Telefon a iPad > aplikace pro iOS (Xamarin):>

   

   Vyberte šablonu aplikace s jedním zobrazením a klikněte na OK:

   

2. Pokud v Průzkumník řešení existuje soubor Resources > LaunchScreen.xib, odstraňte ho tak, že na něj kliknete pravým tlačítkem myši a zvolíte Odstranit. Tento soubor bude v dalším kroku nahrazen scénářem.

3. Vytvořte storyboard, který se použije jako úvodní obrazovka. V Průzkumník řešení klikněte pravým tlačítkem myši na Projekt a zvolte Přidat > novou položku... a potom prázdnou storyboard. Pojmenujte tuto storyboard LaunchScreen.storyboard a klikněte na Přidat:

   

4. Nakonfigurujte projekt tak, aby jako scénář spouštěcí obrazovky používal LaunchScreen.storyboard :

   • Poklikáním na soubor Info.plist v Průzkumník řešení ho otevřete pro úpravy.
   • Na kartě Vizuální prostředky nastavte obrazovku Launch Screen na LaunchScreen.

   

5. Přidejte obrázek do katalogu assetů v projektu, aby byl k dispozici pro použití na úvodní obrazovce:

   • V Průzkumník řešení klikněte pravým tlačítkem na Katalogy prostředků a vyberte Přidat katalog assetů. Pojmenujte tyto nové assety katalogu assetů:

   

   • Do katalogu assetů přidejte novou sadu obrázků, jak je popsáno v části Přidání obrázků do sady obrázků katalogu assetů v průvodci zobrazením obrázku.

6. Otevřete LaunchScreen.storyboardpro úpravy tak, že na ni poklikáním v Průzkumník řešení.

   • K úpravě souboru Storyboard potřebuje Visual Studio aktivní připojení k hostiteli sestavení Mac. Podrobnosti najdete v Připojení příručky pro Mac.

7. Zvolte zařízení a orientaci, na které se má zobrazit náhled scénáře pro spuštění obrazovky v iOS Designeru. Otevřete panel pro výběr zařízení na dolním panelu nástrojů a vyberte i Telefon 4S a Na výšku:

   

   • Všimněte si, že výběrem zařízení a orientace se změní jenom způsob zobrazení náhledu návrhu v iOS Designeru. Bez ohledu na výběr zde se nově přidaná omezení použijí ve všech zařízeních a orientacích, pokud není tlačítko Upravit vlastnosti použito k určení jinak.

8. Přidejte do scénáře kontroler zobrazení přetažením z panelu nástrojů na návrhovou plochu:

   

9. Nastavte barvu pozadí hlavního zobrazení kontroleru zobrazení. Vyberte zobrazení kliknutím uprostřed kontroleru zobrazení a úpravou barvy pozadí pomocí okna Vlastnosti:

   

10. Přidejte zobrazení obrázku na úvodní obrazovku a nastavte jeho zdrojový obrázek:

    • Přetáhněte zobrazení obrázku ze sady nástrojů do středu zobrazení.
    • Pokud je zobrazení obrázků stále vybrané, v části Widget okna Vlastnosti nastavte vlastnost Obrázek na Sadu obrázků, která už byla přidána do katalogu assetů. Podle potřeby přemísťujte zobrazení obrázku a jeho velikost:

    

11. Přidejte popisek pod zobrazení obrázku:

    • Přetáhněte popisek ze sady nástrojů na návrhovou plochu a umístěte ho pod zobrazení obrázku.
    • Nastavte atributy popisku pomocí okna Vlastnosti:

    

12. Pomocí pravého tlačítka na panelu nástrojů Omezení přepněte do režimu úprav omezení:

    

13. Přidejte omezení do zobrazení obrázku, nastavte jeho výšku a šířku a vodorovně a svisle na střed:

    

    • Informace o přidávání omezení najdete v tématu Automatické rozložení pomocí Xamarin Designeru pro iOS.

14. Přidejte omezení k popisku, vodorovně ho zarovnáte na střed, dejte jí výšku a šířku a umístěte ji svisle ze zobrazení obrázku na pevnou vzdálenost:

    

15. Otestujte další zařízení a orientaci a ověřte, že návrh vypadá podle očekávání ve všech scénářích. V případech, kdy je potřeba provést úpravy pro konkrétní zařízení nebo orientaci, použijte tlačítko Upravit vlastnosti a přidejte omezení pro konkrétní třídy velikostí:

    

16. Uložte změny do scénáře. Spusťte aplikaci na simulátoru nebo zařízení a při spuštění aplikace se zobrazí obrazovka pro spuštění.

Poznámka:

Scénář používaný jako spouštěcí obrazovka musí obsahovat pouze jednoduché integrované prvky uživatelského rozhraní a nemůže provádět žádné výpočty ani odvozovat z vlastní třídy.

Další informace o vytvoření úvodní obrazovky s jednotným scénářem najdete v části Dynamické obrazovky průvodce jednotným scénářem.

Migrace na scénáře spuštění obrazovky

Visual Studio pro Mac

Při aktualizaci existující aplikace tak, aby používala scénáře pro spouštěcí obrazovky, klikněte pravým tlačítkem na název projektu v Průzkumník řešení a vyberte Přidat>nový soubor.... Vyberte obrazovku Pro spuštění iOS>a klikněte na tlačítko Nový:

Potom poklikejte na Info.plist soubor v Průzkumník řešení a otevřete ho pro úpravy. V části Úvodní obrazovka vyberte nový soubor storyboardu vytvořený výše.

Pokud chcete novou storyboard použít jako úvodní obrazovku, postupujte takto:

1. Poklikáním na Info.plist soubor v Průzkumník řešení ho otevřete pro úpravy.

2. Posuňte se do části Univerzální spouštěcí obrázky editoru, otevřete rozevírací seznam Spustit obrazovku a vyberte název scénáře vytvořeného výše:

   

Visual Studio

1. Klikněte pravým tlačítkem na název projektu v Průzkumník řešení a vyberte Přidat>nový soubor...:

   

2. Zadejte název úvodní obrazovky a klikněte na tlačítko Přidat :

   

3. V Průzkumník řešení poklikejte na nově vytvořený soubor scénáře a otevřete ho pro úpravy.

4. Ujistěte se, že je třída velikost nastavena na any:any a View As is Generic:

   

5. Sestaví úvodní obrazovku z tříd velikostí, jednoduchých prvků uživatelského rozhraní (například UIImageView) a obrázků, které jste zahrnuli do sady aplikací:

   

6. Uložte změny do scénáře.

Související odkazy

• Obrazovky dynamického spuštění (ukázka)
• Sjednocené scénáře
• Základy iOS Designeru
• Přidání obrázků do sady imagí katalogu assetů
• Automatické rozložení pomocí Xamarin Designeru pro iOS
• Pokyny pro lidské rozhraní: Spouštěcí obrazovka