Hello Android のマルチスクリーン:クイック スタートHello, Android Multiscreen: Quickstart

この 2 部構成のガイドでは、Phoneword アプリケーションを拡張して 2 番目の画面を処理します。その過程で、基本的な Android アプリケーションの構成要素と Android アーキテクチャの詳細を紹介します。This two-part guide expands the Phoneword application to handle a second screen. Along the way, basic Android Application Building Blocks are introduced with a deeper dive into Android architecture.

このガイドのチュートリアル部分では、Phoneword アプリケーションに 2 つ目の画面を追加して、アプリを使用して変換した番号の履歴を追跡し続けます。In the walkthrough portion of this guide, you'll add a second screen to the Phoneword application to keep track of the history of numbers translated using the app. 最終的なアプリケーションには、右のスクリーンショットのように、"変換された" 番号を表示する 2 つ目の画面が表示されます。The final application will have a second screen that displays the numbers that were "translated", as illustrated by the screenshot on the right:

例のアプリのスクリーンショットExample app screenshots

付随する深い分析では、ビルドされたものを確認し、アーキテクチャ、ナビゲーション、およびその過程で発生したその他の新しい Android 概念について説明します。The accompanying Deep Dive reviews what was built and discusses architecture, navigation, and other new Android concepts encountered along the way.

必要条件Requirements

このガイドは Hello, Android の続きのため、Hello, Android クイック スタートを完了する必要があります。Because this guide picks up where Hello, Android leaves off, it requires completion of the Hello, Android Quickstart. 以下のチュートリアルに直接ジャンプしたい場合は、(Hello, Android クイック スタートから) Phoneword の完全版をダウンロードして、それを使用してチュートリアルを開始できます。If you would like to jump directly into the walkthrough below, you can download the completed version of Phoneword (from the Hello, Android Quickstart) and use it to start the walkthrough.

チュートリアルWalkthrough

このチュートリアルでは、Phoneword アプリケーションに変換履歴画面を追加します。In this walkthrough you'll add a Translation History screen to the Phoneword application.

まず、Visual Studio で Phoneword アプリケーションを開き、ソリューション エクスプローラーMain.axml ファイルを編集します。Start by opening the Phoneword application in Visual Studio and editing the Main.axml file from the Solution Explorer.

ヒント

新しいリリースの Visual Studio では、Android Designer 内で .xml ファイルを開くことができます。Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Android Designer では、.axml ファイルと .xml ファイルの両方がサポートされています。Both .axml and .xml files are supported in the Android Designer.

レイアウトの更新Updating the layout

[ボタン][ツールボックス] からデザイン サーフェスにドラッグし、 [TranslatedPhoneWord] TextView の下に配置します。From the Toolbox, drag a Button onto the design surface and place it below the TranslatedPhoneWord TextView. [プロパティ] ウィンドウで、ボタン ID@+id/TranslationHistoryButton に変更します。In the Properties pane, change the button Id to @+id/TranslationHistoryButton

新しいボタンをドラッグDrag a new button

ボタンの [テキスト] プロパティを @string/translationHistory に設定します。Set the Text property of the button to @string/translationHistory. Android Designer はこれを文字どおりに解釈しますが、ボタンのテキストが正しく表示されるようにいくつかの変更を行います。The Android Designer will interpret this literally, but you're going to make a few changes so that the button's text shows up correctly:

変換履歴ボタンのテキストを設定するSet the translation history button text

ソリューション エクスプローラー[リソース] フォルダーの下のノードを展開し、文字列リソース ファイル Strings.xml をダブルクリックします。Expand the values node under the Resources folder in the Solution Explorer and double-click the string resources file, Strings.xml:

Strings.xml を開くOpen Strings.xml

translationHistory 文字列の名前と値を Strings.xml ファイルに追加して保存します。Add the translationHistory string name and value to the Strings.xml file and save it:

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

変換履歴ボタンのテキストが、新しい文字列値を反映するように更新される必要があります。The Translation History button text should update to reflect the new string value:

新しい文字列値が反映されたボタンButton reflects new string value

デザイン サーフェスで変換履歴ボタンを選択して、 [プロパティ] ウィンドウで enabled 設定を見つけ、その値を false に設定してボタンを無効にします。With the Translation History button selected on the design surface, find the enabled setting in the Properties pane and set its value to false to disable the button. これによりデザイン サーフェイス上でボタンが暗くなります。This will cause the button to become darker on the design surface:

変換履歴ボタンを無効にするDisable translation history button

2 つ目のアクティビティの作成Creating the second activity

2 番目の画面の電源を投入する 2 番目のアクティビティを作成します。Create a second Activity to power the second screen. ソリューション エクスプローラーPhoneword プロジェクトを右クリックし、 [追加]、[新しい項目] を選択します。In the Solution Explorer, right-click the Phoneword project and choose Add > New Item...:

新しいアイテムの追加Add a new file

[新しい項目の追加] ダイアログで、 [Visual C#]、[アクティビティ] の順に選択し、アクティビティ ファイルに TranslationHistoryActivity.cs という名前を付けます。In the Add New Item dialog, choose Visual C# > Activity and name the Activity file TranslationHistoryActivity.cs.

TranslationHistoryActivity.cs 内のテンプレート コードを次と置き換えます。Replace the template code in TranslationHistoryActivity.cs with the following:

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

このクラスでは、プログラムによって ListActivity が作成されるため、このアクティビティ用に新しいレイアウト ファイルを作成する必要はありません。In this class, you're creating a ListActivity and populating it programmatically, so you don't need to create a new layout file for this Activity. これについては、「Hello, Android マルチスクリーンの詳細」で詳しく説明しています。This is discussed in more detail in the Hello, Android Multiscreen Deep Dive.

リストの追加Adding a list

このアプリは (最初の画面でユーザーが変換した) 電話番号を収集し、2 番目の画面に渡します。This app collects phone numbers (that the user has translated on the first screen) and passes them to the second screen. 電話番号は、文字列のリストとして格納されます。The phone numbers are stored as a list of strings. 一覧 (と後に使用される意図) をサポートするには、次の using ディレクティブを MainActivity.cs の一番上に追加します。To support lists (and Intents, which are used later), add the following using directives to the top of MainActivity.cs:

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

次に、電話番号を入力できる空のリストを作成します。Next, create an empty list that can be filled with phone numbers. MainActivity クラスは次のようになります。The MainActivity class will look like this:

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

MainActivity クラスで、次のコードを追加して変換履歴ボタンを登録します (translateButton 宣言の後にこの行を配置します)。In the MainActivity class, add the following code to register the Translation History button (place this line after the translateButton declaration):

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

OnCreate メソッドの末尾に次のコードを追加して、変換履歴ボタンを接続します。Add the following code to the end of the OnCreate method to wire up the Translation History button:

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

phoneNumbers の一覧に電話番号を追加するように、 [変換] ボタンを更新します。Update the Translate button to add the phone number to the list of phoneNumbers. translateButtonClick ハンドラーは次のコードのようになります。The Click handler for the translateButton should resemble the following code:

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

アプリケーションを保存してビルドし、エラーがないことを確認します。Save and build the application to make sure there are no errors.

アプリケーションの実行Running the app

エミュレーターまたはデバイスにアプリケーションを展開します。Deploy the application to an emulator or device. 次のスクリーンショットは、実行中の Phoneword アプリケーションを示しています。The following screenshots illustrate the running Phoneword application:

例のスクリーンショットExample screenshots

まず、Visual Studio for Mac で Phoneword プロジェクトを開き、Solution PadMain.axml ファイルを編集します。Start by opening the Phoneword project in Visual Studio for Mac and editing the Main.axml file from the Solution Pad.

ヒント

新しいリリースの Visual Studio では、Android Designer 内で .xml ファイルを開くことができます。Newer releases of Visual Studio support opening .xml files inside the Android Designer.

Android Designer では、.axml ファイルと .xml ファイルの両方がサポートされています。Both .axml and .xml files are supported in the Android Designer.

レイアウトの更新Updating the layout

[ボタン][ツールボックス] からデザイン サーフェスにドラッグし、 [TranslatedPhoneWord] TextView の下に配置します。From the Toolbox, drag a Button onto the design surface and place it below the TranslatedPhoneWord TextView. Properties Pad で、ボタン ID@+id/TranslationHistoryButton に変更します。In the Properties pad, change the button Id to @+id/TranslationHistoryButton:

新しいボタンをドラッグDrag a new button

ボタンの [テキスト] プロパティを @string/translationHistory に設定します。Set the Text property of the button to @string/translationHistory. Android Designer はこれを文字どおりに解釈しますが、ボタンのテキストが正しく表示されるようにいくつかの変更を行います。The Android Designer will interpret this literally, but you're going to make a few changes so that the button's text shows up correctly:

変換履歴ボタンのテキストを設定するSet the translation history button text

Solution Pad[リソース] フォルダーの下のノードを展開し、文字列リソース ファイル Strings.xml をダブルクリックします。Expand the values node under the Resources folder in the Solution Pad and double-click the string resources file, Strings.xml:

文字列を開くOpen Strings

translationHistory 文字列の名前と値を Strings.xml ファイルに追加して保存します。Add the translationHistory string name and value to the Strings.xml file and save it:

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

変換履歴ボタンのテキストが、新しい文字列値を反映するように更新される必要があります。The Translation History button text should update to reflect the new string value:

新しい文字列値が反映されたボタンButton reflects new string value

デザイン サーフェスで変換履歴ボタンを選択して、Properties Pad[動作] タブを開き、 [有効] チェック ボックスをダブルクリックして、ボタンを無効にします。With the Translation History button selected on the design surface, open the Behavior tab in the Properties Pad and double-click the Enabled checkbox to disable the button. これによりデザイン サーフェイス上でボタンが暗くなります。This will cause the button to become darker on the design surface:

変換履歴ボタンを無効にするDisable translation history button

2 つ目のアクティビティの作成Creating the second activity

2 番目の画面の電源を投入する 2 番目のアクティビティを作成します。Create a second Activity to power the second screen. Solution Pad で、Phoneword プロジェクトの横の灰色の歯車アイコンをクリックして、 [追加]、[新しいファイル] の順に選択します。In the Solution Pad, click the gray gear icon next to the Phoneword project and choose Add > New File...:

[新しいファイル] ダイアログで、 [Android]、[アクティビティ] の順に選択し、アクティビティに TranslationHistoryActivity と名前を付け、 [追加] をクリックします。From the New File dialog, choose Android > Activity, name the Activity TranslationHistoryActivity, then click Add.

TranslationHistoryActivity のテンプレート コードを次と置き換えます。Replace the template code in TranslationHistoryActivity with the following:

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

このクラスでは、プログラムによって ListActivity が作成されるため、このアクティビティ用に新しいレイアウト ファイルを作成する必要はありません。In this class, a ListActivity is created and populated programmatically, so you don't have to create a new layout file for this Activity. これについては、「Hello, Android マルチスクリーンの詳細」で詳しく説明しています。This is explained in more detail in the Hello, Android Multiscreen Deep Dive.

リストの追加Adding a list

このアプリは (最初の画面でユーザーが変換した) 電話番号を収集し、2 番目の画面に渡します。This app collects phone numbers (that the user has translated on the first screen) and passes them to the second screen. 電話番号は、文字列のリストとして格納されます。The phone numbers are stored as a list of strings. 一覧 (と後に使用される意図) をサポートするには、次の using ディレクティブを MainActivity.cs の一番上に追加します。To support lists (and Intents, which are used later), add the following using directives to the top of MainActivity.cs:

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

次に、電話番号を入力できる空のリストを作成します。Next, create an empty list that can be filled with phone numbers. MainActivity クラスは次のようになります。The MainActivity class will look like this:

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

MainActivity クラスで、次のコードを追加して変換履歴ボタンを登録します (TranslationHistoryButton 宣言の後にこの行を配置します)。In the MainActivity class, add the following code to register the TranslationHistory History button (place this line after the TranslationHistoryButton declaration):

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

OnCreate メソッドの末尾に次のコードを追加して、変換履歴ボタンを接続します。Add the following code to the end of the OnCreate method to wire up the Translation History button:

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

phoneNumbers の一覧に電話番号を追加するように、 [変換] ボタンを更新します。Update the Translate button to add the phone number to the list of phoneNumbers. TranslateHistoryButtonClick ハンドラーは次のコードのようになります。The Click handler for the TranslateHistoryButton should resemble the following code:

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

アプリケーションの実行Running the app

エミュレーターまたはデバイスにアプリケーションを展開します。Deploy the application to an emulator or device. 次のスクリーンショットは、実行中の Phoneword アプリケーションを示しています。The following screenshots illustrate the running Phoneword application:

例のスクリーンショットExample screenshots

おつかれさまでした。これで最初のマルチスクリーン Xamarin.Android アプリケーションが完成しました。Congratulations on completing your first multi-screen Xamarin.Android application! 次は、学習したツールとスキルを詳しく分析します –Hello, Android マルチスクリーンの詳細Now it's time to dissect the tools and skills you just learned – next up is the Hello, Android Multiscreen Deep Dive.