Visual Studio で Xamarin を使用してネイティブ UI を備えたアプリを作成するBuild apps with native UI using Xamarin in Visual Studio

セットアップとインストール」と「Xamarin 環境を検証する」の手順を完了しましたが、このチュートリアルでは、ネイティブ UI レイヤーを備えた基本的な Xamarin アプリ (下図) を作成する方法を示します。Once you've done the steps in Setup and install and Verify your Xamarin environment, this walkthrough shows you how to build a basic Xamarin app (shown below) with native UI layers. ネイティブ UI を使用すると、共有コードはポータブル クラス ライブラリ (PCL) に存在し、個別のプラットフォーム プロジェクトに UI 定義が含まれます。With native UI, shared code resides in a portable class library (PCL) and the individual platform projects contain the UI definitions.

Android と Windows Phone 用 Xamarin アプリXamarin app on Android and Windows Phone

作成するには次の作業を行います。You'll do these things to build it:

ヒント

このプロジェクトの完全なソース コードは GitHub の mobile-samples リポジトリにあります。You can find the complete source code for this project in the mobile-samples repository on GitHub.

問題やエラーが発生した場合は、forums.xamarin.com に質問を投稿してください。Xamarin に必要な最新の SDK に更新することで多くのエラーを解決できます。エラーについては、Xamarin リリース ノートでプラットフォームごとの説明を参照してください。If you have difficulties or run into errors, please post questions on forums.xamarin.com. Many errors can be resolved by updating to the latest SDKs required by Xamarin, which are described in the Xamarin Release Notes for each platform.

注意

Xamarin の開発者向けドキュメントには、以下の一覧に示すクイック スタートと詳細情報の両方のセクションで、いくつかのチュートリアルも用意されています。Xamarin's developer documentation also offers several walkthroughs with both Quickstart and Deep Dive sections as listed below. これらのすべてのページで Visual Studio 固有のチュートリアルを表示するには、必ずページの右上で "Visual Studio" を選びます。On all these pages, be sure that "Visual Studio" is selected in the upper right of the page to see Visual Studio-specific walkthroughs.

ソリューションの設定Set up your solution

次の手順では、ネイティブ UI を使用した、共有コードの PCL と 2 つの追加された NuGet パッケージを含む Xamarin ソリューションを作成します。These steps create a Xamarin solution with native UI that contains a PCL for shared code and two added NuGet packages.

  1. Visual Studio では、新しい [空のアプリ (ネイティブ ポータブル)] ソリューションを作成し、名前を WeatherApp とします。In Visual Studio, create a new Blank App (Native Portable) solution and name it WeatherApp. このテンプレートは、検索フィールドに「ネイティブ ポータブル」と入力することによって、最も簡単に見つけることができます。You can find this template most easily by entering Native Portable into the search field.

    これがない場合は、Xamarin をインストールするか、Visual Studio 2015 の機能を有効にする必要があります。「セットアップとインストール」を参照してください。If it's not there, you might have to install Xamarin or enable the Visual Studio 2015 feature, see Setup and install.

  2. ソリューションを作成するために [OK] をクリックすると、いくつかの個別のプロジェクトが表示されます。After clicking OK to create the solution, you'll have a number of individual projects:

    • WeatherApp (ポータブル): Xamarin.Forms を使用している共通のビジネス ロジックと UI コードを含む、プラットフォームで共有されるコードの記述先である PCL。WeatherApp (Portable): the PCL where you'll write code that is shared across platforms, including common business logic and UI code using with Xamarin.Forms.

    • WeatherApp.Droid: ネイティブの Android コードを含むプロジェクト。WeatherApp.Droid: the project that contains the native Android code. これは、既定のスタートアップ プロジェクトとして設定されます。This is set as the default startup project.

    • WeatherApp.iOS: ネイティブの iOS コードを含むプロジェクト。WeatherApp.iOS: the project that contains the native iOS code.

    • WeatherApp.WinPhone (Windows Phone 8.1): ネイティブの Windows Phone コードを含むプロジェクト。WeatherApp.WinPhone (Windows Phone 8.1): the project that contains the native Windows Phone code.

      各ネイティブ プロジェクト内では、対応するプラットフォームのネイティブ デザイナーにアクセスでき、プラットフォーム固有の画面を実装できます。Within each native project you have access to the native designer for the corresponding platform and can implement platform specific screens.

  3. 気象データ サービスから取得した情報を処理するのに使用する Newtonsoft.Json と NuGet パッケージを PCL プロジェクトに追加します。Add the Newtonsoft.Json and NuGet package to the PCL project, which you'll use to process information retrieved from a weather data service:

    • ソリューション エクスプローラーで [ソリューション 'WeatherApp'] を右クリックし、[ソリューションの NuGet パッケージの管理] を選択します。Right-click Solution 'WeatherApp' in Solution explorer and select Manage NuGet Packages for Solution....

      NuGet のウィンドウで [参照] タブを選択し、Newtonsoft を検索します。In the NuGet window, select the Browse tab and search for Newtonsoft.

    • Newtonsoft.Jsonを選択します。Select Newtonsoft.Json.

    • ウィンドウの右側で、WeatherApp プロジェクトをチェックします (パッケージをインストールする必要があるプロジェクトは、このプロジェクトだけです)。On the right side of the window, check the WeatherApp project (this is the only project in which you need to install the package).

    • [バージョン] フィールドが 最新の安定した バージョンに設定されていることを確認してください。Ensure the Version field is set to the Latest stable version.

    • [インストール]をクリックします。Click Install.

    • Newtonsoft.Json NuGet パッケージの検索とインストールLocating and installing the Newtonsoft.Json NuGet package

  4. 手順 3 を繰り返して、Microsoft.Net.Http パッケージを検索し、インストールします。Repeat step 3 to find and install the Microsoft.Net.Http package.

  5. ソリューションをビルドし、ビルド エラーがないことを確認します。Build your solution and verify that there are no build errors.

