Hello, Android: SchnellstartHello, Android: Quickstart

In diesem zweiteiligen Handbuch erstellen Sie Ihre erste Xamarin.Android-Anwendung mit Visual Studio. Außerdem entwickeln Sie ein Verständnis für die grundlegenden Aspekte der Entwicklung von Android-Anwendungen mit 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.

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Sie erstellen eine Anwendung, die eine vom Benutzer eingegebene alphanumerische Telefonnummer in eine numerische Telefonnummer übersetzt und diese dem Benutzer anzeigt.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. Die endgültige Anwendung sieht wie folgt aus:The final application looks like this:

Screenshot der App, wenn sie abgeschlossen ist.Screenshot of app when it is complete

Windows-AnforderungenWindows requirements

Für diese exemplarische Vorgehensweise benötigen Sie Folgendes:To follow along with this walkthrough, you will need the following:

  • Windows 10Windows 10.

  • Visual Studio 2019 oder Visual Studio 2017 (Version 15.8 oder höher): Community, Professional oder Enterprise.Visual Studio 2019 or Visual Studio 2017 (version 15.8 or later): Community, Professional, or Enterprise.

macOS-AnforderungenmacOS requirements

Für diese exemplarische Vorgehensweise benötigen Sie Folgendes:To follow along with this walkthrough, you will need the following:

  • Die aktuelle Version von Visual Studio für MacThe latest version of Visual Studio for Mac.

  • Ein Mac mit macOS High Sierra (10.13) oder höherA Mac running macOS High Sierra (10.13) or later.

In dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass die neueste Version von Xamarin.Android auf der Plattform Ihrer Wahl installiert und aktiv ist.This walkthrough assumes that the latest version of Xamarin.Android is installed and running on your platform of choice. Eine Anleitung für die Installation von Xamarin.Android finden Sie unter Xamarin.Android-Installation.For a guide to installing Xamarin.Android, refer to the Xamarin.Android Installation guides.

Konfigurieren von EmulatorenConfiguring emulators

Bei Verwendung des Android-Emulators wird empfohlen, dass Sie den Emulator konfigurieren, um die Hardwarebeschleunigung verwenden zu können.If you are using the Android emulator, we recommend that you configure the emulator to use hardware acceleration. Anweisungen zum Konfigurieren der Hardwarebeschleunigung finden Sie unter Hardwarebeschleunigung für die Emulator-Leistung.Instructions for configuring hardware acceleration are available in Hardware Acceleration for Emulator Performance.

Erstellen eines ProjektsCreate the project

Starten Sie Visual Studio.Start Visual Studio. Klicken Sie auf Datei > Neu > Projekt, um ein neues Projekt zu erstellen.Click File > New > Project to create a new project.

Klicken Sie im Dialogfeld Neues Projekt auf die Vorlage Android-App.In the New Project dialog, click the Android App template. Geben Sie dem neuen Projekt den Namen Phoneword, und klicken Sie auf OK:Name the new project Phoneword and click OK:

Neues Projekt ist PhonewordNew project is Phoneword

Klicken Sie im Dialogfeld Neue Android-App auf die Option Leere App und anschließend auf OK, um ein neues Projekt zu erstellen:In the New Android App dialog, click Blank App and click OK to create the new project:

Auswählen der Vorlage „Leere App“Select the Blank App template

Erstellen eines LayoutsCreate a layout

Tipp

Neuere Releases von Visual Studio unterstützen das Öffnen von XML-Dateien in Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Sowohl AXML- als auch XML-Dateien werden in Android Designer unterstützt.Both .axml and .xml files are supported in the Android Designer.

Nachdem das neue Projekt erstellt wurde, erweitern Sie den Ressourcen-Ordner und dann den Layout-Ordner im Projektmappen-Explorer.After the new project is created, expand the Resources folder and then the layout folder in the Solution Explorer. Doppelklicken Sie auf activity_main.axml, um sie in Android Designer zu öffnen.Double-click activity_main.axml to open it in the Android Designer. Dies ist die Layoutdatei für den App-Bildschirm:This is the layout file for the app's screen:

Datei „activity_main.axml“ geöffnetOpen activity axml file

