Witaj, Android Multiscreen: Szybki start

Ten dwuczęściowy przewodnik rozszerza aplikację Telefon word w celu obsługi drugiego ekranu. Po drodze podstawowe bloki konstrukcyjne aplikacji systemu Android są wprowadzane z bardziej szczegółowe informacje na temat architektury systemu Android.

W części przewodnika po tym przewodniku dodasz drugi ekran, aby Telefon word aplikacji, aby śledzić historię liczb przetłumaczonych przy użyciu aplikacji. Ostateczna aplikacja będzie mieć drugi ekran przedstawiający liczby, które zostały "przetłumaczone", jak pokazano na zrzucie ekranu po prawej stronie:

Towarzyszące szczegółowe omówienie tego, co zostało skompilowane i omówiono architekturę, nawigację i inne nowe pojęcia dotyczące systemu Android napotkane po drodze.

Wymagania

Ponieważ ten przewodnik podnosi miejsce, w którym funkcja Hello, system Android odchodzi, wymaga ukończenia przewodnika Szybki start Hello, Android.

Przewodnik

W tym przewodniku dodasz ekran Historia tłumaczenia do aplikacji Telefon word.

Zacznij od otwarcia aplikacji Telefon word w programie Visual Studio i edytowania pliku Main.axml z Eksplorator rozwiązań.

Napiwek

Nowsze wersje programu Visual Studio obsługują otwieranie plików .xml wewnątrz Projektant systemu Android.

Pliki .axml i .xml są obsługiwane w Projektant systemu Android.

Aktualizowanie układu

Z przybornika przeciągnij przycisk na powierzchnię projektową i umieść go poniżej kontrolki Translated Telefon Word TextView. W okienku Właściwości zmień identyfikator przycisku na@+id/TranslationHistoryButton

Ustaw właściwość Text przycisku na @string/translationHistory. Projektant systemu Android zinterpretuje to dosłownie, ale wprowadzisz kilka zmian, aby tekst przycisku był wyświetlany poprawnie:

Rozwiń węzeł wartości w folderze Resources w Eksplorator rozwiązań i kliknij dwukrotnie plik zasobów ciągów, Strings.xml:

translationHistory Dodaj nazwę i wartość ciągu do pliku Strings.xml i zapisz go:

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

Tekst przycisku Historia tłumaczenia powinien zostać zaktualizowany, aby odzwierciedlić nową wartość ciągu:

Po wybraniu przycisku Historia tłumaczenia na powierzchni projektowej znajdź enabled ustawienie w okienku Właściwości i ustaw jego wartość, aby false wyłączyć przycisk. Spowoduje to, że przycisk stanie się ciemniejszy na powierzchni projektowej:

Tworzenie drugiego działania

Utwórz drugie działanie, aby włączyć drugi ekran. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt Telefon word i wybierz polecenie Dodaj > nowy element...:

W oknie dialogowym Dodawanie nowego elementu wybierz pozycję Działanie Visual C# > i nadaj plikowi działania nazwę TranslationHistoryActivity.cs.

Zastąp kod szablonu w TranslationHistoryActivity.cs następującym kodem:

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);
        }
    }
}

W tej klasie tworzysz element ListActivity i wypełniasz go programowo, więc nie musisz tworzyć nowego pliku układu dla tego działania. Omówiono to bardziej szczegółowo w sekcji Hello, Android Multiscreen Deep Dive.

Dodawanie listy

Ta aplikacja zbiera numery telefonów (przetłumaczone przez użytkownika na pierwszym ekranie) i przekazuje je do drugiego ekranu. Numery telefonów są przechowywane jako lista ciągów. Aby obsługiwać listy (i intencje, które są używane później), dodaj następujące using dyrektywy na początku MainActivity.cs:

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

Następnie utwórz pustą listę, którą można wypełnić numerami telefonów. Klasa MainActivity będzie wyglądać następująco:

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

MainActivity W klasie dodaj następujący kod, aby zarejestrować przycisk Historia tłumaczenia (umieść ten wiersz po deklaracjitranslateButton):

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

Dodaj następujący kod na końcu OnCreate metody, aby połączyć przycisk Historia tłumaczenia:

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

Zaktualizuj przycisk Tłumacz, aby dodać numer telefonu do listy phoneNumbers. Procedura Click obsługi elementu translateButton powinna przypominać następujący kod:

// 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;
    }
};

Zapisz i skompiluj aplikację, aby upewnić się, że nie ma żadnych błędów.

Uruchamianie aplikacji

Wdróż aplikację w emulatorze lub urządzeniu. Poniższe zrzuty ekranu ilustrują uruchomioną aplikację Telefon word:

Zacznij od otwarcia projektu Telefon word w Visual Studio dla komputerów Mac i edytowania pliku Main.axml z okienka rozwiązania.

Napiwek

Nowsze wersje programu Visual Studio obsługują otwieranie plików .xml wewnątrz Projektant systemu Android.

Pliki .axml i .xml są obsługiwane w Projektant systemu Android.

Aktualizowanie układu

Z przybornika przeciągnij przycisk na powierzchnię projektową i umieść go poniżej kontrolki Translated Telefon Word TextView. W okienku Właściwości zmień identyfikator przycisku na @+id/TranslationHistoryButton:

Ustaw właściwość Text przycisku na @string/translationHistory. Projektant systemu Android zinterpretuje to dosłownie, ale wprowadzisz kilka zmian, aby tekst przycisku był wyświetlany poprawnie:

Rozwiń węzeł wartości w folderze Resources w okienku rozwiązania i kliknij dwukrotnie plik zasobów ciągu, Strings.xml:

translationHistory Dodaj nazwę i wartość ciągu do pliku Strings.xml i zapisz go:

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

Tekst przycisku Historia tłumaczenia powinien zostać zaktualizowany, aby odzwierciedlić nową wartość ciągu:

Po wybraniu przycisku Historia tłumaczenia na powierzchni projektowej otwórz kartę Zachowanie w okienku właściwości i kliknij dwukrotnie pole wyboru Włączone , aby wyłączyć przycisk. Spowoduje to, że przycisk stanie się ciemniejszy na powierzchni projektowej:

Tworzenie drugiego działania

Utwórz drugie działanie, aby włączyć drugi ekran. W okienku rozwiązania kliknij szarą ikonę koła zębatego obok projektu Telefon word i wybierz pozycję Dodaj > nowy plik...:

W oknie dialogowym Nowy plik wybierz pozycję Działanie systemu Android>, nadaj nazwę DziałanieTranslationHistoryActivity, a następnie kliknij przycisk Dodaj.

Zastąp kod szablonu w pliku TranslationHistoryActivity następującym kodem:

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);
        }
    }
}

W tej klasie ListActivity element jest tworzony i wypełniany programowo, więc nie trzeba tworzyć nowego pliku układu dla tego działania. Bardziej szczegółowo wyjaśniono w artykule Hello, Android Multiscreen Deep Dive (Szczegółowe omówienie funkcji Hello, Android Multiscreen).

Dodawanie listy

Ta aplikacja zbiera numery telefonów (przetłumaczone przez użytkownika na pierwszym ekranie) i przekazuje je do drugiego ekranu. Numery telefonów są przechowywane jako lista ciągów. Aby obsługiwać listy (i intencje, które są używane później), dodaj następujące using dyrektywy na początku MainActivity.cs:

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

Następnie utwórz pustą listę, którą można wypełnić numerami telefonów. Klasa MainActivity będzie wyglądać następująco:

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

MainActivity W klasie dodaj następujący kod, aby zarejestrować przycisk Historia translacji (umieść ten wiersz po deklaracjiTranslationHistoryButton):

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

Dodaj następujący kod na końcu OnCreate metody, aby połączyć przycisk Historia tłumaczenia:

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

Zaktualizuj przycisk Tłumacz, aby dodać numer telefonu do listy phoneNumbers. Procedura Click obsługi elementu TranslateHistoryButton powinna przypominać następujący kod:

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;
    }
};

Uruchamianie aplikacji

Wdróż aplikację w emulatorze lub urządzeniu. Poniższe zrzuty ekranu ilustrują uruchomioną aplikację Telefon word:

Gratulujemy ukończenia pierwszej aplikacji platformy Xamarin.Android z wieloma ekranami! Teraz nadszedł czas, aby odciąć narzędzia i umiejętności, które właśnie znasz — następnym krokiem jest funkcja Hello, Android Multiscreen Deep Dive.

Pokrewne łącza

• Ikony aplikacji platformy Xamarin i ekrany uruchamiania (ZIP)