共有データ サービス コードの記述Write shared data service code

WeatherApp (ポータブル) プロジェクトは、すべてのプラットフォームで共有されているポータブル クラス ライブラリ (PCL) 用のコードを記述する場所です。The WeatherApp (Portable) project is where you'll write code for the portable class library (PCL) that's shared across all platforms. PCL は、iOS、Android、Windows Phone 用のプロジェクトでビルドされたアプリ パッケージに自動的に含まれます。The PCL is automatically included in the app packages built by the iOS, Android, and Windows Phone projects.

次の手順では、PCL にコードを追加して、気象サービスからのデータにアクセスし、データを格納します。The following steps then add code to the PCL to access and store data from that weather service:

  1. このサンプルを実行するには、まず http://openweathermap.org/appidで無料 API キーを申し込む必要があります。To run this sample you must first sign up for a free API key at http://openweathermap.org/appid.

  2. WeatherApp プロジェクトを右クリックし、[追加]、[クラス...] の順に選択します。[新しい項目の追加] ダイアログで、ファイルに Weather.csという名前を指定します。Right-click the WeatherApp project and select Add > Class.... In the Add New Item dialog, name the file Weather.cs. このクラスは、気象データ サービスからのデータを保存するときに使用します。You'll use this class to store data from the weather data service.

  3. Weather.cs の内容全体を次のコードで置き換えます。Replace the entire contents of Weather.cs with the following:

    namespace WeatherApp  
    {  
        public class Weather  
        {  
            public string Title { get; set; }  
            public string Temperature { get; set; }  
            public string Wind { get; set; }  
            public string Humidity { get; set; }  
            public string Visibility { get; set; }  
            public string Sunrise { get; set; }  
            public string Sunset { get; set; }  
    
            public Weather()  
            {  
                //Because labels bind to these values, set them to an empty string to  
                //ensure that the label appears on all platforms by default.  
                this.Title = " ";  
                this.Temperature = " ";  
                this.Wind = " ";  
                this.Humidity = " ";  
                this.Visibility = " ";  
                this.Sunrise = " ";  
                this.Sunset = " ";  
            }  
        }  
    }  
    
  4. 別のクラスを DataService.cs という名前の PCL プロジェクトに追加します。これは、気象データ サービスからの JSON データを処理するのに使用します。Add another class to the PCL project named DataService.cs in which you'll use to process JSON data from the weather data service.

  5. DataService.cs の内容全体を次のコードで置き換えます。Replace the entire contents of DataService.cs with the following code:

    using System.Threading.Tasks;  
    using Newtonsoft.Json;  
    using System.Net.Http;  
    
    namespace WeatherApp  
    {  
        public class DataService  
        {  
            public static async Task<dynamic> getDataFromService(string queryString)  
            {  
                HttpClient client = new HttpClient();  
                var response = await client.GetAsync(queryString);  
    
                dynamic data = null;  
                if (response != null)  
                {  
                    string json = response.Content.ReadAsStringAsync().Result;  
                    data = JsonConvert.DeserializeObject(json);  
                }  
    
                return data;  
            }  
        }  
    }  
    
  6. 3 番目のクラスを、Core という名前の PCL に追加します。ここには、郵便番号を使用してクエリ文字列を生成し、気象データ サービスを呼び出した後に、Weather クラスのインスタンスを取り込むロジックなどの共有ビジネス ロジックを配置します。Add a third class to the PCL named Core where you'll put shared business logic, such as logic that forms a query string with a zip code, calls the weather data service, and populates an instance of the Weather class.

  7. Core.cs の内容を次のコードで置き換えます。Replace the contents of Core.cs with the following:

    using System;  
    using System.Threading.Tasks;  
    
    namespace WeatherApp  
    {  
        public class Core  
        {  
            public static async Task<Weather> GetWeather(string zipCode)  
            {  
                //Sign up for a free API key at http://openweathermap.org/appid  
                string key = "YOUR KEY HERE";  
                string queryString = "http://api.openweathermap.org/data/2.5/weather?zip="  
                    + zipCode + ",us&appid=" + key + "&units=imperial";  
    
                //Make sure developers running this sample replaced the API key
                if (key == "YOUR API KEY HERE")
                {
                    throw new ArgumentException("You must obtain an API key from openweathermap.org/appid and save it in the 'key' variable.");
                }
    
                dynamic results = await DataService.getDataFromService(queryString).ConfigureAwait(false);  
    
                if (results["weather"] != null)  
                {  
                    Weather weather = new Weather();  
                    weather.Title = (string)results["name"];                  
                    weather.Temperature = (string)results["main"]["temp"] + " F";  
                    weather.Wind = (string)results["wind"]["speed"] + " mph";                  
                    weather.Humidity = (string)results["main"]["humidity"] + " %";  
                    weather.Visibility = (string)results["weather"][0]["main"];  
    
                    DateTime time = new System.DateTime(1970, 1, 1, 0, 0, 0, 0);  
                    DateTime sunrise = time.AddSeconds((double)results["sys"]["sunrise"]);  
                    DateTime sunset = time.AddSeconds((double)results["sys"]["sunset"]);  
                    weather.Sunrise = sunrise.ToString() + " UTC";  
                    weather.Sunset = sunset.ToString() + " UTC";  
                    return weather;  
                }  
                else  
                {  
                    return null;  
                }  
            }  
        }  
    }  
    
  8. コード内の YOUR KEY HERE は、手順 1 で取得した API キーで置き換えます (キーを囲む引用符は必要です)。Replace YOUR KEY HERE in the code with the API key you obtained in step 1 (it still needs quotes around it).

  9. PCL の MyClass.cs は使用しないので削除します。Delete MyClass.cs in the PCL because we won't be using it.

  10. WeatherApp PCL プロジェクトをビルドし、コードが正しいことを確認します。Build the WeatherApp PCL project to make sure the code is correct.