Tipp

Neuere Versionen von Visual Studio enthalten eine etwas andere App-Vorlage.Newer releases of Visual Studio contain a slightly different app template.

  1. Statt activity_main.axml ist das Layout content_main.axml.Instead of activity_main.axml, the layout is in content_main.axml.
  2. Das Standardlayout ist RelativeLayout.The default layout will be a RelativeLayout. Ändern Sie für die restlichen Schritte auf dieser Seite das Tag <RelativeLayout> in <LinearLayout>, und fügen Sie dem öffnenden Tag LinearLayout ein anderes android:orientation="vertical"-Attribut hinzu.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.

Geben Sie in der Toolbox (der Bereich auf der linken Seite) text in das Suchfeld ein, und ziehen Sie ein Text (groß) -Widget auf die Entwurfsoberfläche (Bereich in der Mitte):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):

Ein großes Text-Widget hinzufügenAdd large text widget

Wählen Sie das Steuerelement Text (Large) auf der Designoberfläche aus, und verwenden Sie den Bereich Eigenschaften, um die Text-Eigenschaft des Widgets Text (Large) in Enter a Phoneword: zu ändern: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::

Legen Sie große Texteigenschaften festSet large text properties

Ziehen Sie ein Plain Text-Widget aus der Toolbox auf die Designoberfläche, und platzieren Sie es unterhalb des Text (Large) -Widgets.Drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. Die Platzierung des Widgets erfolgt erst, wenn Sie den Mauszeiger an eine Stelle im Layout ziehen, die das Widget akzeptieren kann.Placement of the widget will not occur until you move the mouse pointer to a place in the layout that can accept the widget. In den folgenden Screenshots kann das Widget (wie auf der linken Seite gezeigt) nicht platziert werden, bis der Mauszeiger (wie auf der rechten Seite gezeigt) direkt unter das vorherige TextView-Element bewegt wird: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):

Mauszeiger zeigt an, wo das Widget platziert werden kannMouse indicates where widget can be placed

Wenn Plain Text (ein EditText-Widget) richtig platziert wird, wird es wie im folgenden Screenshot angezeigt:When the Plain Text (an EditText widget) is placed correctly, it will appear as illustrated in the following screenshot:

Klartext-Widget hinzufügenAdd plain text widget

Wählen Sie das Klartext-Widget auf der Entwurfsoberfläche aus, und verwenden Sie den Eigenschaften-Bereich, um die Id-Eigenschaft des Klartext-Widgets zu @+id/PhoneNumberText und die Text-Eigenschaft zu 1-855-XAMARIN zu ändern: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:

Legen Sie Klartexteigenschaften festSet plain text properties

Ziehen Sie eine Schaltfläche aus der Toolbox auf die Entwurfsoberfläche, und platzieren Sie sie unterhalb des Klartext-Widgets:Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Ziehen Sie die Übersetzen-Schaltfläche auf die EntwurfsoberflächeDrag translate button to the design

Wählen Sie Button auf der Designoberfläche aus, und verwenden Sie den Bereich Eigenschaften, um die Text-Eigenschaft in Translate sowie die Id-Eigenschaft in @+id/TranslateButton zu ändern: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:

Eigenschaften der Übersetzen-Schaltfläche festlegenSet translate button properties

Ziehen Sie aus der Toolbox ein TextView-Objekt auf die Entwurfsoberfläche, und platzieren Sie dieses unterhalb des Widgets Schaltfläche.Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Ändern Sie die Text-Eigenschaft von TextView in eine leere Zeichenfolge, und legen Sie @+id/TranslatedPhoneword für die Id-Eigenschaft fest:Change the Text property of the TextView to an empty string and set its Id property to @+id/TranslatedPhoneword:

Festlegen der TextView-EigenschaftenSet the properties on the text view.

Speichern Sie Ihre Arbeit durch Drücken von STRG+S.Save your work by pressing CTRL+S.

Schreiben von CodeWrite some code

