Hello, Android: rychlý StartHello, Android: Quickstart

V tomto průvodci dvěma částmi vytvoříte svou první aplikaci Xamarin. Android pomocí sady Visual Studio a naučíte se pochopit základy vývoje aplikací pro Android pomocí Xamarin.In this two-part guide, you will build your first Xamarin.Android application with Visual Studio and develop an understanding of the fundamentals of Android application development with Xamarin.

Stažení ukázky stažení ukázkyDownload Sample Download the sample

Vytvoříte aplikaci, která překládá alfanumerické telefonní číslo (zadané uživatelem) do číselného telefonního čísla a zobrazí se uživateli číselné telefonní číslo.You will create an application that translates an alphanumeric phone number (entered by the user) into a numeric phone number and display the numeric phone number to the user. Konečná aplikace vypadá takto:The final application looks like this:

Snímek obrazovky aplikace překladu telefonního čísla po dokončení.Screenshot of phone number translation app when it is complete.

Požadavky pro WindowsWindows requirements

Chcete-li postupovat podle tohoto návodu, budete potřebovat následující:To follow along with this walkthrough, you will need the following:

  • Windows 10.Windows 10.

  • Visual Studio 2019 nebo Visual Studio 2017 (verze 15,8 nebo novější): Community, Professional nebo Enterprise.Visual Studio 2019 or Visual Studio 2017 (version 15.8 or later): Community, Professional, or Enterprise.

Požadavky pro macOSmacOS requirements

Chcete-li postupovat podle tohoto návodu, budete potřebovat následující:To follow along with this walkthrough, you will need the following:

  • Nejnovější verze Visual Studio pro Mac.The latest version of Visual Studio for Mac.

  • Počítač Mac se systémem macOS High Sierra (10,13) nebo novější.A Mac running macOS High Sierra (10.13) or later.

Tento návod předpokládá, že je na vaší platformě, kterou si zvolíte, nainstalovaná a spuštěná nejnovější verze Xamarin. Androidu.This walkthrough assumes that the latest version of Xamarin.Android is installed and running on your platform of choice. Průvodce instalací Xamarin. Android najdete v příručkách k instalaci Xamarin. Android .For a guide to installing Xamarin.Android, refer to the Xamarin.Android Installation guides.

Konfigurace emulátorůConfiguring emulators

Pokud používáte emulátor pro Android, doporučujeme nakonfigurovat emulátor, aby používal hardwarovou akceleraci.If you are using the Android emulator, we recommend that you configure the emulator to use hardware acceleration. Pokyny ke konfiguraci hardwarové akcelerace jsou k dispozici v hardwarové akceleraci pro výkon emulátoru.Instructions for configuring hardware acceleration are available in Hardware Acceleration for Emulator Performance.

Vytvoření projektuCreate the project

Spusťte Visual Studio.Start Visual Studio. Kliknutím na soubor > nový > projekt vytvořte nový projekt.Click File > New > Project to create a new project.

V dialogovém okně Nový projekt klikněte na šablonu aplikace pro Android .In the New Project dialog, click the Android App template. Pojmenujte nový projekt Phoneword a klikněte na OK:Name the new project Phoneword and click OK:

Nový projekt je PhonewordNew project is Phoneword

V dialogovém okně Nová aplikace pro Android klikněte na prázdná aplikace a kliknutím na OK vytvořte nový projekt:In the New Android App dialog, click Blank App and click OK to create the new project:

Výběr šablony prázdné aplikaceSelect the Blank App template

Vytvoření rozloženíCreate a layout

Tip

Novější verze sady Visual Studio podporují otevírání souborů. XML uvnitř Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

V Android Designer jsou podporovány soubory. axml i. XML.Both .axml and .xml files are supported in the Android Designer.

Po vytvoření nového projektu rozbalte složku Resources (prostředky ) a poté složku rozložení v Průzkumník řešení.After the new project is created, expand the Resources folder and then the layout folder in the Solution Explorer. Poklikejte na activity_main. axml , aby se otevřela v Android Designer.Double-click activity_main.axml to open it in the Android Designer. Toto je soubor rozložení pro obrazovku aplikace:This is the layout file for the app's screen:

Otevřít soubor axml aktivityOpen activity axml file

Tip

Novější verze sady Visual Studio obsahují mírně odlišnou šablonu aplikace.Newer releases of Visual Studio contain a slightly different app template.

  1. Místo activity_main. axml je rozložení v content_main. axml.Instead of activity_main.axml, the layout is in content_main.axml.
  2. Výchozí rozložení bude RelativeLayout .The default layout will be a RelativeLayout. Zbývající kroky na této stránce, aby fungovaly, byste měli změnit <RelativeLayout> na značku <LinearLayout> a přidat do android:orientation="vertical" LinearLayout počáteční značky další atribut.For the rest of the steps on this page to work you should change the <RelativeLayout> tag to <LinearLayout> and add another attribute android:orientation="vertical" to the LinearLayout opening tag.

V panelu nástrojů (vlevo) zadejte text do vyhledávacího pole a přetáhněte text (velký) widget na návrhovou plochu (oblast uprostřed):From the Toolbox (the area on the left), enter text into the search field and drag a Text (Large) widget onto the design surface (the area in the center):

Přidat widget pro velký textAdd large text widget

Pomocí ovládacího prvku text (velký) , který je vybrán na návrhové ploše, pomocí podokna vlastnosti změňte Text vlastnost text (velké) pomůcky na Enter a Phoneword: :With the Text (Large) control selected on the design surface, use the Properties pane to change the Text property of the Text (Large) widget to Enter a Phoneword::

Nastavení vlastností velkých textůSet large text properties

Přetáhněte widget pro prostý text ze sady nástrojů na návrhovou plochu a umístěte ho pod text (velký) widget.Drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. Umístění widgetu se neobjeví, dokud přesunete ukazatel myši na místo v rozložení, které může widget přijmout.Placement of the widget will not occur until you move the mouse pointer to a place in the layout that can accept the widget. Na snímcích obrazovky níže nelze widget umístit (jak je vidět vlevo), dokud se ukazatel myši nepřesune přímo pod předchozí TextView (jak je znázorněno na pravé straně):In the screenshots below, the widget cannot be placed (as seen on the left) until the mouse pointer is moved just below the previous TextView (as shown on the right):

Myš indikuje, kde se dá widget umístit.Mouse indicates where widget can be placed

Když se běžný text ( EditText widget) umístí správně, zobrazí se na následujícím snímku obrazovky:When the Plain Text (an EditText widget) is placed correctly, it will appear as illustrated in the following screenshot:

Přidat widget pro prostý textAdd plain text widget

Pomocí widgetu pro prostý text vybraný na návrhové ploše můžete pomocí podokna vlastnosti změnit Id vlastnost widgetu pro prostý text na @+id/PhoneNumberText a změnit Text vlastnost na 1-855-XAMARIN :With the Plain Text widget selected on the design surface, use the Properties pane to change the Id property of the Plain Text widget to @+id/PhoneNumberText and change the Text property to 1-855-XAMARIN:

Nastavit vlastnosti prostého textuSet plain text properties

Přetáhněte tlačítko ze sady nástrojů na návrhovou plochu a umístěte ho pod widget pro prostý text :Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Přetáhněte tlačítko přeložit na návrhDrag translate button to the design

Pomocí tlačítka vybraného na návrhové ploše použijte podokno vlastnosti a změňte jeho Text vlastnost na Translate Id @+id/TranslateButton :With the Button selected on the design surface, use the Properties pane to change its Text property to Translate and its Id property to @+id/TranslateButton:

Nastavit vlastnosti tlačítka pro posunutíSet translate button properties

Přetáhněte TextView ze sady nástrojů na návrhovou plochu a umístěte ji pod pomůcku tlačítka .Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Změňte Text vlastnost TextView na prázdný řetězec a nastavte její Id vlastnost na @+id/TranslatedPhoneword :Change the Text property of the TextView to an empty string and set its Id property to @+id/TranslatedPhoneword:

Nastavte vlastnosti v textovém zobrazení.Set the properties on the text view.

Stisknutím kombinace kláves CTRL + S uložte práci.Save your work by pressing CTRL+S.

Napsat nějaký kódWrite some code

Dalším krokem je přidání kódu, který přeloží telefonní čísla z alfanumerických na číselnou.The next step is to add some code to translate phone numbers from alphanumeric to numeric. Přidejte do projektu nový soubor tak, že kliknete pravým tlačítkem na projekt Phoneword v podokně Průzkumník řešení a zvolíte Přidat > novou položku... , jak je znázorněno níže:Add a new file to the project by right-clicking the Phoneword project in the Solution Explorer pane and choosing Add > New Item... as shown below:

Přidat novou položkuAdd new item

V dialogovém okně Přidat novou položku vyberte Visual C# > kód > souboru kódu a pojmenujte nový soubor kódu PhoneTranslator.cs:In the Add New Item dialog, select Visual C# > Code > Code File and name the new code file PhoneTranslator.cs:

Přidat PhoneTranslator.csAdd PhoneTranslator.cs

Tím se vytvoří nová prázdná třída jazyka C#.This creates a new empty C# class. Do tohoto souboru vložte následující kód:Insert the following code into this file:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                {
                    newNumber.Append(c);
                }
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

Uložte změny do souboru PhoneTranslator.cs kliknutím na soubor > Uložit (nebo stisknutím klávesy CTRL + S) a pak soubor zavřete.Save the changes to the PhoneTranslator.cs file by clicking File > Save (or by pressing CTRL+S), then close the file.

Navedení uživatelského rozhraníWire up the user interface

Dalším krokem je přidání kódu pro vedení uživatelského rozhraní vložením kódu do MainActivity třídy.The next step is to add code to wire up the user interface by inserting backing code into the MainActivity class. Začněte propojením tlačítka přeložit .Begin by wiring up the Translate button. Ve MainActivity třídě Najděte OnCreate metodu.In the MainActivity class, find the OnCreate method. Dalším krokem je přidání kódu tlačítka dovnitř OnCreate pod base.OnCreate(savedInstanceState) SetContentView(Resource.Layout.activity_main) volání a.The next step is to add the button code inside OnCreate, below the base.OnCreate(savedInstanceState) and SetContentView(Resource.Layout.activity_main) calls. Nejprve upravte kód šablony tak, aby OnCreate Metoda vypadala takto:First, modify the template code so that the OnCreate method resembles the following:

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;

namespace Phoneword
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            // New code will go here
        }
    }
}

Získejte odkaz na ovládací prvky, které byly vytvořeny v souboru rozložení prostřednictvím Android Designer.Get a reference to the controls that were created in the layout file via the Android Designer. Přidejte následující kód do OnCreate metody, po volání SetContentView :Add the following code inside the OnCreate method, after the call to SetContentView:

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneword);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Přidejte kód, který reaguje na uživatelské stisknutí tlačítka přeložit .Add code that responds to user presses of the Translate button. Do metody přidejte následující kód OnCreate (po řádcích přidaných v předchozím kroku):Add the following code to the OnCreate method (after the lines added in the previous step):

// Add code to translate number
translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Uložte práci výběrem souboru > Uložit vše (nebo stisknutím kombinace kláves CTRL + SHIFT-S) a sestavte aplikaci výběrem možnosti sestavit > znovu sestavit řešení (nebo stisknutím kombinace kláves CTRL + SHIFT + B).Save your work by selecting File > Save All (or by pressing CTRL-SHIFT-S) and build the application by selecting Build > Rebuild Solution (or by pressing CTRL-SHIFT-B).

Pokud dojde k chybám, Projděte si předchozí kroky a opravte všechny chyby, dokud se aplikace úspěšně nevytvoří.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Pokud obdržíte chybu sestavení, například, prostředek v aktuálním kontextu neexistuje, ověřte, že název oboru názvů v MainActivity.cs odpovídá názvu projektu ( Phoneword ) a pak zcela znovu sestavte řešení.If you get a build error such as, Resource does not exist in the current context, verify that the namespace name in MainActivity.cs matches the project name (Phoneword) and then completely rebuild the solution. Pokud se i nadále zobrazí chyby sestavení, ověřte, zda jste nainstalovali nejnovější aktualizace sady Visual Studio.If you still get build errors, verify that you have installed the latest Visual Studio updates.

