Vytvoření první Xamarin.Forms aplikace

  • Článek

Podrobné pokyny pro Windows

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nový > projekt soubor>... nebo stiskněte tlačítko Vytvořit nový projekt...

  2. Vyhledejte "Xamarin" nebo zvolte Mobilní z nabídky Typ projektu. Vyberte typ projektu Mobilní aplikace (Xamarin.Forms).

  3. Zvolte název projektu – v příkladu se používá "AwesomeApp".

  4. Klikněte na typ prázdného projektu a ujistěte se, že jsou vybrané Android a iOS:

    Prázdná aplikace pro Android a iOS

  5. Počkejte, až se balíčky NuGet obnoví (na stavovém řádku se zobrazí zpráva o dokončení obnovení).

  6. Nové instalace sady Visual Studio 2022 nebudou mít nainstalované sady Android SDK. Může se zobrazit výzva k instalaci nejnovější sady Android SDK:

    Instalace sady Android SDK

  7. Nové instalace sady Visual Studio 2022 nebudou mít nakonfigurovaný emulátor Androidu. Klikněte na šipku rozevíracího seznamu na tlačítku Ladit a zvolte Vytvořit Android Emulator a spusťte obrazovku pro vytvoření emulátoru:

    Rozevírací seznam Vytvoření emulátoru Androidu

  8. Na obrazovce pro vytvoření emulátoru použijte výchozí nastavení a klikněte na tlačítko Vytvořit :

    Obrazovka pro vytvoření emulátoru Androidu

  9. Vytvoření emulátoru se vrátí do okna Správce zařízení. Kliknutím na tlačítko Start spusťte nový emulátor:

    Emulátor Androidu v Správce zařízení

  10. Visual Studio 2022 by teď mělo zobrazovat název nového emulátoru na tlačítku Ladění :

    Název emulátoru Androidu na tlačítku Ladění

  11. Kliknutím na tlačítko Ladit sestavte a nasaďte aplikaci do emulátoru Androidu:

    Emulátor Androidu zobrazující aplikaci

Přizpůsobení aplikace

Aplikaci je možné přizpůsobit a přidat tak interaktivní funkce. Pokud chcete do aplikace přidat interakci uživatele, proveďte následující kroky:

  1. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Ladění aplikace v Androidu:

    Aplikace pro Android s tlačítkem

Vytvoření aplikace pro iOS v sadě Visual Studio 2022

Aplikaci pro iOS je možné sestavit a ladit ze sady Visual Studio se síťovým počítačem Mac. Další informace najdete v pokynech k nastavení.

Podrobné pokyny pro Windows

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nový > projekt soubor>... nebo stiskněte tlačítko Vytvořit nový projekt...

    Vytvoření nového projektu

  2. Vyhledejte "Xamarin" nebo zvolte Mobilní z nabídky Typ projektu. Vyberte typ projektu Mobilní aplikace :Xamarin.Forms

    Filtrování projektů Xamarin

  3. Zvolte název projektu – v příkladu se používá "AwesomeApp":

    Zvolte název projektu.

  4. Klikněte na typ prázdného projektu a ujistěte se, že jsou vybrané Android a iOS:

    Android a iOS s .NET Standard

  5. Počkejte, až se balíčky NuGet obnoví (na stavovém řádku se zobrazí zpráva o dokončení obnovení).

  6. Nové instalace sady Visual Studio 2019 nebudou mít nakonfigurovaný emulátor Androidu. Klikněte na šipku rozevíracího seznamu na tlačítku Ladit a zvolte Vytvořit Android Emulator a spusťte obrazovku pro vytvoření emulátoru:

    Rozevírací seznam Vytvoření emulátoru Androidu

  7. Na obrazovce pro vytvoření emulátoru použijte výchozí nastavení a klikněte na tlačítko Vytvořit :

    Obrazovka pro vytvoření emulátoru Androidu

  8. Vytvoření emulátoru se vrátí do okna Správce zařízení. Kliknutím na tlačítko Start spusťte nový emulátor:

    Emulátor Androidu v Správce zařízení

  9. Visual Studio 2019 by teď mělo zobrazovat název nového emulátoru na tlačítku Ladění :

    Název emulátoru Androidu na tlačítku Ladění

  10. Kliknutím na tlačítko Ladit sestavte a nasaďte aplikaci do emulátoru Androidu:

    Emulátor Androidu zobrazující aplikaci