Im nächste Schritt fügen Sie Code hinzu, um alphanumerische Telefonnummern in numerische Telefonnummern zu übersetzen.The next step is to add some code to translate phone numbers from alphanumeric to numeric. Fügen Sie dem Projekt eine neue Datei hinzu, indem Sie mit der rechten Maustaste auf das Phoneword-Projekt im Projektmappen-Explorer klicken, und wie unten gezeigt Hinzufügen > Neue Datei... auswählen: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:

Neues Element hinzufügenAdd new item

Klicken Sie im Dialogfeld Neues Element hinzufügen auf Visual C# > Code > Codedatei, und nennen Sie die neue Datei PhoneTranslator.cs:In the Add New Item dialog, select Visual C# > Code > Code File and name the new code file PhoneTranslator.cs:

PhoneTranslator.cs hinzufügenAdd PhoneTranslator.cs

Dadurch wird eine neue leere C#-Klasse erstellt.This creates a new empty C# class. Fügen Sie folgenden Code in diese Datei ein: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;
        }
    }
}

Speichern Sie die Änderungen in der PhoneTranslator.cs-Datei durch Klicken auf Datei > Speichern (oder durch Drücken von STRG + S), und schließen Sie die Datei.Save the changes to the PhoneTranslator.cs file by clicking File > Save (or by pressing CTRL+S), then close the file.

Einrichten der BenutzeroberflächeWire up the user interface

Der nächste Schritt besteht im Hinzufügen von Code, um die Benutzeroberfläche zu verknüpfen, indem Sie zugrunde liegenden Code in die MainActivity-Klasse einfügen.The next step is to add code to wire up the user interface by inserting backing code into the MainActivity class. Verknüpfen Sie zuerst die Übersetzen-Schaltfläche.Begin by wiring up the Translate button. Suchen Sie in der MainActivity-Klasse die Methode OnCreate.In the MainActivity class, find the OnCreate method. Im nächsten Schritt fügen Sie den Schaltflächencode in OnCreate unter den base.OnCreate(savedInstanceState)- und SetContentView(Resource.Layout.activity_main)-Aufrufen hinzu.The next step is to add the button code inside OnCreate, below the base.OnCreate(savedInstanceState) and SetContentView(Resource.Layout.activity_main) calls. Ändern Sie zunächst den Vorlagencode, damit die OnCreate-Methode der folgenden Darstellung ähnelt: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
        }
    }
}

Sie erhalten einen Verweis auf die Steuerelemente, die in der Layoutdatei über den Android Designer erstellt wurden.Get a reference to the controls that were created in the layout file via the Android Designer. Fügen Sie in der OnCreate-Methode nach dem Aufruf von SetContentView folgenden Code hinzu: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);

Fügen Sie Code hinzu, der auf Benutzer reagiert, die auf die Übersetzen-Schaltfläche klicken.Add code that responds to user presses of the Translate button. Fügen Sie den folgenden Code zur OnCreate-Methode hinzu (nach den hinzugefügten Zeilen im vorherigen Schritt):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;
    }
};

Speichern Sie Ihre Arbeit durch Auswahl von Datei > Alle speichern (oder durch Drücken auf STRG+UMSCHALT+S), und erstellen Sie die Anwendung durch Auswahl von Erstellen > Projektmappe neu erstellen (oder durch Drücken auf STRG+UMSCHALT+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).

Wenn Fehler auftreten, wiederholen Sie die vorherigen Schritte, und beheben Sie alle Fehler, bis die Anwendung erfolgreich erstellt wird.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Wenn Sie einen Buildfehler wie Resource does not exist in the current context (Ressource ist im aktuellen Kontext nicht vorhanden) erhalten, überprüfen Sie, ob der Name des Namespaces in MainActivity.cs dem Projektnamen (Phoneword) entspricht, und erstellen Sie dann die Projektmappe völlig neu.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. Wenn Sie weiterhin Buildfehler erhalten, stellen Sie sicher, dass Sie die neuesten Visual Studio-Updates installiert haben.If you still get build errors, verify that you have installed the latest Visual Studio updates.

Festlegen des App-NamensSet the app name