Nastavení názvu aplikaceSet the app name

Nyní byste měli mít funkční aplikaci, kterou je – čas nastavit název aplikace.You should now have a working application – it's time to set the name of the app. Rozbalte složku Values (do složky Resources ) a otevřete soubor strings.xml.Expand the values folder (inside the Resources folder) and open the file strings.xml. Řetězec názvu aplikace změňte na Phone Word , jak je znázorněno zde:Change the app name string to Phone Word as shown here:

<resources>
    <string name="app_name">Phone Word</string>
    <string name="action_settings">Settings</string>
</resources>

Spuštění aplikaceRun the app

Otestujte aplikaci tak, že ji spustíte na zařízení s Androidem nebo v emulátoru.Test the application by running it on an Android device or emulator. Klepnutím na tlačítko přeložit můžete přeložit 1-855 – XAMARIN do telefonního čísla:Tap the TRANSLATE button to translate 1-855-XAMARIN into a phone number:

Snímek obrazovky se spuštěnou aplikacíScreenshot of app running

Pokud chcete spustit aplikaci na zařízení s Androidem, přečtěte si téma nastavení zařízení pro vývoj.To run the app on an Android device, see how to set up your device for development.

Spusťte Visual Studio pro Mac ze složky aplikace nebo z Spotlightu.Launch Visual Studio for Mac from the Applications folder or from Spotlight.

Klikněte na Nový projekt... a vytvořte nový projekt.Click New Project... to create a new project.

V dialogu Zvolit šablonu pro nový projekt klikněte na Android > App a vyberte šablonu aplikace pro Android .In the Choose a template for your new project dialog, click Android > App and select the Android App template. Klikněte na Next (Další).Click Next.

Výběr šablony aplikace pro AndroidChoose the Android App template

V dialogu Konfigurovat aplikaci pro Android pojmenujte novou aplikaci Phoneword a klikněte na Další.In the Configure your Android app dialog, name the new app Phoneword and click Next.

Konfigurace aplikace pro AndroidConfigure the Android App

V dialogu Konfigurovat novou aplikaci pro Android ponechte názvy řešení a projektu nastavené na Phoneword a kliknutím na vytvořit vytvořte projekt.In the Configure your new Android App dialog, leave the Solution and Project names set to Phoneword and click Create to create the project.

Vytvoření rozloženíCreate a layout

Tip

Novější verze sady Visual Studio podporují otevírání souborů. XML uvnitř Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

V Android Designer jsou podporovány soubory. axml i. XML.Both .axml and .xml files are supported in the Android Designer.

Po vytvoření nového projektu rozbalte složku Resources (prostředky ) a poté složku rozložení na panelu řešení .After the new project is created, expand the Resources folder and then the layout folder in the Solution pad. Poklikejte na Main. axml , aby se otevřela v Android Designer.Double-click Main.axml to open it in the Android Designer. Toto je soubor rozložení pro obrazovku při zobrazení v Android Designer:This is the layout file for the screen when it is viewed in the Android Designer:

Otevřít Main. axmlOpen Main.axml

Vyberte Hello World, klikněte na mě!Select the Hello World, Click Me! Na návrhové ploše klikněte na tlačítko odstranit a odstraňte ho stisknutím klávesy Delete .Button on the design surface and press the Delete key to remove it.

V panelu nástrojů (v pravé části) zadejte text do vyhledávacího pole a přetáhněte text (velký) widget na návrhovou plochu (oblast uprostřed):From the Toolbox (the area on the right), enter text into the search field and drag a Text (Large) widget onto the design surface (the area in the center):

Přidat widget pro velký textAdd large text widget

