Schnellstart für „Hallo, Android“-Multiscreen

Artikel
07/13/2023

In diesem zweiteiligen Leitfaden wird die Phoneword-Anwendung, um einen zweiten Bildschirm erweitert. Gleichzeitig werden die grundlegenden Bausteine von Android-Anwendungen erläutert, und Sie erhalten einen tieferen Einblick in die Architektur von Android.

Im Teil des Handbuchs mit der exemplarischen Vorgehensweise fügen Sie einen zweiten Bildschirm zur Phoneword-Anwendung hinzu, um mithilfe der App den Verlauf der übersetzten Nummern nachzuverfolgen. Die endgültige Anwendung verfügt dann über einen zweiten Bildschirm, auf dem wie im Screenshot auf der rechten Seite veranschaulicht die übersetzten Nummern angezeigt werden:

Im begleitenden Artikel Hello, Android Multiscreen: Deep Dive (Hallo, Android: Ausführliche Erläuterungen) wird wiederholt, was erstellt wurde, und es werden die Architektur, die Navigation und andere neue Android-Konzepte diskutiert.

Anforderungen

Da dieses Handbuch dort ansetzt, wo Hallo, Android aufhört, muss der Schnellstart für „Hallo, Android“ abgeschlossen werden. Wenn Sie direkt mit der exemplarischen Vorgehensweise weiter unten beginnen möchten, können Sie die vollständige Version von Phoneword aus dem Artikel Schnellstart für „Hallo, Android“ herunterladen und damit die exemplarische Vorgehensweise durcharbeiten.

Exemplarische Vorgehensweise

In dieser exemplarischen Vorgehensweise fügen Sie der Phoneword-Anwendung einen Bildschirm für den Übersetzungsverlauf hinzu.

Öffnen Sie zunächst die Phoneword-Anwendung in Visual Studio, und bearbeiten Sie die Datei Main.axml über den Projektmappen-Explorer.

Tipp

Neuere Releases von Visual Studio unterstützen das Öffnen von XML-Dateien in Android Designer.

Sowohl AXML- als auch XML-Dateien werden in Android Designer unterstützt.

Aktualisieren des Layouts

Ziehen Sie in der Toolbox eine Schaltfläche auf die Designoberfläche, und platzieren Sie sie unterhalb der TextView TranslatedPhoneWord. Ändern Sie im Bereich Eigenschaften die ID der Schaltfläche in @+id/TranslationHistoryButton.

Legen Sie die Eigenschaft Text der Schaltfläche auf @string/translationHistory fest. Android Designer wird dies wörtlich interpretieren, aber Sie werden ein paar Änderungen vornehmen, sodass der Text der Schaltfläche richtig angezeigt wird:

Erweitern Sie den Knoten Werte unter dem Ordner Ressourcen im Projektmappen-Explorer, und doppelklicken Sie auf die Datei für Zeichenfolgenressourcen Strings.xml:

Fügen Sie den Namen und den Wert der Zeichenfolge translationHistory zur Datei Strings.xml hinzu, und speichern Sie sie:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="translationHistory">Translation History</string>
    <string name="ApplicationName">Phoneword</string>
</resources>

Der Schaltflächentext für Übersetzungsverlauf sollte aktualisiert werden, um den neuen Zeichenfolgenwert widerzuspiegeln:

Wenn Sie auf der Designoberfläche auf die Schaltfläche Übersetzungsverlauf geklickt haben, suchen Sie im Pad Eigenschaften die Einstellung enabled, und legen Sie ihren Wert auf false fest, um die Schaltfläche zu deaktivieren. Dadurch wird die Schaltfläche in der Designoberfläche dunkler:

Erstellen der zweiten Aktivität

Erstellen Sie eine zweite Aktivität, um den zweiten Bildschirm einzurichten. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Telefon wortprojekt, und wählen Sie "Neues Element hinzufügen>"...:

Wählen Sie im Dialogfeld "Neues Element hinzufügen" die Option "Visual C# > -Aktivität " aus, und nennen Sie die Aktivitätsdatei "TranslationHistoryActivity.cs".

Ersetzen Sie den Vorlagencode in TranslationHistoryActivity.cs durch Folgendes:

using System;
using System.Collections.Generic;
using Android.App;
using Android.OS;
using Android.Widget;
namespace Phoneword
{
    [Activity(Label = "@string/translationHistory")]
    public class TranslationHistoryActivity : ListActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Create your application here
            var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
            this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
        }
    }
}

In dieser Klasse erstellen Sie eine ListActivity und füllen sie programmgesteuert, damit Sie keine neue Layoutdatei für diese Aktivität erstellen müssen. Dies wird unter Hello, Android Multiscreen Deep Dive („Hallo, Android“-Multiscreen – Ausführliche Erläuterungen) genauer erläutert.

Hinzufügen einer Liste

Diese App sammelt Telefonnummern, die der Benutzer im ersten Bildschirm übersetzt hat, und übergibt sie an den zweiten Bildschirm. Die Telefonnummern werden als Liste von Zeichenfolgen gespeichert. Um Listen (und Prioritäten, die später verwendet werden) zu unterstützen, fügen Sie die folgenden using-Anweisungen an den Anfang von MainActivity.cs hinzu:

using System.Collections.Generic;
using Android.Content;

Erstellen Sie als Nächstes eine leere Liste, die mit Telefonnummern befüllt werden kann. Die Klasse MainActivity sieht nun wie folgt aus:

[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
    static readonly List<string> phoneNumbers = new List<string>();
    ...// OnCreate, etc.
}

Fügen Sie den folgenden Code in der Klasse MainActivity hinzu, um die Schaltfläche Übersetzungsverlauf zu registrieren (erstellen Sie diese Zeile nach der Deklaration translateButton):

Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);

Fügen Sie den folgenden Code zum Ende der Methode OnCreate hinzu, um die Schaltfläche Übersetzungsverlauf zu verknüpfen:

translationHistoryButton.Click += (sender, e) =>
{
    var intent = new Intent(this, typeof(TranslationHistoryActivity));
    intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
    StartActivity(intent);
};

Aktualisieren Sie die Schaltfläche Übersetzen, um die Telefonnummer zur Liste phoneNumbers hinzuzufügen. Der Click-Handler für translateButton sollte in etwa dem folgenden Code entsprechen:

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

Speichern und erstellen Sie die Anwendung, um sicherzustellen, dass keine Fehler auftreten.

Ausführen der App

Stellen Sie die Anwendung für einen Emulator oder ein Gerät bereit. Die folgenden Screenshots zeigen die laufende Phoneword-App:

Öffnen Sie zunächst das Phoneword-Projekt in Visual Studio für Mac, und bearbeiten Sie die Datei Main.axml aus dem Lösungspad.

Tipp

Neuere Releases von Visual Studio unterstützen das Öffnen von XML-Dateien in Android Designer.

Sowohl AXML- als auch XML-Dateien werden in Android Designer unterstützt.

Aktualisieren des Layouts

Ziehen Sie in der Toolbox eine Schaltfläche auf die Designoberfläche, und platzieren Sie sie unterhalb der TextView TranslatedPhoneWord. Ändern Sie im Eigenschaftenpad die ID der Schaltfläche in @+id/TranslationHistoryButton:

Erweitern Sie den Knoten Werte unter dem Ordner Ressourcen im Lösungspad, und doppelklicken Sie auf die Datei für Zeichenfolgenressourcen Strings.xml:

Fügen Sie den Namen und den Wert der Zeichenfolge translationHistory zur Datei Strings.xml hinzu, und speichern Sie sie:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="translationHistory">Translation History</string>
    <string name="ApplicationName">Phoneword</string>
</resources>

Der Schaltflächentext für Übersetzungsverlauf sollte aktualisiert werden, um den neuen Zeichenfolgenwert widerzuspiegeln:

Klicken Sie auf der Designoberfläche die Schaltfläche Übersetzungsverlauf an, öffnen Sie die Registerkarte Verhalten im Eigenschaftenpad, und deaktivieren Sie die Schaltfläche mit einem Doppelklick auf das Kontrollkästchen Aktiviert. Dadurch wird die Schaltfläche in der Designoberfläche dunkler:

Erstellen der zweiten Aktivität

Erstellen Sie eine zweite Aktivität, um den zweiten Bildschirm einzurichten. Klicken Sie auf dem Projektmappenkreuz neben dem Telefon wortprojekt auf das graue Zahnradsymbol, und wählen Sie "Neue Datei hinzufügen>..." aus:

Wählen Sie im Dialogfeld "Neue Datei" die Option "Android-Aktivität>" aus, nennen Sie "AktivitätTranslationHistoryActivity", und klicken Sie dann auf "Hinzufügen".

Ersetzen Sie den Vorlagencode in TranslationHistoryActivity durch Folgendes:

using System;
using System.Collections.Generic;
using Android.App;
using Android.OS;
using Android.Widget;
namespace Phoneword
{
    [Activity(Label = "@string/translationHistory")]
    public class TranslationHistoryActivity : ListActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Create your application here
            var phoneNumbers = Intent.Extras.GetStringArrayList("phone_numbers") ?? new string[0];
            this.ListAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, phoneNumbers);
        }
    }
}

In dieser Klasse wird eine ListActivity erstellt und programmgesteuert befüllt, sodass Sie keine neue Layoutdatei für diese Aktivität erstellen müssen. Dies wird im Artikel Hello, Android Multiscreen Deep Dive („Hallo, Android“-Multiscreen – Ausführliche Erläuterungen) genauer erläutert.

Hinzufügen einer Liste

using System.Collections.Generic;
using Android.Content;

Erstellen Sie als Nächstes eine leere Liste, die mit Telefonnummern befüllt werden kann. Die Klasse MainActivity sieht nun wie folgt aus:

[Activity(Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
    static readonly List<string> phoneNumbers = new List<string>();
    ...// OnCreate, etc.
}

Fügen Sie den folgenden Code in der Klasse MainActivity hinzu, um die Schaltfläche Übersetzungsverlauf zu registrieren (erstellen Sie diese Zeile nach der Deklaration TranslationHistoryButton):

Button translationHistoryButton = FindViewById<Button> (Resource.Id.TranslationHistoryButton);

Fügen Sie den folgenden Code zum Ende der Methode OnCreate hinzu, um die Schaltfläche Übersetzungsverlauf zu verknüpfen:

translationHistoryButton.Click += (sender, e) =>
{
    var intent = new Intent(this, typeof(TranslationHistoryActivity));
    intent.PutStringArrayListExtra("phone_numbers", phoneNumbers);
    StartActivity(intent);
};

Aktualisieren Sie die Schaltfläche Übersetzen, um die Telefonnummer zur Liste phoneNumbers hinzuzufügen. Der Click-Handler für TranslateHistoryButton sollte in etwa dem folgenden Code entsprechen:

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

Ausführen der App

Stellen Sie die Anwendung für einen Emulator oder ein Gerät bereit. Die folgenden Screenshots zeigen die laufende Phoneword-App:

Herzlichen Glückwunsch, Sie haben die Anwendung Xamarin.Android-Multiscreen fertiggestellt! Jetzt ist es an der Zeit, die Tools und Fähigkeiten zu trennen, die Sie gerade gelernt haben – als Nächstes ist das Hello, Android Multiscreen Deep Dive.

Schnellstart für „Hallo, Android“-Multiscreen

Anforderungen

Exemplarische Vorgehensweise

Aktualisieren des Layouts

Erstellen der zweiten Aktivität

Hinzufügen einer Liste

Ausführen der App

Aktualisieren des Layouts

Erstellen der zweiten Aktivität

Hinzufügen einer Liste

Ausführen der App

Verwandte Links

Zusätzliche Ressourcen