Hello, Android:クイック スタートHello, Android: Quickstart

このガイドは 2 つに分かれています。最初に、Visual Studio を使用して Xamarin.Android アプリケーションを作成し、Xamarin を使用する Android アプリケーション開発の基礎について理解を深めます。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.

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

英数字の電話番号 (ユーザーが入力) を数字の電話番号に変換し、その番号をユーザーに表示するアプリケーションを作成します。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. 最終的にアプリケーションは次のようになります。The final application looks like this:

電話番号変換アプリの入力時のスクリーンショット。Screenshot of phone number translation app when it is complete.

Windows の要件Windows requirements

このチュートリアルに従うには、以下が必要になります。To follow along with this walkthrough, you will need the following:

  • Windows 10。Windows 10.

  • Visual Studio 2019 または Visual Studio 2017 (バージョン 15.8 以降): Community、Professional、Enterprise。Visual Studio 2019 or Visual Studio 2017 (version 15.8 or later): Community, Professional, or Enterprise.

macOS の要件macOS requirements

このチュートリアルに従うには、以下が必要になります。To follow along with this walkthrough, you will need the following:

  • Visual Studio for Mac の最新バージョン。The latest version of Visual Studio for Mac.

  • macOS High Sierra (10.13) 以降を実行している Mac。A Mac running macOS High Sierra (10.13) or later.

このチュートリアルでは、最新バージョンの Xamarin.Android が任意のプラットフォームでインストールされ、実行されていることを前提とします。This walkthrough assumes that the latest version of Xamarin.Android is installed and running on your platform of choice. Xamarin.Android のインストール ガイドについては、Xamarin.Android のインストールに関するガイドを参照してください。For a guide to installing Xamarin.Android, refer to the Xamarin.Android Installation guides.

エミュレーターの構成Configuring emulators

Android のエミュレーターを使用している場合は、ハードウェア アクセラレータを使用するようにエミュレーターを構成することをお勧めします。If you are using the Android emulator, we recommend that you configure the emulator to use hardware acceleration. ハードウェア アクセラレータを構成するための手順は、「エミュレーター パフォーマンスのためのハードウェア高速化」で確認できます。Instructions for configuring hardware acceleration are available in Hardware Acceleration for Emulator Performance.

プロジェクトの作成Create the project

Visual Studio を起動します。Start Visual Studio. [ファイル]、[新規]、[プロジェクト] の順にクリックして、新しいプロジェクトを作成します。Click File > New > Project to create a new project.

[新しいプロジェクト] ダイアログで、 [Android アプリ] テンプレートをクリックします。In the New Project dialog, click the Android App template. プロジェクトに Phoneword という名前を付けて、 [OK] をクリックします。Name the new project Phoneword and click OK:

新しいプロジェクトが Phoneword であることを示すスクリーンショットNew project is Phoneword

[New Android App](新しい Android アプリ) ダイアログ ボックスで、 [空のアプリ][OK] の順にクリックして新しいプロジェクトを作成します。In the New Android App dialog, click Blank App and click OK to create the new project:

空のアプリのテンプレートの選択Select the Blank App template

レイアウトを作成するCreate a layout

ヒント

新しいリリースの 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.

新しいプロジェクトが作成されたら、ソリューション エクスプローラーResources フォルダーを展開してから layout フォルダーを展開します。After the new project is created, expand the Resources folder and then the layout folder in the Solution Explorer. activity_main.axml をダブルクリックして、Android Designer で開きます。Double-click activity_main.axml to open it in the Android Designer. アプリの画面の layout ファイルを以下に示します。This is the layout file for the app's screen:

アクティビティ axml ファイルを開くOpen activity axml file

ヒント

新しいリリースの Visual Studio に含まれるアプリ テンプレートは一部が変わっています。Newer releases of Visual Studio contain a slightly different app template.

  1. レイアウトは activity_main.axml ではなく content_main.axml 内にあります。Instead of activity_main.axml, the layout is in content_main.axml.
  2. 既定のレイアウトは RelativeLayout になります。The default layout will be a RelativeLayout. このページの残りの手順を実際に実行する場合は、<RelativeLayout> タグを <LinearLayout> に変更し、別の属性 android:orientation="vertical"LinearLayout の開始タグに追加する必要があります。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.