Sie sollten nun über eine funktionierende Anwendung verfügen. Also legen Sie jetzt den Namen der App fest.You should now have a working application – it's time to set the name of the app. Erweitern Sie den Ordner values (im Ordner Resources), und öffnen Sie die Datei strings.xml.Expand the values folder (inside the Resources folder) and open the file strings.xml. Ändern Sie die Zeichenfolge für den App-Namen wie im Folgenden gezeigt in Phone Word: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>

Ausführen der AppRun the app

Testen Sie die Anwendung, indem Sie sie auf einem Android-Gerät oder einem Emulator ausführen.Test the application by running it on an Android device or emulator. Tippen Sie auf TRANSLATE, um 1-855-XAMARIN in eine Telefonnummer zu übersetzen:Tap the TRANSLATE button to translate 1-855-XAMARIN into a phone number:

Screenshot der ausgeführten AppScreenshot of app running

Informationen zum Ausführen der App auf einem Android-Gerät finden Sie unter Einrichten eines Geräts für die Entwicklung.To run the app on an Android device, see how to set up your device for development.

Starten Sie Visual Studio für Mac im Ordner Anwendungen oder aus Spotlight.Launch Visual Studio for Mac from the Applications folder or from Spotlight.

Klicken Sie auf Neues Projekt... , um ein neues Projekt zu erstellen.Click New Project... to create a new project.

Klicken Sie im Dialogfeld Vorlage für neues Projekt auswählen auf Android > App, und wählen Sie die Android-App-Vorlage aus.In the Choose a template for your new project dialog, click Android > App and select the Android App template. Klicken Sie auf Weiter.Click Next.

Android App-Vorlage auswählenChoose the Android App template

Geben Sie Ihrer neuen Anwendung im Dialogfeld Android-App konfigurieren den Namen Phoneword, und klicken Sie auf Weiter.In the Configure your Android app dialog, name the new app Phoneword and click Next.

Konfigurieren der Android-AppConfigure the Android App

Belassen Sie im Dialogfeld Configure your new Android App (Neue Android-App konfigurieren) die Namen von Projektmappen und Projektdateien bei Phoneword, und klicken Sie auf Erstellen, um das Projekt zu erstellen.In the Configure your new Android App dialog, leave the Solution and Project names set to Phoneword and click Create to create the project.

Erstellen eines LayoutsCreate a layout

Tipp

Neuere Releases von Visual Studio unterstützen das Öffnen von XML-Dateien in Android Designer.Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Sowohl AXML- als auch XML-Dateien werden in Android Designer unterstützt.Both .axml and .xml files are supported in the Android Designer.

Nachdem das neue Projekt erstellt wurde, erweitern Sie den Ressourcen-Ordner und dann den Layout-Ordner im Projektmappenpad.After the new project is created, expand the Resources folder and then the layout folder in the Solution pad. Doppelklicken Sie auf Main.axml, um sie in Android Designer zu öffnen.Double-click Main.axml to open it in the Android Designer. Dies ist die Layoutdatei für den Bildschirm, wenn diese im Android Designer angezeigt wird:This is the layout file for the screen when it is viewed in the Android Designer:

Öffnen von Main.axmlOpen Main.axml

Wählen Sie Hello World, Click Me! (Hallo, Welt! Hier klicken!) ausSelect the Hello World, Click Me! Schaltfläche auf der Entwurfsoberfläche. Klicken Sie auf Löschen, um sie zu entfernen.Button on the design surface and press the Delete key to remove it.

Geben Sie in der Toolbox (der Bereich auf der rechten Seite) text in das Suchfeld ein, und ziehen Sie ein Text (groß) -Widget auf die Entwurfsoberfläche (Bereich in der Mitte):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):

Ein großes Text-Widget hinzufügenAdd large text widget

Wählen Sie das Text (groß) -Widget auf der Entwurfsoberfläche aus, und verwenden Sie den Eigenschaften-Bereich, um die Text-Eigenschaft des Text (groß) -Widgets in Enter a Phoneword: zu ändern, wie hier gezeigt: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:

Festlegen großer Text-WidgeteigenschaftenSet large text widget properties

Ziehen Sie danach ein Klartext-Widget aus der Toolbox auf die Entwurfsoberfläche, und platzieren Sie es unterhalb des Text (groß) -Widgets.Next, drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. Beachten Sie, dass Sie das Suchfeld zum Auffinden von Widgets nach Namen verwenden können:Notice that you can use the search field to help locate widgets by name:

Klartext-Widget hinzufügenAdd plain text widget

Wählen Sie das Klartext-Widget auf der Entwurfsoberfläche aus, und verwenden Sie das Eigenschaftenpad, um die Id-Eigenschaft des Klartext-Widgets zu @+id/PhoneNumberText und die Text-Eigenschaft zu 1-855-XAMARIN zu ändern: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:

Festlegen von Klartext-WidgeteigenschaftenSet plain text widget properties

Ziehen Sie eine Schaltfläche aus der Toolbox auf die Entwurfsoberfläche, und platzieren Sie sie unterhalb des Klartext-Widgets:Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

Hinzufügen einer SchaltflächeAdd a button

Wählen Sie die Schaltfläche auf der Entwurfsoberfläche aus, und verwenden Sie das Eigenschaftenpad, um die Id-Eigenschaft der Schaltfläche zu @+id/TranslateButton und die Text-Eigenschaft zu Translate zu ändern: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:

Als Übersetzen-Schaltfläche konfigurierenConfigure as the translate button

Ziehen Sie aus der Toolbox ein TextView-Objekt auf die Entwurfsoberfläche, und platzieren Sie dieses unterhalb des Widgets Schaltfläche.Drag a TextView from the Toolbox to the design surface and place it under the Button widget. Wenn TextView aktiviert ist, legen Sie die id-Eigenschaft von TextView auf @+id/TranslatedPhoneWord fest, und ändern Sie text in eine leere Zeichenfolge:With the TextView selected, set the id property of the TextView to @+id/TranslatedPhoneWord and change the text to an empty string:

Festlegen der TextView-EigenschaftenSet the properties on the text view.

Speichern Sie Ihre Arbeit durch Drücken von ⌘ + S.Save your work by pressing ⌘ + S.

Schreiben von CodeWrite some code

Fügen Sie jetzt Code hinzu, um alphanumerische Telefonnummern in numerische Telefonnummern zu übersetzen.Now, add some code to translate phone numbers from alphanumeric to numeric. Fügen Sie dem Projekt eine neue Datei hinzu, indem Sie auf das Zahnradsymbol neben dem Phoneword-Projekt im Projektmappenpad klicken und Hinzufügen > Neue Datei... auswählen: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...:

Hinzufügen einer neuen Datei zum ProjektAdd a new file to the project

Klicken Sie im Dialogfeld Neue Datei auf Allgemein > Leere Klasse, nennen Sie die neue Datei PhoneTranslator, und klicken Sie auf Neu.In the New File dialog, select General > Empty Class, name the new file PhoneTranslator, and click New. Dadurch wird eine neue leere C#-Klasse für uns erstellt.This creates a new empty C# class for us.

Entfernen Sie den gesamten Vorlagencode aus der neuen Klasse, und ersetzen Sie ihn durch folgenden Code: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;
        }
    }
}

Speichern Sie die Änderungen in der PhoneTranslator.cs-Datei durch Klicken auf Datei > Speichern (oder durch Drücken von ⌘ + S), und schließen Sie die Datei.Save the changes to the PhoneTranslator.cs file by choosing File > Save (or by pressing ⌘ + S), then close the file. Stellen Sie durch erneutes Erstellen der Projektmappe sicher, dass keine Kompilierungsfehler vorhanden sind.Ensure that there are no compile-time errors by rebuilding the solution.

Einrichten der BenutzeroberflächeWire up the user interface

Der nächste Schritt besteht im Hinzufügen von Code, um die Benutzeroberfläche zu verknüpfen, indem Sie zugrunde liegenden Code in die MainActivity-Klasse einfügen.The next step is to add code to wire up the user interface by adding the backing code into the MainActivity class. Doppelklicken Sie auf MainActivity.cs im Lösungspad, um sie zu öffnen.Double-click MainActivity.cs in the Solution Pad to open it.