Přizpůsobení aplikace

Aplikaci je možné přizpůsobit a přidat tak interaktivní funkce. Pokud chcete do aplikace přidat interakci uživatele, proveďte následující kroky:

  1. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Ladění aplikace v Androidu:

    Aplikace pro Android

Poznámka:

Ukázková aplikace obsahuje další interaktivní funkce, které nejsou popsané ve videu.

Vytvoření aplikace pro iOS v sadě Visual Studio 2019

Aplikaci pro iOS je možné sestavit a ladit ze sady Visual Studio se síťovým počítačem Mac. Další informace najdete v pokynech k nastavení.

Toto video popisuje proces sestavování a testování aplikace pro iOS pomocí sady Visual Studio 2019 ve Windows:

Podrobné pokyny pro Mac

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nové řešení souboru > ... nebo stiskněte tlačítko Nový projekt... a pak vyberte Víceplatformní > aplikace > Prázdné formuláře aplikace:

    Prázdná aplikace Forms

  2. Ujistěte se, že jsou vybrané Android a iOS :

    Android a iOS s .NET Standard

Poznámka:

Pro název aplikace a identifikátor organizace jsou podporované jenom znaky A-Z, a-z, _, .a čísla.

  1. Obnovte balíčky NuGet kliknutím pravým tlačítkem na řešení:

    Snímek obrazovky znázorňující obnovení balíčků NuGet vybraných z místní nabídky řešení

  2. Spusťte emulátor Androidu stisknutím tlačítka ladění (nebo spusťte spuštění > ladění).

  3. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Ladění aplikace v Androidu:

    Snímek obrazovky s emulátorem Androidu

  6. Po kliknutí pravým tlačítkem myši nastavíte iOS na spouštěný projekt:

    Nastavení spouštěcího projektu na iOS

  7. Aplikaci v iOSu můžete ladit výběrem simulátoru iOSu z rozevíracího seznamu.

Podrobné pokyny pro Mac

Postupujte podle těchto kroků společně s videem výše:

  1. Zvolte Nové řešení souboru > ... nebo stiskněte tlačítko Nový projekt... a pak vyberte Víceplatformní > aplikace > Prázdné formuláře aplikace:

    Prázdná aplikace Forms

  2. Ujistěte se, že jsou vybrané Android a iOS, a to se sdílením kódu .NET Standard:

    Android a iOS s .NET Standard

Poznámka:

Pro název aplikace a identifikátor organizace jsou podporované jenom znaky A-Z, a-z, _, .a čísla.

  1. Obnovte balíčky NuGet kliknutím pravým tlačítkem na řešení:

    Snímek obrazovky znázorňující obnovení balíčků NuGet vybraných z místní nabídky řešení

  2. Spusťte emulátor Androidu stisknutím tlačítka ladění (nebo spusťte spuštění > ladění).

  3. Upravte MainPage.xaml a přidejte tento KÓD XAML před konec :</StackLayout>

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. Upravte MainPage.xaml.cs a přidejte tento kód na konec třídy:

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Ladění aplikace v Androidu:

    Snímek obrazovky s emulátorem Androidu

  6. Po kliknutí pravým tlačítkem myši nastavíte iOS na spouštěný projekt:

    Nastavení spouštěcího projektu na iOS

  7. Ladění aplikace v iOSu:

    Aplikace iOS

Dokončený kód můžete zobrazit na GitHubu.

Další kroky

  • Rychlý start s jednou stránkou – Vytvoření více funkční aplikace
  • Xamarin.Forms Ukázky – Stažení a spuštění příkladů kódu a ukázkových aplikací
  • Vytváření ebooků Mobile Apps – podrobné kapitoly, které učí Xamarin.Forms vývoj, jsou k dispozici ve formátu PDF a zahrnují stovky dalších ukázek.