[ツールボックス] (左側の領域) の検索フィールドに「text」と入力し、デザイン サーフェイス (中央の領域) に Text (Large) ウィジェットをドラッグします。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):

ラージ テキスト ウィジェットを追加するAdd large text widget

デザイン サーフェイスで Text (Large) コントロールを選択した状態で、 [プロパティ] ウィンドウを使用して Text (Large) ウィジェットの Text プロパティを Enter a Phoneword: に変更します。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::

ラージ テキスト プロパティを設定するSet large text properties

プレーンテキスト ウィジェットを [ツールボックス] からデザイン サーフェイスにドラッグし、Text (Large) ウィジェットの下に配置します。Drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. ウィジェットを受け入れることができるレイアウト内の場所にマウス ポインターを移動するまで、ウィジェットの配置は行われません。Placement of the widget will not occur until you move the mouse pointer to a place in the layout that can accept the widget. 次のスクリーンショットでは、前の TextView (右側に表示) のすぐ下にマウス ポインターを移動するまで、ウィジェットは配置できません (左側に表示)。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):

マウスによって、ウィジェットを配置できる場所を示されますMouse indicates where widget can be placed

プレーンテキスト (EditText ウィジェット) が正しく配置されると、次のスクリーンショットに示されているように表示されます。When the Plain Text (an EditText widget) is placed correctly, it will appear as illustrated in the following screenshot:

プレーン テキスト ウィジェットを追加するAdd plain text widget

デザイン サーフェイスで Plain Text ウィジェットを選択した状態で、次のように、 [プロパティ] ウィンドウを使用して Plain Text ウィジェットの Id プロパティを @+id/PhoneNumberText に変更し、Text プロパティを 1-855-XAMARIN に変更します。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:

プレーン テキスト プロパティを設定するSet plain text properties

Button[ツールボックス] からデザイン サーフェイスにドラッグし、Plain Text ウィジェットの下に配置します。Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

デザインに変換ボタンをドラッグするDrag translate button to the design

デザイン サーフェイスで [Button] を選択した状態で、次のように、 [プロパティ] ウィンドウを使用してその Text プロパティを Translate に変更し、Id プロパティを @+id/TranslateButton に変更します。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:

変換ボタン プロパティを設定するSet translate button properties

[TextView][ツールボックス] からデザイン サーフェスにドラッグし、 [Button] ウィジェットの下に配置します。Drag a TextView from the Toolbox to the design surface and place it under the Button widget. [TextView]Text プロパティを空の文字列に変更し、その Id プロパティを @+id/TranslatedPhoneword に変更します。Change the Text property of the TextView to an empty string and set its Id property to @+id/TranslatedPhoneword:

テキスト ビューでプロパティを設定するSet the properties on the text view.

CTRL + S キーを押して、作業内容を保存します。Save your work by pressing CTRL+S.

コードを記述するWrite some code

次の手順では、電話番号を英数字から数字に変換するコードをいくつか追加します。The next step is to add some code to translate phone numbers from alphanumeric to numeric. 以下のように、ソリューション エクスプローラー ウィンドウの Phoneword プロジェクトを右クリックし、 [追加]、[新しい項目...] の順に選択して、新しいファイルをプロジェクトに追加します。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:

新しい項目を追加するAdd new item

[新しい項目の追加] ダイアログで、 [Visual C#]、[コード]、[コード ファイル] の順に選択し、新しいコード ファイルに PhoneTranslator.cs という名前を付けます。In the Add New Item dialog, select Visual C# > Code > Code File and name the new code file PhoneTranslator.cs:

PhoneTranslator.cs を追加するAdd PhoneTranslator.cs

これで、新しい空の C# クラスが作成されます。This creates a new empty C# class. このファイルに次のコードを挿入します。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;
        }
    }
}

[ファイル]、[保存] の順にクリックし (または CTRL + S キーを押し)、PhoneTranslator.cs ファイルへの変更内容を保存してから、ファイルを閉じます。Save the changes to the PhoneTranslator.cs file by clicking File > Save (or by pressing CTRL+S), then close the file.