Fügen Sie zunächst einen Ereignishandler zur Schaltfläche Übersetzen hinzu.Begin by adding an event handler to the Translate button. Suchen Sie in der MainActivity-Klasse die Methode OnCreate.In the MainActivity class, find the OnCreate method. Fügen Sie den Schaltflächencode in OnCreate unter den base.OnCreate(bundle)- und SetContentView (Resource.Layout.Main)-Aufrufen hinzu.Add the button code inside OnCreate, below the base.OnCreate(bundle) and SetContentView (Resource.Layout.Main) calls. Entfernen Sie jeden vorhandenen Code für die Schaltflächenverarbeitung (d.h. Code, der auf Resource.Id.myButton verweist und einen Klick-Handler dafür erstellt), sodass die Methode OnCreate der folgenden ähnelt: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
        }
    }
}

Sie erhalten als nächstes einen Verweis auf die Steuerelemente, die in der Layoutdatei über den Android Designer erstellt wurden.Next, a reference is needed to the controls that were created in the layout file with the Android Designer. Fügen Sie in der OnCreate-Methode nach dem Aufruf von SetContentView folgenden Code hinzu: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);

Fügen Sie Code hinzu, der auf den Benutzer reagiert, wenn dieser auf die Übersetzen-Schaltfläche klickt. Fügen Sie dazu den folgenden Code zur OnCreate-Methode hinzu (nach den Zeilen, die im letzten Schritt hinzugefügt wurden):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;
    }
};

Speichern Sie Ihre Arbeit, und erstellen Sie die Anwendung, indem Sie Erstellen > Alle erstellen auswählen (oder durch Drücken von ⌘ + B).Save your work and build the application by selecting Build > Build All (or by pressing ⌘ + B). Wenn die Anwendung kompiliert wird, erhalten Sie eine Erfolgsmeldung am oberen Rand von Visual Studio für Mac:If the application compiles, you will get a success message at the top of Visual Studio for Mac:

Wenn Fehler auftreten, wiederholen Sie die vorherigen Schritte, und beheben Sie alle Fehler, bis die Anwendung erfolgreich erstellt wird.If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. Wenn Sie einen Buildfehler wie Resource does not exist in the current context (Ressource ist im aktuellen Kontext nicht vorhanden) erhalten, überprüfen Sie, ob der Name des Namespaces in MainActivity.cs dem Projektnamen (Phoneword) entspricht, und erstellen Sie dann die Projektmappe völlig neu.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. Wenn weiterhin Buildfehler auftreten, stellen Sie sicher, dass Sie die neuesten Updates für Xamarin.Android und Visual Studio für Mac installiert haben.If you still get build errors, verify that you have installed the latest Xamarin.Android and Visual Studio for Mac updates.

Festlegen der Bezeichnung und des App-SymbolsSet the label and app icon

Da Sie jetzt über eine funktionierende Anwendung verfügen, geben Sie ihr den letzten Schliff!Now that you have a working application, it's time to add the finishing touches! Starten Sie durch Bearbeiten der Label für MainActivity.Start by editing the Label for MainActivity. Android zeigt Label am oberen Bildschirmrand, damit Benutzer wissen, wo sie sich in der Anwendung befinden.The Label is what Android displays at the top of the screen to let users know where they are in the application. Ändern Sie am oberen Rand der MainActivity-Klasse Label auf Phone Word, wie hier gezeigt: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
    {
        ...
    }
}

Legen Sie nun das Anwendungssymbol fest.Now it's time to set the application icon. Standardmäßig stellt Visual Studio für Mac ein Standardsymbol für das Projekt bereit.By default, Visual Studio for Mac will provide a default icon for the project. Löschen Sie diese Dateien aus der Projektmappe, und ersetzen Sie diese durch ein anderes Symbol.Delete these files from the solution, and replace them with a different icon. Erweitern Sie den Ordner Ressourcen im Lösungspad.Expand the Resources folder in the Solution Pad. Beachten Sie, dass es fünf Ordner mit dem Präfix mipmap- gibt und dass jeder dieser Ordner eine einzelne Icon.png-Datei enthält:Notice that there are five folders that are prefixed with mipmap-, and that each of these folders contains a single Icon.png file:

mipmap-Ordner und Icon.png-Dateienmipmap- folders and Icon.png files