Android 用 UI の設計Design UI for Android

次に、ユーザー インターフェイスを設計して共有コードに接続してから、アプリを実行します。Now, we'll design the user interface, connect it to your shared code, and then run the app.

アプリの外観を設計するDesign the look and feel of your app

  1. ソリューション エクスプ ローラーで、[WeatherApp.Droid]>[リソース]>[レイアウト] フォルダーを開き、Main.axml を開きます。In Solution Explorer, expand the WeatherApp.Droid>Resources>layout folder and open Main.axml. ビジュアル デザイナーでファイルが開きます。This opens the file in the visual designer. (Java 関連のエラーが表示された場合は、このブログの投稿を参照してください。)(If a Java-related error appears, see this blog post.)

    ヒント

    このプロジェクトには、他にも多くのファイルがあります。There are many other files in the project. それらの説明はこのトピックの範囲を超えていますが、Android プロジェクトの構造を詳細に知りたい場合は、xamarin.com で Hello Android のトピックにある「Part 2 Deep Dive」を参照してください。Exploring them is beyond the scope of this topic, but if you want to dive into the structure of an Android project a bit more, see Part 2 Deep Dive of the Hello Android topic on xamarin.com.

  2. デザイナーで表示される既定のボタンを選択し、削除します。Select and delete the default button that appears in the designer.

  3. [表示] > [その他のウィンドウ] > [ツールボックス]を選択してツールボックスを開きます。Open the Toolbox with View > Other Windows > Toolbox.

  4. [ツールボックス]から、 [相対レイアウト] コントロールをデザイナーにドラッグします。From the Toolbox, drag a RelativeLayout control onto the designer. このコントロールは、他のコントロールの親コンテナーとして使用します。You'll use this control as a parent container for other controls.

    ヒント

    レイアウトが正しく表示されない場合は、ファイルを保存し、[デザイン] タブと [ソース] タブを切り替えて表示を更新します。If at any time the layout doesn't seem to display correctly, save the file and switching between the Design and Source tabs to refresh.

  5. [プロパティ] ウィンドウで、background プロパティ (スタイルのグループ) を #545454 に設定します。In the Properties window, set the background property (in the Style group) to #545454.

  6. [ツールボックス]から、 [TextView] コントロールを [相対レイアウト] コントロールにドラッグします。From the Toolbox, drag a TextView control onto the RelativeLayout control.

  7. [プロパティ] ウィンドウで、次のプロパティを設定します (注: [プロパティ] ウィンドウのツール バーにある並べ替えボタンを使用して、一覧をアルファベット順に並べ替えるとわかりやすくなります)。In the Properties window, set these properties (note: it can help to sort the list alphabetically using the sort button in the Properties window toolbar):

    プロパティProperty [値]Value
    texttext Search by Zip CodeSearch by Zip Code
    IDid @+id/ZipCodeSearchLabel
    layout_marginLeftlayout_marginLeft 10dp
    textColortextColor @android:color/white
    textStyletextStyle bold

    ヒント

    選択可能な値のドロップダウン リストが表示されないプロパティが多いことに注意してください。Notice that many properties don't contain a drop-down list of values that you can select. 特定のプロパティにどのような文字列値を使用すべきなのか、推測しにくい場合があります。It can be difficult to guess what string value to use for any given property. 情報が必要な場合は、 R.attr クラスのページでプロパティの名前を検索してみてください。For suggestions, try searching for the name of a property in the R.attr class page.

    また、クイック Web 検索を実行すると、他のユーザーが同じプロパティを使ったページ「 http://stackoverflow.com/ 」が表示されることもよくあります。Also, a quick web search often leads to a page on http://stackoverflow.com/ where others have used the same property.

    参考として、[ソース] ビューに切り替えると、この要素のコードが次のように表示されます。For reference, if you switch to Source view, you should see the following code for this element:

    <TextView  
        android:text="Search by Zip Code"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:id="@+id/ZipCodeSearchLabel"  
        android:layout_centerVertical="true"  
        android:layout_marginLeft="10dp"  
        android:textColor="@android:color/white"  
        android:textStyle="bold" />  
    
  8. [ツールボックス] から、[TextView] コントロールを [RelativeLayout] コントロールにドラッグして、ZipCodeSearchLabel コントロールの下に配置します。From the Toolbox, drag a TextView control onto the RelativeLayout control and position it below the ZipCodeSearchLabel control. このとき、新しいコントロールを既存のコントロールの端に合わせてドロップします。デザイナーを拡大表示すると操作しやすくなります。You do this by dropping the new control on the appropriate edge of the existing control; it helps to zoom the designer in somewhat for this.

  9. [プロパティ] ウィンドウで、次のプロパティを設定します。In the Properties window, set these properties:

    プロパティProperty [値]Value
    テキストtext [郵便番号]Zip Code
    IDid @+id/ZipCodeLabel
    layout_marginLeftlayout_marginLeft 10dp
    layout_marginToplayout_marginTop 5dp

    [ソース] ビューに表示されるコードは次のようになります。The code in Source view should look like this:

    <TextView  
        android:text="Zip Code"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/ZipCodeSearchLabel"  
        android:id="@+id/ZipCodeLabel"  
        android:layout_marginTop="5dp"  
        android:layout_marginLeft="10dp" />  
    
  10. [ツールボックス] から [Number] コントロールを [RelativeLayout] にドラッグし、[Zip Code] ラベルの下に配置します。From the Toolbox, drag a Number control onto the RelativeLayout, position it below the Zip Code label. その後、次のプロパティを設定します。Then set the following properties:

    プロパティProperty [値]Value
    IDid @+id/zipCodeEntry
    layout_marginLeftlayout_marginLeft 10dp
    layout_marginBottomlayout_marginBottom 10dp
    widthwidth 165dp

    コードは次のようになります。Again, the code:

    <EditText  
        android:inputType="number"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/ZipCodeLabel"  
        android:id="@+id/zipCodeEntry"  
        android:layout_marginLeft="10dp"  
        android:layout_marginBottom="10dp"  
        android:width="165dp" />  
    
  11. [ツールボックス] から、[Button][RelativeLayout] コントロールにドラッグして、[zipCodeEntry] コントロールの右に配置します。From the Toolbox, drag a Button onto the RelativeLayout control and position it to the right of the zipCodeEntry control. 次に、以下のプロパティを設定します。Then set these properties:

    プロパティProperty [値]Value
    IDid @+id/weatherBtn
    テキストtext Get WeatherGet Weather
    layout_marginLeftlayout_marginLeft 20dp
    layout_alignBottomlayout_alignBottom @id/zipCodeEntry
    widthwidth 165dp
    <Button    android:text="Get Weather"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_toRightOf="@id/zipCodeEntry"  
        android:id="@+id/weatherBtn"  
        android:layout_marginLeft="20dp"  
        android:layout_alignBottom="@id/zipCodeEntry"  
        android:width="165dp" />  
    
  12. 以上で、Android デザイナーを使用して基本的な UI を構築するための知識は十分です。You now have enough experience to build a basic UI by using the Android designer. ページの .asxml ファイルにマークアップを直接追加して UI を構築することもできます。You can also build a UI by adding markup directly to the .asxml file of the page. その方法で残りの UI を構築するには、デザイナーの [ソース] ビューに切り替えて、次のマークアップを </RelativeLayout> タグのに貼り付けます (つまり、これらの要素は ReleativeLayout に含まれません)。To build the rest of the UI that way, switch to Source view in the designer, then past the following markup beneath the </RelativeLayout> tag (yes, that's beneath the tag...these elements are not contained in the ReleativeLayout).

    <TextView  
            android:text="Location"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/locationLabel"  
            android:layout_marginLeft="10dp"  
            android:layout_marginTop="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/locationText"  
            android:layout_marginLeft="20dp"  
            android:layout_marginBottom="10dp" />  
        <TextView  
            android:text="Temperature"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/tempLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/tempText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
        <TextView  
            android:text="Wind Speed"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/windLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/windText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
        <TextView  
            android:text="Humidity"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/humidtyLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/humidityText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
        <TextView  
            android:text="Visibility"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/visibilityLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/visibilityText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
        <TextView  
            android:text="Time of Sunrise"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/sunriseLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/sunriseText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
        <TextView  
            android:text="Time of Sunset"  
            android:textAppearance="?android:attr/textAppearanceSmall"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/sunsetLabel"  
            android:layout_marginLeft="10dp" />  
        <TextView  
            android:textAppearance="?android:attr/textAppearanceMedium"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/sunsetText"  
            android:layout_marginBottom="10dp"  
            android:layout_marginLeft="20dp" />  
    
  13. ファイルを保存し、[デザイン] ビューに切り替えます。Save the file and switch to Design view. 次のような UI が表示されます。Your UI should appear as follows:

    Android アプリ用 UIUI for Android app

  14. MainActivity.cs を開き、前の手順で削除した既定のボタンを参照している行を OnCreate メソッドから削除します。Open MainActivity.cs and delete the lines in the OnCreate method that refer to the default button that was removed earlier. 完了したコードは次のようになります。The code should look like this when you're done:

    protected override void OnCreate (Bundle bundle)  
    {  
        base.OnCreate (bundle);  
    
        // Set our view from the "main" layout resource  
        SetContentView (Resource.Layout.Main);  
    }  
    
  15. Android プロジェクトをビルドして作業内容を確認します。Build the Android project to check your work. ビルドを実行すると、Resource.Designer.cs ファイルにコントロール ID が追加されるため、コード中で名前を指定してコントロールを参照できるようになります。Note that building adds control IDs to the Resource.Designer.cs file so that you can refer to controls by name in code.

共有コードを使用するConsume your shared code

  1. コード エディターで WeatherApp プロジェクトの MainActivity.cs ファイルを開き、ファイルの内容を以下のコードに置き換えます。Open the MainActivity.cs file of the WeatherApp project in the code editor and replace its contents with the code below. このコードは、共有コードで定義した GetWeather メソッドを呼び出します。This code calls the GetWeather method that you defined in your shared code. そして、そのメソッドから取得したデータをアプリの UI に表示します。Then, in the UI of the app, it shows the data that is retrieved from that method.

    using System;  
    using Android.App;  
    using Android.Widget;  
    using Android.OS;  
    
    namespace WeatherApp.Droid  
    {  
        [Activity(Label = "Sample Weather App", MainLauncher = true, Icon = "@drawable/icon")]  
        public class MainActivity : Activity  
        {  
            protected override void OnCreate(Bundle bundle)  
            {  
                base.OnCreate(bundle);  
    
                SetContentView(Resource.Layout.Main);  
    
                Button button = FindViewById<Button>(Resource.Id.weatherBtn);  
    
                button.Click += Button_Click;  
            }  
    
            private async void Button_Click(object sender, EventArgs e)  
            {  
                EditText zipCodeEntry = FindViewById<EditText>(Resource.Id.zipCodeEntry);  
    
                if (!String.IsNullOrEmpty(zipCodeEntry.Text))  
                {  
                    Weather weather = await Core.GetWeather(zipCodeEntry.Text);  
                    FindViewById<TextView>(Resource.Id.locationText).Text = weather.Title;  
                    FindViewById<TextView>(Resource.Id.tempText).Text = weather.Temperature;  
                    FindViewById<TextView>(Resource.Id.windText).Text = weather.Wind;  
                    FindViewById<TextView>(Resource.Id.visibilityText).Text = weather.Visibility;  
                    FindViewById<TextView>(Resource.Id.humidityText).Text = weather.Humidity;  
                    FindViewById<TextView>(Resource.Id.sunriseText).Text = weather.Sunrise;  
                    FindViewById<TextView>(Resource.Id.sunsetText).Text = weather.Sunset;  
                }  
            }  
        }  
    }  
    

アプリを実行して結果を確認してください。Run the app and see how it looks

  1. ソリューション エクスプローラーで、WeatherApp.Droid プロジェクトがスタートアップ プロジェクトとして設定されていることを確認します。In Solution Explorer, make sure the WeatherApp.Droid project is set as the startup project.

  2. 適切なデバイスまたはエミュレーターのターゲットを選択し、F5 キーを押してアプリケーションを開始します。Select an appropriate device or emulator target, then start the app by pressing the F5 key.

  3. デバイスまたはエミュレーターで、米国の有効な郵便番号 (例: 60601) を編集ボックスに入力してから、[Get Weather] をクリックします。On the device or in the emulator, type a valid United States zip code into the edit box (for example: 60601), and press Get Weather. 該当する地域の気象データがコントロールに表示されます。Weather data for that region then appears in the controls.

    Android および Windows Phone 用お天気アプリWeather app for Android and Windows Phone

ヒント

このプロジェクトの完全なソース コードは GitHub の mobile-samples リポジトリにあります。The complete source code for this project is in the mobile-samples repository on GitHub.

Windows Phone 用 UI の設計Design UI for Windows Phone

次に、Windows Phone 用のユーザー インターフェイスを設計して共有コードに接続してから、アプリを実行します。Now we'll design the user interface for Windows Phone, connect it to your shared code, and then run the app.

アプリの外観を設計するDesign the look and feel of your app

Xamarin アプリでネイティブの Windows Phone UI を設計するプロセスは、他のネイティブ Windows Phone アプリと同じです。The process of designing native Windows Phone UI in a Xamarin app is no different from any other native Windows Phone app. このため、デザイナーの使用方法の詳細についてここでは説明しません。For this reason, we won't go into the details here of how to use the designer. XAML デザイナーを使用した UI の作成」を参照してください。For that, refer to Creating a UI by using XAML Designer.

代わりに、MainPage.xaml を開き、すべての XAML コードを以下のコードで置き換えます。Instead, simply open MainPage.xaml and replace all the XAML code with the following:

<Page  
    x:Class="WeatherApp.WinPhone.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:WeatherApp.WinPhone"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  

    <Grid>  
        <StackPanel HorizontalAlignment="Left" Height="40" Margin="10,0,0,0" VerticalAlignment="Top" Width="400">  
            <TextBlock x:Name="pageTitle" Text="Weather App" FontSize="30" />  
        </StackPanel>  
        <StackPanel HorizontalAlignment="Left" Height="120" Margin="10,40,0,0" VerticalAlignment="Top" Width="400" Background="#FF545454">  

            <TextBlock x:Name="zipCodeSearchLabel" TextWrapping="Wrap" Text="Search by Zip Code" FontSize="18" FontWeight="Bold" HorizontalAlignment="Left" Margin="10,10,0,0"/>  
            <TextBlock x:Name="zipCodeLabel" TextWrapping="Wrap" Text="Zip Code" Margin="10,5,0,0" FontSize="14" Foreground="#FFA8A8A8"/>  
            <StackPanel Orientation="Horizontal">  
                <TextBox x:Name="zipCodeEntry" Margin="10,10,0,0" Text="" VerticalAlignment="Top" InputScope="Number" Width="165" />  
                <Button x:Name="weatherBtn" Content="Get Weather" Width="165" Margin="20,0,0,0" Height="60" Click="GetWeatherButton_Click"/>  
            </StackPanel>  
        </StackPanel>  
        <StackPanel Margin="10,175,0,0">  
            <TextBlock x:Name="locationLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Location" VerticalAlignment="Top"/>  
            <TextBlock x:Name="locationText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="tempLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Temperature" VerticalAlignment="Top"/>  
            <TextBlock x:Name="tempText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="windLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Wind Speed" VerticalAlignment="Top"/>  
            <TextBlock x:Name="windText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="humidityLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Humidity" VerticalAlignment="Top"/>  
            <TextBlock x:Name="humidityText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="visibilityLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Temperature" VerticalAlignment="Top"/>  
            <TextBlock x:Name="visibilityText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="sunriseLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Time of Sunriweatherse" VerticalAlignment="Top"/>  
            <TextBlock x:Name="sunriseText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
            <TextBlock x:Name="sunsetLabel" HorizontalAlignment="Left" FontSize="14" Foreground="#FFA8A8A8" TextWrapping="Wrap" Text="Time of Sunset" VerticalAlignment="Top"/>  
            <TextBlock x:Name="sunsetText" Margin="10,0,0,10" HorizontalAlignment="Left" FontSize="18" TextWrapping="Wrap" VerticalAlignment="Top"/>  
        </StackPanel>  
    </Grid>  
</Page>  

デザイン ビユーでは、UI は次のように表示されます。In the design view, your UI should appear as follows:

Windows Phone アプリの UIWindows Phone app UI

共有コードを使用するConsume your shared code

  1. デザイナーで、 [Get Weather] ボタンをクリックします。In the designer, select the Get Weather button.

  2. [プロパティ] ウィンドウで、イベント ハンドラー ボタン (Visual Studio イベント ハンドラー アイコン) を選択します。In the Properties window, choose the event handler button (Visual Studio Event Handlers icon).

    このアイコンは [プロパティ] ウィンドウの上隅に表示されます。This icon appears in the top corner of the Properties window.

  3. [クリック] イベントの隣に「 GetWeatherButton_Click」と入力し、ENTER キーを押します。Next to the Click event, type GetWeatherButton_Click, and then press the ENTER key.

    GetWeatherButton_Clickという名前のイベント ハンドラーが生成されます。This generates an event handler named GetWeatherButton_Click. コード エディターが開き、カーソルがイベント ハンドラーのコード ブロック内に配置されます。The code editor opens and places your cursor inside of the event handler code block. 注: Enter キーを押してもエディターが開かない場合は、イベント名をダブルクリックします。Note: if the editor doesn't open when pressing ENTER, just double-click the event name.

  4. イベント ハンドラーを次のコードで置き換えます。Replace that event handler with the following code.

    private async void GetWeatherButton_Click(object sender, RoutedEventArgs e)  
    {  
        if (!String.IsNullOrEmpty(zipCodeEntry.Text))  
        {  
            Weather weather = await Core.GetWeather(zipCodeEntry.Text);  
            locationText.Text = weather.Title;  
            tempText.Text = weather.Temperature;  
            windText.Text = weather.Wind;  
            visibilityText.Text = weather.Visibility;  
            humidityText.Text = weather.Humidity;  
            sunriseText.Text = weather.Sunrise;  
            sunsetText.Text = weather.Sunset;  
    
            weatherBtn.Content = "Search Again";  
        }  
    }  
    

    このコードは、共有コードで定義した GetWeather メソッドを呼び出します。This code calls the GetWeather method that you defined in your shared code. このメソッドは、Android アプリで呼び出したものと同じです。This is the same method that you called in your Android app. このコードは、アプリの UI コントロールのメソッドから取得したデータも表示します。This code also shows data retrieved from that method in the UI controls of your app.

  5. 開いている MainPage.xaml.cs で、OnNavigatedTo メソッドの中のすべてのコードを削除します。In MainPage.xaml.cs, which is open, delete all the code inside the OnNavigatedTo method. このコードは、MainPage.xaml の内容を置き換えたときに削除された既定のボタンを処理したコードです。This code simply handled the default button that was removed when we replaced the contents of MainPage.xaml.

アプリを実行して結果を確認してください。Run the app and see how it looks

  1. ソリューション エクスプローラーで、WeatherApp.WinPhone プロジェクトをスタートアップ プロジェクトに設定します。In Solution Explorer, set the WeatherApp.WinPhone project as the startup project.

  2. F5 キーを押すとアプリが起動します。Start the app by pressing the F5 key.

  3. Windows Phone エミュレーターで、米国の有効な郵便番号を編集ボックスに入力 (例: 60601) してから、[Get Weather] をクリックします。In the Windows Phone emulator, type a valid United States zip code into the edit box (for example: 60601), and press Get Weather. 該当する地域の気象データがコントロールに表示されます。Weather data for that region then appears in the controls.

    実行中のアプリの Windows バージョンWindows version of the running app

ヒント

このプロジェクトの完全なソース コードは GitHub の mobile-samples リポジトリにあります。The complete source code for this project is in the mobile-samples repository on GitHub.

次のステップNext steps

iOS 用 UI をソリューションに追加するAdd UI for iOS to the solution

iOS 用のネイティブ UI を追加することで、このサンプルを拡張します。Extend this sample by adding native UI for iOS. そのためには、Xcode と Xamarin がインストールされているローカル ネットワーク上の Mac に接続する必要があります。For this you'll need to connect to a Mac on your local network that has Xcode and Xamarin installed. 接続すると、Visual Studio で直接 iOS デザイナーを使用することができます。Once you do, you can use the iOS designer directly in Visual Studio. 完成したアプリを確認するには、GitHub の mobile-samples リポジトリを参照してください。See the mobile-samples repository on GitHub for a completed app.

また、Hello, iOS (xamarin.com) のチュートリアルもご覧ください。Also refer to the Hello, iOS (xamarin.com) walkthrough. このページで正しい手順のセットを表示するには、必ず xamarin.com 上のページの右上で "Visual Studio" を選びます。Note that on this page, be sure that "Visual Studio" is selected in the upper right corner of pages on xamarin.com so that the correct set of instructions appear.

共有プロジェクトにプラットフォーム固有のコードを追加するAdd platform-specific code in a shared project

PCL はコンパイルされてから各プラットフォーム固有のアプリ パッケージに組み込まれるため、PCL の共有コードはプラットフォームに中立的です。Shared code in a PCL is platform-neutral, because the PCL is compiled once and included in each platform-specific app package. 条件付きコンパイルを使用してプラットフォーム固有のコードを区別した共有コードを記述する場合は、共有プロジェクトを使用することができます。If you want to write shared code that uses conditional compilation to isolate platform-specific code, you can use a shared project. 詳細については、コード共有オプション (xamarin.com) の説明を参照してください。For more details, see ode Sharing Options (xamarin.com).

参照See Also

Xamarin の開発者向けサイト Xamarin Developer site
Windows デベロッパー センター Windows Dev Center
Swift および C# のクイック リファレンス ポスターSwift and C# Quick Reference Poster