ユーザー インターフェイスを接続するWire up the user interface

次の手順では、MainActivity クラスにバッキング コードを挿入し、ユーザー インターフェイスを接続するためのコードを追加します。The next step is to add code to wire up the user interface by inserting backing code into the MainActivity class. まず、Translate ボタンを接続します。Begin by wiring up the Translate button. MainActivity クラスで、OnCreate メソッドを見つけます。In the MainActivity class, find the OnCreate method. 次の手順では、OnCreate 内 (base.OnCreate(savedInstanceState) および SetContentView(Resource.Layout.activity_main) 呼び出しの下) にボタン コードを追加します。The next step is to add the button code inside OnCreate, below the base.OnCreate(savedInstanceState) and SetContentView(Resource.Layout.activity_main) calls. 最初に、OnCreate メソッドが次のようになるようにテンプレート コードを変更します。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
        }
    }
}

Android Designer を使用してレイアウト ファイルで作成されたコントロールへの参照を取得します。Get a reference to the controls that were created in the layout file via the Android Designer. OnCreate メソッド内 (SetContentView 呼び出しの後) に次のコードを追加します。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);

ユーザーが Translate ボタンを押したときに応答するコードを追加します。Add code that responds to user presses of the Translate button. OnCreate メソッド (前の手順で追加した行の後) に次のコードを追加します。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;
    }
};

[ファイル]、[すべて保存] の順に選択して (または CTRL + SHIFT + S キーを押して) 作業内容を保存し、 [ビルド]、[ソリューションのリビルド] の順に選択して (または CTRL + SHIFT + 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).

エラーがある場合は、アプリケーションが正常にビルドされるまで、前の手順を実行し、誤りを修正します。If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. "現在のコンテキストにリソースが存在しません" などのビルド エラーが表示された場合は、MainActivity.cs の名前空間名とプロジェクト名 (Phoneword) が一致していることを確認してから、ソリューションを完全にリビルドします。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. それでもビルド エラーが表示される場合は、最新の Visual Studio の更新プログラムをインストールしていることを確認します。If you still get build errors, verify that you have installed the latest Visual Studio updates.

アプリ名を設定するSet the app name

これでアプリケーションは動作します。次はアプリの名前を設定します。You should now have a working application – it's time to set the name of the app. (Resources フォルダー内の) values フォルダーを展開し、strings.xml ファイルを開きます。Expand the values folder (inside the Resources folder) and open the file strings.xml. 次に示すように、アプリ名の文字列を 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>

アプリを実行するRun the app

Android デバイスまたはエミュレーターでアプリケーションを実行してテストします。Test the application by running it on an Android device or emulator. [変換] ボタンをタップして、1-855-XAMARIN を電話番号に変換します。Tap the TRANSLATE button to translate 1-855-XAMARIN into a phone number:

アプリを実行中のスクリーンショットScreenshot of app running

Android デバイスでアプリを実行する方法については、「開発用のデバイスの設定」を参照してください。To run the app on an Android device, see how to set up your device for development.

Applications フォルダーまたは スポットライト から Visual Studio for Mac を起動します。Launch Visual Studio for Mac from the Applications folder or from Spotlight.

[新しいプロジェクト] をクリックして、新しいプロジェクトを作成します。Click New Project... to create a new project.

[新しいプロジェクト用のテンプレートを選びます] ダイアログで、 [Android]、[アプリ] の順にクリックして、 [Android アプリ] テンプレートを選択します。In the Choose a template for your new project dialog, click Android > App and select the Android App template. [次へ] をクリックします。Click Next.

Android アプリ テンプレートを選択するChoose the Android App template

[Android アプリの構成] ダイアログで、新しいアプリに Phoneword という名前を付けて [次へ] をクリックします。In the Configure your Android app dialog, name the new app Phoneword and click Next.

Android アプリを構成するConfigure the Android App