S pomůckou text (Velká) , kterou jste vybrali na návrhové ploše, můžete pomocí panelu vlastnosti změnit Text vlastnost textové (velké) pomůcky na, jak je Enter a Phoneword: znázorněno níže:With the Text (Large) widget selected on the design surface, you can use the Properties pad to change the Text property of the Text (Large) widget to Enter a Phoneword: as shown below:

Nastavit vlastnosti pomůcky velkých textůSet large text widget properties

Dále přetáhněte widget s prostým textem ze sady nástrojů na návrhovou plochu a umístěte ji pod textovou (velkou) pomůcku.Next, drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. Všimněte si, že můžete použít vyhledávací pole, které vám pomůžou najít widgety podle jména:Notice that you can use the search field to help locate widgets by name:

Přidat widget pro prostý textAdd plain text widget

Když je widget s prostým textem vybraný na návrhové ploše, můžete pomocí panelu vlastností změnit Id vlastnost widgetu pro prostý text na @+id/PhoneNumberText a změnit Text vlastnost na 1-855-XAMARIN :With the Plain Text widget selected on the design surface, you can use the Properties pad to change the Id property of the Plain Text widget to @+id/PhoneNumberText and change the Text property to 1-855-XAMARIN:

Nastavit vlastnosti widgetu pro prostý textSet plain text widget properties

Přetáhněte tlačítko ze sady nástrojů na návrhovou plochu a umístěte ho pod widget pro prostý text :Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Přidání tlačítkaAdd a button

Pomocí tlačítka vybraného na návrhové ploše můžete pomocí panelu vlastnosti změnit Id vlastnost tlačítka na hodnotu @+id/TranslateButton a změnit Text vlastnost na Translate :With the Button selected on the design surface, you can use the Properties pad to change the Id property of the Button to @+id/TranslateButton and change the Text property to Translate:

Konfigurovat jako tlačítko přeložitConfigure as the translate button

Přetáhněte TextView ze sady nástrojů na návrhovou plochu a umístěte ji pod pomůcku tlačítka .Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Když je vybraná možnost TextView , nastavte id vlastnost TextView na @+id/TranslatedPhoneWord a změňte na text prázdný řetězec:With the TextView selected, set the id property of the TextView to @+id/TranslatedPhoneWord and change the text to an empty string:

Nastavte vlastnosti v textovém zobrazení.Set the properties on the text view.

Stisknutím ⌘ + S uložte práci.Save your work by pressing ⌘ + S.

Napsat nějaký kódWrite some code

Nyní přidejte nějaký kód pro překlad telefonních čísel z alfanumerických na číslo.Now, add some code to translate phone numbers from alphanumeric to numeric. Kliknutím na ikonu ozubeného kolečka vedle projektu Phoneword na panelu řešení a zvolením možnosti Přidat > nový soubor přidejte do projektu nový soubor...:Add a new file to the project by clicking the gear icon next to the Phoneword project in the Solution pad and choosing Add > New File...:

Přidat do projektu nový souborAdd a new file to the project

V dialogovém okně nový soubor vyberte Obecné > prázdná třída, pojmenujte nový soubor PhoneTranslator a klikněte na Nový.In the New File dialog, select General > Empty Class, name the new file PhoneTranslator, and click New. Tím se vytvoří nová prázdná třída C# pro nás.This creates a new empty C# class for us.

