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

[アーティクル]
01/10/2024

この 2 部構成のガイドでは、Phoneword アプリケーションを拡張して 2 番目の画面を処理します。その過程で、基本的な Android アプリケーションの構成要素と Android アーキテクチャの詳細を紹介します。

このガイドのチュートリアル部分では、Phoneword アプリケーションに 2 つ目の画面を追加して、アプリを使用して変換した番号の履歴を追跡し続けます。最終的なアプリケーションには、右のスクリーンショットのように、"変換された" 番号を表示する 2 つ目の画面が表示されます。

付随する深い分析では、ビルドされたものを確認し、アーキテクチャ、ナビゲーション、およびその過程で発生したその他の新しい Android 概念について説明します。

要件

このガイドは Hello, Android の続きのため、Hello, Android クイックスタートを完了する必要があります。以下のチュートリアルに直接ジャンプしたい場合は、(Hello, Android クイックスタートから) Phoneword の完全版をダウンロードして、それを使用してチュートリアルを開始できます。

チュートリアル

このチュートリアルでは、Phoneword アプリケーションに変換履歴画面を追加します。

まず、Visual Studio で Phoneword アプリケーションを開き、ソリューションエクスプローラーで Main.axml ファイルを編集します。

ヒント

新しいリリースの Visual Studio では、Android Designer 内で .xml ファイルを開くことができます。

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

レイアウトの更新

[ボタン] を [ツールボックス] からデザインサーフェスにドラッグし、[TranslatedPhoneWord] TextView の下に配置します。 [プロパティ] ウィンドウで、ボタン ID を @+id/TranslationHistoryButton に変更します。

ボタンの [テキスト] プロパティを @string/translationHistory に設定します。 Android Designer はこれを文字どおりに解釈しますが、ボタンのテキストが正しく表示されるようにいくつかの変更を行います。

ソリューションエクスプローラーで [リソース] フォルダーの下の値ノードを展開し、文字列リソースファイル Strings.xml をダブルクリックします。

translationHistory 文字列の名前と値を Strings.xml ファイルに追加して保存します。

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

変換履歴ボタンのテキストが、新しい文字列値を反映するように更新される必要があります。

デザインサーフェスで変換履歴ボタンを選択して、[プロパティ] ウィンドウで enabled 設定を見つけ、その値を false に設定してボタンを無効にします。これによりデザインサーフェイス上でボタンが暗くなります。

2 つ目のアクティビティの作成

2 番目の画面の電源を投入する 2 番目のアクティビティを作成します。ソリューションエクスプローラーで、電話word プロジェクトを右クリックし、[新しい項目の追加>]を選択します。..:

[新しい項目の追加] ダイアログで、[Visual C# > アクティビティ] を選択し、アクティビティファイルに TranslationHistoryActivity.cs という名前を付けます。

TranslationHistoryActivity.cs 内のテンプレートコードを次と置き換えます。

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 が作成されるため、このアクティビティ用に新しいレイアウトファイルを作成する必要はありません。これについては、「Hello, Android マルチスクリーンの詳細」で詳しく説明しています。

リストの追加

このアプリは (最初の画面でユーザーが変換した) 電話番号を収集し、2 番目の画面に渡します。電話番号は、文字列のリストとして格納されます。一覧 (と後に使用される意図) をサポートするには、次の using ディレクティブを MainActivity.cs の一番上に追加します。

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

次に、電話番号を入力できる空のリストを作成します。 MainActivity クラスは次のようになります。

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

MainActivity クラスで、次のコードを追加して変換履歴ボタンを登録します (translateButton 宣言の後にこの行を配置します)。

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

OnCreate メソッドの末尾に次のコードを追加して、変換履歴ボタンを接続します。

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

phoneNumbers の一覧に電話番号を追加するように、[変換] ボタンを更新します。 translateButton の Click ハンドラーは次のコードのようになります。

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

アプリケーションを保存してビルドし、エラーがないことを確認します。

アプリの実行

エミュレーターまたはデバイスにアプリケーションを展開します。次のスクリーンショットは、実行中の Phoneword アプリケーションを示しています。

まず、Visual Studio for Mac で Phoneword プロジェクトを開き、Solution Pad で Main.axml ファイルを編集します。

ヒント

新しいリリースの Visual Studio では、Android Designer 内で .xml ファイルを開くことができます。

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

レイアウトの更新

[ボタン] を [ツールボックス] からデザインサーフェスにドラッグし、[TranslatedPhoneWord] TextView の下に配置します。 Properties Pad で、ボタン ID を @+id/TranslationHistoryButton に変更します。

Solution Pad で [リソース] フォルダーの下の値ノードを展開し、文字列リソースファイル Strings.xml をダブルクリックします。

translationHistory 文字列の名前と値を Strings.xml ファイルに追加して保存します。

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

変換履歴ボタンのテキストが、新しい文字列値を反映するように更新される必要があります。

デザインサーフェスで変換履歴ボタンを選択して、Properties Pad で [動作] タブを開き、[有効] チェックボックスをダブルクリックして、ボタンを無効にします。これによりデザインサーフェイス上でボタンが暗くなります。

2 つ目のアクティビティの作成

2 番目の画面の電源を投入する 2 番目のアクティビティを作成します。ソリューションパッドで、電話word プロジェクトの横にある灰色の歯車アイコンをクリックし、[新しいファイルの追加]>を選択します。..:

[新しいファイル] ダイアログで、[Android > アクティビティ] を選択し、[アクティビティTranslationHistoryActivity] に名前を付け、[追加] をクリックします。

TranslationHistoryActivity のテンプレートコードを次と置き換えます。

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

リストの追加

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

次に、電話番号を入力できる空のリストを作成します。 MainActivity クラスは次のようになります。

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

MainActivity クラスで、次のコードを追加して変換履歴ボタンを登録します (TranslationHistoryButton 宣言の後にこの行を配置します)。

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

OnCreate メソッドの末尾に次のコードを追加して、変換履歴ボタンを接続します。

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

phoneNumbers の一覧に電話番号を追加するように、[変換] ボタンを更新します。 TranslateHistoryButton の Click ハンドラーは次のコードのようになります。

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

アプリの実行

おつかれさまでした。これで最初のマルチスクリーン Xamarin.Android アプリケーションが完成しました。次に、学習したツールとスキルを解剖します。次に、Hello、Android Multiscreen Deep Dive があります。

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

要件

チュートリアル

レイアウトの更新

2 つ目のアクティビティの作成

リストの追加

アプリの実行

レイアウトの更新

2 つ目のアクティビティの作成

リストの追加

アプリの実行

関連リンク

その他のリソース

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