[Configure your new Android App](新しい Android アプリを構成します) ダイアログでは、ソリューションとプロジェクトの名前は Phoneword に設定したままにし、 [作成] をクリックしてプロジェクトを作成します。In the Configure your new Android App dialog, leave the Solution and Project names set to Phoneword and click Create to create the project.

レイアウトを作成するCreate a layout

ヒント

新しいリリースの 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.

新しいプロジェクトが作成されたら、 [ソリューション] パッドで Resources フォルダーを展開してから layout フォルダーを展開します。After the new project is created, expand the Resources folder and then the layout folder in the Solution pad. Main.axml をダブルクリックして、Android Designer で開きます。Double-click Main.axml to open it in the Android Designer. Android Designer で表示されるときの画面のレイアウト ファイルを以下に示します。This is the layout file for the screen when it is viewed in the Android Designer:

Main.axml を開くOpen Main.axml

[Hello World, Click Me!]Select the Hello World, Click Me! ボタン (デザイン サーフェイスにあります) を選択し、Delete キーを押して削除します。Button on the design surface and press the Delete key to remove it.

[ツールボックス] (右側の領域) の検索フィールドに「text」と入力し、デザイン サーフェイス (中央の領域) に Text (Large) ウィジェットをドラッグします。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):

ラージ テキスト ウィジェットを追加するAdd large text widget

デザイン サーフェイスで Text (Large) ウィジェットを選択した状態で、次のように、 [プロパティ] パッドを使用して Text (Large) ウィジェットの Text プロパティを Enter a Phoneword: に変更することができます。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:

ラージ テキスト ウィジェットのプロパティを設定するSet large text widget properties

次に、Plain Text ウィジェットを [ツールボックス] からデザイン サーフェイスにドラッグし、Text (Large) ウィジェットの下に配置します。Next, drag a Plain Text widget from the Toolbox to the design surface and place it underneath the Text (Large) widget. 次のように、検索フィールドを使用して、名前でウィジェットを見つけることができます。Notice that you can use the search field to help locate widgets by name:

プレーン テキスト ウィジェットを追加するAdd plain text widget

デザイン サーフェイスで Plain Text ウィジェットを選択した状態で、次のように、 [プロパティ] パッドを使用して Plain Text ウィジェットの Id プロパティを @+id/PhoneNumberText に変更し、Text プロパティを 1-855-XAMARIN に変更することができます。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:

プレーン テキスト ウィジェットのプロパティを設定するSet plain text widget properties

Button[ツールボックス] からデザイン サーフェイスにドラッグし、Plain Text ウィジェットの下に配置します。Drag a Button from the Toolbox to the design surface and place it underneath the Plain Text widget:

ボタンを追加するAdd a button

デザイン サーフェイスで Button を選択した状態で、次のように、 [プロパティ] パッドを使用して ButtonId プロパティを @+id/TranslateButton に変更し、Text プロパティを Translate に変更できます。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:

変換ボタンとして構成するConfigure as the translate button

[TextView][ツールボックス] からデザイン サーフェスにドラッグし、 [Button] ウィジェットの下に配置します。Drag a TextView from the Toolbox to the design surface and place it under the Button widget. 次のように、選択した [TextView] で、 [TextView]id プロパティを @+id/TranslatedPhoneWord に設定し、text を空の文字列に変更します。With the TextView selected, set the id property of the TextView to @+id/TranslatedPhoneWord and change the text to an empty string:

テキスト ビューでプロパティを設定するSet the properties on the text view.

⌘ + S キーを押して、作業内容を保存します。Save your work by pressing ⌘ + S.

コードを記述するWrite some code

ここでは、電話番号を英数字から数字に変換するコードをいくつか追加します。Now, add some code to translate phone numbers from alphanumeric to numeric. 以下のように、 [ソリューション] パッドの Phoneword プロジェクトの横にある歯車アイコンをクリックし、 [追加]、[新しいファイル...] の順に選択して、新しいファイルをプロジェクトに追加します。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...:

新しいファイルをプロジェクトに追加するAdd a new file to the project