Odeberte všechny kódy šablon v nové třídě a nahraďte ji následujícím kódem:Remove all of the template code in the new class and replace it with the following code:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                {
                    newNumber.Append(c);
                }
                else
                {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

Uložte změny do souboru PhoneTranslator.cs kliknutím na soubor > Uložit (nebo stisknutím ⌘ + S) a pak soubor zavřete.Save the changes to the PhoneTranslator.cs file by choosing File > Save (or by pressing ⌘ + S), then close the file. Zajistěte, aby se při opětovném sestavování řešení nedocházelo k chybám při kompilaci.Ensure that there are no compile-time errors by rebuilding the solution.

Navedení uživatelského rozhraníWire up the user interface

Dalším krokem je přidání kódu pro vedení uživatelského rozhraní přidáním záložního kódu do MainActivity třídy.The next step is to add code to wire up the user interface by adding the backing code into the MainActivity class. Dvojitým kliknutím na MainActivity.cs v oblast řešení ji otevřete.Double-click MainActivity.cs in the Solution Pad to open it.

Začněte přidáním obslužné rutiny události do tlačítka přeložit .Begin by adding an event handler to the Translate button. Ve MainActivity třídě Najděte OnCreate metodu.In the MainActivity class, find the OnCreate method. Přidejte kód tlačítka dovnitř OnCreate pod base.OnCreate(bundle) SetContentView (Resource.Layout.Main) volání a.Add the button code inside OnCreate, below the base.OnCreate(bundle) and SetContentView (Resource.Layout.Main) calls. Odeberte všechna existující kód pro zpracování tlačítka (tj. kód, který Resource.Id.myButton pro něj odkazuje a vytvoří obslužnou rutinu kliknutí) tak, aby OnCreate Metoda vypadala takto:Remove any existing button handling code (i.e., code that references Resource.Id.myButton and creates a click handler for it) so that the OnCreate method resembles the following:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Our code will go here
        }
    }
}

Dále je vyžadován odkaz na ovládací prvky, které byly vytvořeny v souboru rozložení pomocí Android Designer.Next, a reference is needed to the controls that were created in the layout file with the Android Designer. Do metody přidejte následující kód OnCreate (po volání SetContentView ):Add the following code inside the OnCreate method (after the call to SetContentView):

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneWord);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Přidejte kód, který reaguje na uživatelské stisknutí tlačítka přeložit přidáním následujícího kódu do OnCreate metody (po řádcích přidaných v posledním kroku):Add code that responds to user presses of the Translate button by adding the following code to the OnCreate method (after the lines added in the last step):

// Add code to translate number
string translatedNumber = string.Empty;

translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    translatedNumber = PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Uložte svoji práci a sestavte aplikaci tak, že vyberete sestavit > sestavit vše (nebo stisknutím ⌘ + B).Save your work and build the application by selecting Build > Build All (or by pressing ⌘ + B). Pokud se aplikace zkompiluje, obdržíte zprávu o úspěchu na začátku Visual Studio pro Mac:If the application compiles, you will get a success message at the top of Visual Studio for Mac:

Pokud dojde k chybám, Projděte si předchozí kroky a opravte všechny chyby, dokud se aplikace úspěšně nevytvoří.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Pokud obdržíte chybu sestavení, například, prostředek v aktuálním kontextu neexistuje, ověřte, že název oboru názvů v MainActivity.cs odpovídá názvu projektu ( Phoneword ) a pak zcela znovu sestavte řešení.If you get a build error such as, Resource does not exist in the current context, verify that the namespace name in MainActivity.cs matches the project name (Phoneword) and then completely rebuild the solution. Pokud se i nadále zobrazí chyby sestavení, ověřte, že máte nainstalované nejnovější aktualizace Xamarin. Android a Visual Studio pro Mac.If you still get build errors, verify that you have installed the latest Xamarin.Android and Visual Studio for Mac updates.

Nastavení popisku a ikony aplikaceSet the label and app icon

Teď, když máte funkční aplikaci, je čas přidat vylepšení dokončí!Now that you have a working application, it's time to add the finishing touches! Začněte úpravou Label pro MainActivity .Start by editing the Label for MainActivity. V Label horní části obrazovky se zobrazí Android, aby uživatelé věděli, kde jsou v aplikaci.The Label is what Android displays at the top of the screen to let users know where they are in the application. V horní části MainActivity třídy změňte na, jak je Label Phone Word znázorněno zde:At the top of the MainActivity class, change the Label to Phone Word as shown here:

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

Nyní je čas nastavit ikonu aplikace.Now it's time to set the application icon. Ve výchozím nastavení Visual Studio pro Mac poskytne pro projekt výchozí ikonu.By default, Visual Studio for Mac will provide a default icon for the project. Odstraňte tyto soubory z řešení a nahraďte je jinou ikonou.Delete these files from the solution, and replace them with a different icon. Rozbalte složku Resources (prostředky ) v oblast řešení.Expand the Resources folder in the Solution Pad. Všimněte si, že existuje pět složek s předponou mipmap a že každá z těchto složek obsahuje jeden soubor Icon.png :Notice that there are five folders that are prefixed with mipmap-, and that each of these folders contains a single Icon.png file:

mipmap – složky a soubory Icon.pngmipmap- folders and Icon.png files

Je nutné odstranit všechny tyto soubory ikon z projektu.It is necessary to delete each of these icon files from the project. Klikněte pravým tlačítkem na každý z Icon.png souborů a v místní nabídce vyberte Odebrat :Right click on each of Icon.png files, and select Remove from the context menu:

Odstranit výchozí Icon.pngDelete default Icon.png

V dialogovém okně klikněte na tlačítko Odstranit .Click on the Delete button in the dialog.

Pak stáhněte a rozbalte sadu ikon aplikace Xamarin.Next, download and unzip Xamarin App Icons set. Tento soubor zip obsahuje ikony pro aplikaci.This zip file holds the icons for the application. Každá ikona je vizuálně shodná, ale u různých rozlišení se vykresluje správně na různých zařízeních s různou hustotou obrazovky.Each icon is visually identical but at different resolutions it renders correctly on different devices with different screen densities. Sada souborů musí být zkopírována do projektu Xamarin. Android.The set of files must be copied into the Xamarin.Android project. V Visual Studio pro Mac v oblast řešení klikněte pravým tlačítkem myši na složku mipmap-HDPI a vyberte Přidat > přidat soubory:In Visual Studio for Mac, in the Solution Pad, right-click the mipmap-hdpi folder and select Add > Add Files:

Přidat souboryAdd files

V dialogovém okně Výběr přejděte do adresáře getAdApp ikony Xamarin a otevřete složku mipmap-HDPI .From the selection dialog, navigate to the unzipped Xamarin AdApp Icons directory and open the mipmap-hdpi folder. Vyberte Icon.png a klikněte na otevřít.Select Icon.png and click Open.

V dialogovém okně Přidat soubor do složky vyberte možnost zkopírovat soubor do adresáře a klikněte na tlačítko OK:In the Add File to Folder dialog box, select Copy the file into the directory and click OK:

Zkopírujte soubor do dialogového okna adresáře.Copy the file to the directory dialog

Tento postup opakujte pro každou z mipmap složek, dokud nebude obsah složek ikony aplikace mipmap- Xamarin zkopírován do jejich protějšků mipmap- Folders v projektu Phoneword .Repeat these steps for each of the mipmap- folders until the contents of the mipmap- Xamarin App Icons folders are copied to their counterpart mipmap- folders in the Phoneword project.

Až se všechny ikony zkopírují do projektu Xamarin. Android, otevřete dialogové okno Možnosti projektu kliknutím pravým tlačítkem na projekt v oblast řešení.After all the icons are copied to the Xamarin.Android project, open the Project Options dialog by right clicking on the project in the Solution Pad. Vyberte Build > aplikace pro Android a vyberte @mipmap/icon z pole se seznamem ikony aplikace :Select Build > Android Application and select @mipmap/icon from the Application icon combo box:

Nastavení ikony projektuSetting the project icon

Spuštění aplikaceRun the app

Nakonec otestujte aplikaci tak, že ji spustíte na zařízení s Androidem nebo emulátoru a přeložíte Phoneword:Finally, test the application by running it on an Android device or emulator and translating a Phoneword:

Snímek obrazovky aplikace po dokončeníScreenshot of app when it is complete

Pokud chcete spustit aplikaci na zařízení s Androidem, přečtěte si téma nastavení zařízení pro vývoj.To run the app on an Android device, see how to set up your device for development.

Blahopřejeme k dokončení vaší první aplikace Xamarin. Android!Congratulations on completing your first Xamarin.Android application! Teď je čas na Dissect nástrojů a dovedností, které jste právě naučili.Now it's time to dissect the tools and skills you have just learned. Dalším je dobrý den, Android hluboko podrobně.Next up is the Hello, Android Deep Dive.