Es ist erforderlich, jede dieser Symboldateien aus dem Projekt zu löschen.It is necessary to delete each of these icon files from the project. Klicken Sie jeweils mit der rechten Maustaste auf die Icon.png-Dateien, und klicken Sie im Kontextmenü auf Entfernen:Right click on each of Icon.png files, and select Remove from the context menu:

Löschen der Standarddatei „Icon.png“Delete default Icon.png

Klicken Sie im Dialogfeld auf die Schaltfläche Löschen.Click on the Delete button in the dialog.

Laden Sie dann die Xamarin-App-Symbole herunter, und entpacken Sie diese.Next, download and unzip Xamarin App Icons set. Diese ZIP-Datei enthält die Symbole für die Anwendung.This zip file holds the icons for the application. Die Symbole sind visuell identisch, liegen aber in verschiedenen Auflösungen vor, sodass sie richtig auf verschiedenen Geräten mit verschiedenen Bildschirmdichten gerendert werden können.Each icon is visually identical but at different resolutions it renders correctly on different devices with different screen densities. Die Dateien müssen in das Xamarin.Android-Projekt kopiert werden.The set of files must be copied into the Xamarin.Android project. Klicken Sie im Lösungspad in Visual Studio für Mac auf den Ordner mipmap-hdpi, und klicken Sie auf Hinzufügen > Dateien hinzufügen:In Visual Studio for Mac, in the Solution Pad, right-click the mipmap-hdpi folder and select Add > Add Files:

Hinzufügen von DateienAdd files

Navigieren Sie vom Dialogfeld „Auswahl“ zum verpackten Verzeichnis der Xamarin-App-Symbole, und öffnen Sie den mipmap-hdpi-Ordner.From the selection dialog, navigate to the unzipped Xamarin AdApp Icons directory and open the mipmap-hdpi folder. Wählen Sie Icon.png aus, und klicken Sie auf Öffnen.Select Icon.png and click Open.

Wählen Sie im Dialogfeld Datei zum Ordner hinzufügen Copy the file into the directory (Datei in das Verzeichnis kopieren) aus, und klicken Sie auf OK:In the Add File to Folder dialog box, select Copy the file into the directory and click OK:

Dialogfeld „Datei in das Verzeichnis kopieren“Copy the file to the directory dialog

Wiederholen Sie diese Schritte für jeden der mipmap-Ordner, bis die Inhalte der mipmap-Ordner für Xamarin-App-Symbole in ihre Gegenstücke, die mipmap-Ordner im Phoneword-Projekt, kopiert werden.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.

Nachdem alle Symbole in das Xamarin.Android-Projekt kopiert wurden, öffnen Sie das Dialogfeld Projektoptionen, indem Sie mit der rechten Maustaste auf das Projekt im Lösungspad klicken.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. Klicken Sie auf Erstellen > Android-Anwendung, und wählen Sie @mipmap/icon aus dem Kombinationsfeld Anwendungssymbol aus:Select Build > Android Application and select @mipmap/icon from the Application icon combo box:

Festlegen des ProjektsymbolsSetting the project icon

Ausführen der AppRun the app

Testen Sie die Anwendung am Schluss, indem Sie diese auf einem Android-Gerät oder auf einem Emulator ausführen und ein Phoneword übersetzen:Finally, test the application by running it on an Android device or emulator and translating a Phoneword:

Screenshot der App, wenn sie abgeschlossen ist.Screenshot of app when it is complete

Informationen zum Ausführen der App auf einem Android-Gerät finden Sie unter Einrichten eines Geräts für die Entwicklung.To run the app on an Android device, see how to set up your device for development.

Herzlichen Glückwunsch, Sie haben Ihre erste Xamarin.Android-Anwendung fertiggestellt!Congratulations on completing your first Xamarin.Android application! Jetzt ist es an der Zeit, sich die Tools und Fertigkeiten, die Sie gerade gelernt haben, genau anzusehen.Now it's time to dissect the tools and skills you have just learned. Als Nächstes lesen Sie Hello, Android Deep Dive (Hallo, Android: Ausführliche Erläuterungen).Next up is the Hello, Android Deep Dive.