[新しいファイル] ダイアログで、 [全般]、[空のクラス] の順に選択し、新しいファイルに PhoneTranslator という名前を付けて [新規] をクリックします。In the New File dialog, select General > Empty Class, name the new file PhoneTranslator, and click New. これで、新しい空の C# クラスが作成されます。This creates a new empty C# class for us.

新しいクラスのテンプレート コードをすべて削除し、次のコードに置き換えます。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;
        }
    }
}

[ファイル]、[保存] の順に選択し (または ⌘ + S キーを押し)、PhoneTranslator.cs ファイルへの変更内容を保存してから、ファイルを閉じます。Save the changes to the PhoneTranslator.cs file by choosing File > Save (or by pressing ⌘ + S), then close the file. ソリューションをリビルドして、コンパイル時エラーがないことを確認してください。Ensure that there are no compile-time errors by rebuilding the solution.

ユーザー インターフェイスを接続するWire up the user interface

次の手順では、MainActivity クラスにバッキング コードを追加し、ユーザー インターフェイスを接続するためのコードを追加します。The next step is to add code to wire up the user interface by adding the backing code into the MainActivity class. Solution PadMainActivity.cs をダブルクリックして開きます。Double-click MainActivity.cs in the Solution Pad to open it.

まず、 [変換] ボタンにイベント ハンドラーを追加します。Begin by adding an event handler to the Translate button. MainActivity クラスで、OnCreate メソッドを見つけます。In the MainActivity class, find the OnCreate method. OnCreate 内 (base.OnCreate(bundle) および SetContentView (Resource.Layout.Main) 呼び出しの下) にボタン コードを追加します。Add the button code inside OnCreate, below the base.OnCreate(bundle) and SetContentView (Resource.Layout.Main) calls. OnCreate メソッドが次のようになるように、既存のボタン処理コード (つまり、Resource.Id.myButton を参照してそのためのクリック ハンドラーを作成するコード) をすべて削除します。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
        }
    }
}

次は、Android Designer を使用してレイアウト ファイルで作成されたコントロールへの参照が必要になります。Next, a reference is needed to the controls that were created in the layout file with the Android Designer. OnCreate メソッド内 (SetContentView 呼び出しの後) に次のコードを追加します。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);

ユーザーが Translate ボタンを押したときに応答するコードを追加します。その場合、OnCreate メソッド (最後の手順で追加する行の後) に次のコードを追加します。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;
    }
};

作業内容を保存し、 [ビルド]、[すべてビルド] の順に選択して (または ⌘ + B キーを押して)、アプリケーションをビルドします。Save your work and build the application by selecting Build > Build All (or by pressing ⌘ + B). アプリケーションがコンパイルされると、Visual Studio for Mac の上部に成功メッセージが表示されます。If the application compiles, you will get a success message at the top of Visual Studio for Mac:

エラーがある場合は、アプリケーションが正常にビルドされるまで、前の手順を実行し、誤りを修正します。If there are errors, go through the previous steps and correct any mistakes until the application builds successfully. "現在のコンテキストにリソースが存在しません" などのビルド エラーが表示された場合は、MainActivity.cs の名前空間名とプロジェクト名 (Phoneword) が一致していることを確認してから、ソリューションを完全にリビルドします。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. それでもビルド エラーが表示される場合は、最新の Xamarin.Android および Visual Studio for Mac の更新プログラムをインストールしていることを確認します。If you still get build errors, verify that you have installed the latest Xamarin.Android and Visual Studio for Mac updates.

ラベルとアプリ アイコンを設定するSet the label and app icon

これでアプリケーションは動作します。次は最後の仕上げを加えます。Now that you have a working application, it's time to add the finishing touches! まず、MainActivityLabel を編集します。Start by editing the Label for MainActivity. Label は、Android の画面の上部に表示され、アプリケーションでの位置をユーザーに知らせます。The Label is what Android displays at the top of the screen to let users know where they are in the application. 以下のように、MainActivity クラスの上部にある LabelPhone Word に変更します。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
    {
        ...
    }
}

次は、アプリケーションのアイコンを設定します。Now it's time to set the application icon. 既定では、Visual Studio for Mac は、プロジェクトの既定のアイコンを提供します。By default, Visual Studio for Mac will provide a default icon for the project. ソリューションからこれらのファイルを削除して、別のアイコンに置き換えます。Delete these files from the solution, and replace them with a different icon. Solution Pad[リソース] フォルダーを展開します。Expand the Resources folder in the Solution Pad. 次のように、mipmap- のプレフィックスがついたフォルダーが 5 つあり、これらのフォルダーのそれぞれに Icon.png ファイルが 1 つ含まれています。Notice that there are five folders that are prefixed with mipmap-, and that each of these folders contains a single Icon.png file:

mipmap- フォルダーと Icon.png ファイルmipmap- folders and Icon.png files

これらの各アイコン ファイルをプロジェクトから削除する必要があります。It is necessary to delete each of these icon files from the project. Icon.png ファイルを右クリックし、コンテキスト メニューから [削除] を選択します。Right click on each of Icon.png files, and select Remove from the context menu:

既定の Icon.png を削除するDelete default Icon.png

ダイアログで [削除] ボタンをクリックします。Click on the Delete button in the dialog.

次に、Xamarin App Icons セットをダウンロードして解凍します。Next, download and unzip Xamarin App Icons set. この ZIP ファイルは、アプリケーションのアイコンを含んでいます。This zip file holds the icons for the application. 各アイコンは見た目は同じですが、さまざまな解像度で、画面密度が異なるさまざまなデバイスに正しくレンダリングできます。Each icon is visually identical but at different resolutions it renders correctly on different devices with different screen densities. Xamarin.Android プロジェクトに、このファイルのセットをコピーする必要があります。The set of files must be copied into the Xamarin.Android project. Visual Studio for Mac の Solution Pad で、mipmap-hdpi フォルダーを右クリックし、 [追加]、[ファイルの追加] の順に選択します。In Visual Studio for Mac, in the Solution Pad, right-click the mipmap-hdpi folder and select Add > Add Files:

ファイルを追加するAdd files

選択ダイアログから、解凍した Xamarin AdApp Icons のディレクトリに移動し、mipmap-hdpi フォルダーを開きます。From the selection dialog, navigate to the unzipped Xamarin AdApp Icons directory and open the mipmap-hdpi folder. Icon.png を選択して [開く] をクリックします。Select Icon.png and click Open.

[ファイルをフォルダーに追加する] ダイアログ ボックスで、 [Copy the file into the directory](ファイルをディレクトリにコピーする) を選択して [OK] をクリックします。In the Add File to Folder dialog box, select Copy the file into the directory and click OK:

[ファイルをディレクトリにコピーする] ダイアログCopy the file to the directory dialog

mipmap- Xamarin App Icons フォルダーの内容が Phoneword プロジェクトの対応する mipmap- フォルダーにコピーされるまで、mipmap- フォルダーごとにこれらの手順を繰り返します。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.

すべてのアイコンを Xamarin.Android プロジェクトにコピーしたら、Solution Pad でプロジェクトを右クリックして、 [プロジェクト オプション] ダイアログを開きます。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. [ビルド]、[Android アプリケーション] の順に選択し、 [アプリケーション アイコン] コンボ ボックスから @mipmap/icon を選択します。Select Build > Android Application and select @mipmap/icon from the Application icon combo box:

プロジェクト アイコンを設定するSetting the project icon

アプリを実行するRun the app

最後に、Android デバイスまたはエミュレーターでこのアプリケーションを実行し、Phoneword を変換してアプリケーションをテストします。Finally, test the application by running it on an Android device or emulator and translating a Phoneword:

完成時のアプリのスクリーンショットScreenshot of app when it is complete

Android デバイスでアプリを実行する方法については、「開発用のデバイスの設定」を参照してください。To run the app on an Android device, see how to set up your device for development.

おつかれさまでした。これで最初の Xamarin.Android アプリケーションが完成しました。Congratulations on completing your first Xamarin.Android application! 次は、ここで習得したツールとスキルを細かく分析します。Now it's time to dissect the tools and skills you have just learned. Hello, Android Deep Dive」 (Hello, Android の詳細) に進んでください。Next up is the Hello, Android Deep Dive.