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

クロスプラットフォーム モバイル アプリケーションの記述に Xamarin と C# を選択する開発者の多くは Xamarin.Forms を使用します。Most developers who choose Xamarin and C# for writing cross-platform mobile applications use Xamarin.Forms. Xamarin.Forms によって、iOS、Android、ユニバーサル Windows プラットフォーム (UWP) のネイティブ コントロールにマッピングされるユーザー インターフェイスが定義されます。Xamarin.Forms defines a user interface that maps to native controls in iOS, Android, and the Universal Windows Platform (UWP). Xamarin.Forms の詳細は「Visual Studio での Xamarin Froms を使用したアプリ作成の基本事項」という記事にあります。Xamarin.Forms is described in the article Learn app-building basics with Xamarin.Forms in Visual Studio.

この記事では、各プラットフォームのネイティブ ユーザー インターフェイス API へのアクセスに関連する別の手法について説明しています。This article describes a different approach that involves accessing the native user-interface APIs of each platform. ネイティブ API の使用は、各プラットフォームの広範な知識が必要になるため、Xamarin.Forms の場合よりもはるかに難しい手法となります。Working with native APIs is a much harder approach than Xamarin.Forms because it requires extensive knowledge of each platform. その利点は、各プラットフォームの特定の長所と機能に合わせてユーザー インターフェイスを作成できること、それでいながら基礎となるビジネス ロジックが共有されることにあります。The advantage is that you can tailor the user interface to the particular strengths and capabilities of each platform, while still sharing underlying business logic.

セットアップとインストール」と「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 with native UI layers. ネイティブ UI の場合、共有コードは .NET Standard ライブラリに存在し、個別のプラットフォーム プロジェクトに UI 定義が含まれます。With native UI, shared code resides in a .NET Standard library and the individual platform projects contain the UI definitions. 下の画像はこれからビルドするアプリケーションの画面です。(左から右へ) iOS フォン、Android フォン、Windows 10 で実行されています。Here is the application that you'll build running on (from left to right) iOS and Android phones, and the Windows 10 desktop.

iOS、Android、Windows の Xamarin アプリXamarin app on iOS, Android, and Windows

作成するには次の作業を行います。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 to see walkthroughs specific to Visual Studio.

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

Visual Studio には、.NET Standard ライブラリを共有するネイティブ UI アプリケーションを作成するためのソリューション テンプレートがありません。Visual Studio does not have a solution template for creating native UI applications sharing a .NET Standard library. しかしながら、そのようなソリューションを個々のプロジェクトからビルドすることは難しくありません。However, it's not hard to build such a solution from the individual projects. 以下の手順では、アプリケーション プラットフォームの種類別のプロジェクトで Xamarin ソリューションが作成され、共有されるコードのための .NET Standard ライブラリが作成されます。These steps create a Xamarin solution with projects for each type of application platform, and a .NET Standard library for shared code.

  1. Visual Studio で新しいクラス ライブラリ (.NET Standard) ソリューションを作成し、それに WeatherApp という名前を付けます。In Visual Studio, create a new Class Library (.NET Standard) solution and name it WeatherApp. このテンプレートは、左にある [Visual C#] を選択し、[.NET Standard] を選択することで非常に簡単に見つけることができます。You can find this template most easily by selecting Visual C# at the left and then .NET Standard:

    .NET Standard ソリューションを作成するCreating the .NET Standard solution

    [OK] のクリック後、WeatherApp ソリューションが WeatherApp という名前の 1 つのプロジェクトで構成されます。After clicking OK, the WeatherApp solution consists of a single project named WeatherApp.

  2. iOS を対象にする場合、ソリューションに iOS プロジェクトを追加します。If you want to target iOS, add an iOS project to the solution. ソリューション エクスプローラーでソリューション名を右クリックし、[追加][新しいプロジェクト] の順に選択します。Right-click the solution name in the Solution Explorer and select Add and New Project. [新しいプロジェクト] ダイアログで、左にある [Visual C#] を選択し、[iOS][ユニバーサル] を選択します。In the New Project dialog, at the left select Visual C#, and then iOS and Universal. (テンプレートがない場合は、Xamarin をインストールするか、Visual Studio 2017 の機能を有効にする必要があります。「セットアップとインストール」をご覧ください。)テンプレートの一覧で、[単一ビュー アプリ (iOS)] を選択します。(If it's not there, you might have to install Xamarin or enable the Visual Studio 2017 feature, see Setup and install.) In the list of templates, select Single View App (iOS). これに WeatherApp.iOS という名前を付けます。Name it WeatherApp.iOS.

  3. Android を対象にする場合、ソリューションに Android プロジェクトを追加します。If you want to target Android, add an Android project to the solution. [新しいプロジェクト] ダイアログで、左にある [Visual C#][Android] を選択します。In the New Project dialog, at the left select Visual C# and Android. テンプレートの一覧で、[空のアプリ (Android)] を選択します。In the template list, select Blank App (Android). これに WeatherApp.Android という名前を付けます。Name it WeatherApp.Android.

  4. ユニバーサル Windows プラットフォームを対象にする場合、[新しいプロジェクト] ダイアログで、左にある [Visual C#][Windows ユニバーサル] を選択します。If you want to target the Universal Windows Platform, in the New Project dialog, at the left select Visual C# and Windows Universal. テンプレートの一覧で、[空のアプリ (ユニバーサル Windows)] を選択し、それに WeatherApp.UWP という名前を付けます。In the template list, select Blank App (Universal Windows) and name it WeatherApp.UWP.

  5. アプリケーション プロジェクト (iOS、Android、UWP) ごとに、ソリューション エクスプローラー[参照] セクションを右クリックし、[参照の追加] を選択します。For each of the application projects (iOS, Android, and UWP), right-click the References section in the Solution Explorer and select Add Reference. [参照マネージャー] ダイアログの左で [プロジェクト][ソリューション] を選択します。In the Reference Manager dialog, at the left select Project and Solution. ソリューションのすべてのプロジェクトが一覧表示されます。ただし、参照を自分で管理しているプロジェクトは含まれていません。You'll see a list of all the projects in the solution except the project whose references you're managing:

    .NET Standard プロジェクトの参照を設定するSetting a reference to the .NET Standard project

    WeatherApp の隣にあるチェックボックスを選択します。Check the checkbox next to WeatherApp.

    アプリケーション プロジェクトごとにこのボックスを選択すると、すべてのプロジェクトに .NET Standard ライブラリの参照が含まれ、そのライブラリのコードを共有できます。After you've checked this box for each of the application projects, all the projects contain references to the .NET Standard library and can share the code in that library.

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

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

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

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

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

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

  7. 手順 7 を繰り返し、Microsoft.CSharp パッケージを見つけ、.NET Standard プロジェクトにインストールします。Repeat step 7 to find and install the Microsoft.CSharp package in the .NET Standard project. このライブラリは、.NET Standard ライブラリの C# dynamic データ型を使用するために必要です。This library is necessary to use the C# dynamic data type in a .NET Standard library.

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

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

WeatherApp プロジェクトは .NET Standard ライブラリです。The WeatherApp project is the .NET Standard library. このプロジェクトは、すべてのプラットフォームで共有されるコードを記述する場所になります。This project is where you'll write code that is shared across all platforms. 各アプリケーション プロジェクトに .NET Standard ライブラリの参照があるため、このライブラリは iOS、Android、UWP という各種アプリ パッケージに付属します。Because each application project has a reference to the .NET Standard library, the library is included with the iOS, Android, and UWP app packages.

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

  1. まず、http://openweathermap.org/appid で新規登録し、無料の天気 API キーを入手してください。First sign up for a free weather API key at http://openweathermap.org/appid. この API キーによって、アプリケーションは米国のあらゆる郵便番号を対象に天気を取得できます。This API key will allow the application to obtain the weather for any United States zip code. (米国以外の郵便番号では機能しません。)(It does not work for postal codes outside of the United States.)

  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 code:

    namespace WeatherApp
    {
        public class Weather
        {
            // Because labels bind to these values, set them to an empty string to
            // ensure that the label appears on all platforms by default.
            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; } = " ";
        }
    }
    
  4. DataService.cs という名前の .NET Standard プロジェクトに別のクラスを追加します。Add another class to the .NET Standard project named DataService.cs. このクラスは、気象データ サービスからの JSON データを処理するときに使用します。You'll use this class 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.Net.Http;  
    using System.Threading.Tasks;  
    using Newtonsoft.Json;  
    
    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. Core.cs という名前の .NET Standard ライブラリに 3 つ目のクラスを追加します。Add a third class to the .NET Standard library named Core.cs. このクラスを使用して郵便番号でクエリ文字列を生成し、気象データ サービスを呼び出し、Weather クラスのインスタンスにデータを取り込みます。You'll use this class to form a query string with a zip code, call the weather data service, and populate an instance of the Weather class.

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

    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 API 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 API KEY HERE を手順 1 で取得した API キーで置き換えます。Replace the first occurrence of YOUR API KEY HERE with the API key you obtained in step 1. ここでも引用符で囲む必要があります。It still needs quotes around it!

  9. .NET Standard ライブラリの MyClass.cs は使用されないため、削除します。Delete MyClass.cs in the .NET Standard library because it won't be used.

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

Android 用 UI の設計Design UI for Android

これで、ユーザー インターフェイスを設計して共有コードに接続し、アプリを実行できます。Now you can 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 the Solution Explorer, expand the WeatherApp.Droid > Resources > layout folder and open Main.axml. このコマンドによって、ビジュアル デザイナーでファイルが開きます。This command 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 プロジェクトの構造をもう少し詳しく知りたい場合は、Hello Android という二部構成記事の第 2 部に相当する「Hello Android: 詳細説明」を参照してください。Exploring them is beyond the scope of this article, 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 article.

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

  3. [ツールボックス] から、 [相対レイアウト] コントロールをデザイナーにドラッグします。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.

  4. [プロパティ] ウィンドウで、background プロパティ (スタイルのグループ) を #545454 に設定します。In the Properties window, set the background property (in the Style group) to #545454. [プロパティ] ウィンドウの見出しを見て、RelativeLayout の背景を設定していることを確認してください。Make sure by the heading in the Properties window that you're setting the background for the RelativeLayout.

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

  6. [プロパティ] ウィンドウで、次のプロパティを設定します。In the Properties window, set these properties. ([プロパティ] ウィンドウのツール バーにある並べ替えボタンを使用して一覧をアルファベット順に並べ替えるとわかりやすくなります。)(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_marginStartlayout_marginStart 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_marginStart="10dp"  
        android:textColor="@android:color/white"  
        android:textStyle="bold" />  
    
  7. [ツールボックス] から、[TextView] コントロールを [RelativeLayout] コントロールにドラッグして、ZipCodeSearchLabel コントロールの下に配置します。From the Toolbox, drag a TextView control onto the RelativeLayout control and position it below the ZipCodeSearchLabel control. 既存のコントロールの適切な端に新しいコントロールをドロップします。Drop the new control on the appropriate edge of the existing control. デザイナーをいくらか拡大すると、コントロールの位置を調整しやすくなります。It helps to zoom in the designer somewhat to position the control.

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

    プロパティProperty [値]Value
    テキストtext [郵便番号]Zip Code
    IDid @+id/ZipCodeLabel
    layout_marginStartlayout_marginStart 10dp
    layout_marginToplayout_marginTop 6dp
    textColortextColor @android:color/white

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

    <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_marginStart="10dp"
        android:layout_marginTop="6dp"  
        android:textColor="@android:color/white" />  
    
  9. [ツールボックス] から [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_marginStartlayout_marginStart 10dp
    layout_marginBottomlayout_marginBottom 10dp
    widthwidth 165dp
    textColortextColor @android:color/white

    Number コントロールは、米国の 5 桁の郵便番号を入力する場所になります。The Number control is where the user will type in a five-digit United States zip code. このコントロールに相当するマークアップは次のようになります。Here's the markup that corresponds to that control:

    <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_marginStart="10dp"  
        android:layout_marginBottom="10dp"  
        android:width="165dp"  
        android:textColor="@android:color/white" />  
    
  10. [ツールボックス] から、[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_marginStartlayout_marginStart 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_marginStart="20dp"  
        android:layout_alignBottom="@id/zipCodeEntry"  
        android:width="165dp" />  
    
  11. 以上で、Android デザイナーを使用して基本的な UI を構築するための知識は十分です。You now know enough to build a basic UI by using the Android designer. ページの Main.axml ファイルにマークアップを直接追加して UI を構築することもできます。You can also build a UI by adding markup directly to the Main.axml file of the page. この方法で残りの UI をビルドするには、デザイナーでソース ビューに切り替え、終了タグ </RelativeLayout> の "下に" 次のマークアップを貼り付けます。To build the rest of the UI that way, switch to Source view in the designer, then paste the following markup beneath the </RelativeLayout> end tag. (このような要素は RelativeLayout に含まれていないため、タグの下に置く必要があります。)(They must be beneath the tag because these elements are not contained in the RelativeLayout.)

    <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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="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_marginStart="20dp" />  
    
  12. ファイルを保存し、[デザイン] ビューに切り替えます。Save the file and switch to Design view. 次のような UI が表示されます。Your UI should appear as follows:

    Android アプリ用 UIUI for Android app

  13. Open MainActivity.cs を開きます。Open MainActivity.cs. コードは次のようになります。Here's how the code should look:

    protected override void OnCreate (Bundle bundle)  
    {  
        base.OnCreate (bundle);  
    
        // Set our view from the "main" layout resource  
        SetContentView (Resource.Layout.Main);  
    }  
    
  14. Android プロジェクトをビルドして作業内容を確認します。Build the Android project to check your work. このビルド プロセスにより、Resource.Designer.cs ファイルにコントロール ID が追加されるため、コード中で名前を指定してコントロールを参照できるようになります。The build process 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", 
                  Theme = "@android:style/Theme.Material.Light", 
                  MainLauncher = true)]  
        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;  
                }  
            }  
        }  
    }  
    

    背景が光のテーマがアクティビティに与えられています。Notice that the activity has been given a theme for a light background.

アプリを実行して結果を確認してください。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.

    注意

    Android プロジェクトで Newtonsoft.Json ファイルが見つからないことが Visual Studio で示された場合、その NuGet パッケージを Android プロジェクトに追加します。If Visual Studio indicates that the Android project cannot find the Newtonsoft.Json file, add that NuGet package to the Android project.

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

    Android の Xamarin アプリXamarin app on Android

ヒント

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

Windows 用 UI の設計Design UI for Windows

次の手順として、Windows 用のユーザー インターフェイスを設計し、共有コードに接続し、アプリを実行します。The next step is to design the user interface for Windows, connect it to your shared code, and then run the app.

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

Xamarin アプリでネイティブ UWP ユーザー インターフェイスを設計するプロセスは、他のあらゆるネイティブ UWP アプリの場合と異なりません。The process of designing a native UWP user interface in a Xamarin app is no different from any other native UWP app. そのため、デザイナーの使用についてはここではお話ししません。For this reason, the use of the designer won't be discussed here. 詳細については、「XAML デザイナーを使用した UI の作成」を参照してください。For a detailed discussion, refer to Creating a UI by using XAML Designer.

代わりに MainPage.xaml を開き、XAML コンテンツ全体を次のマークアップに置き換えます。Instead, open MainPage.xaml and replace the entire XAML contents with the following markup:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

            <TextBlock Text="Search by Zip Code" TextWrapping="Wrap" 
                       HorizontalAlignment="Left" Margin="10,10,0,0"
                       Foreground="White" FontSize="18" FontWeight="Bold" />

            <TextBlock Text="Zip Code" TextWrapping="Wrap" 
                       Margin="10,5,0,0" FontSize="14" Foreground="#FFA8A8A8"/>

            <StackPanel Orientation="Horizontal">

                <TextBox x:Name="zipCodeEntry" Text="" 
                         Margin="10,10,0,0" VerticalAlignment="Top" 
                         InputScope="Number" Width="165" />

                <Button x:Name="weatherBtn" Content="Get Weather" 
                        Foreground="White" Width="165" Margin="20,0,0,0" Height="60" 
                        Click="GetWeatherButton_Click"/>
            </StackPanel>
        </StackPanel>

        <StackPanel Margin="10,175,0,0">
            <StackPanel.Resources>
                <Style x:Key="commonText" TargetType="TextBlock">
                    <Setter Property="HorizontalAlignment" Value="Left" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                    <Setter Property="TextWrapping" Value="Wrap" />
                </Style>

                <Style x:Key="labelText" TargetType="TextBlock" BasedOn="{StaticResource commonText}">
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="Foreground" Value="#FFA8A8A8" />
                </Style>

                <Style x:Key="valueText" TargetType="TextBlock" BasedOn="{StaticResource commonText}">
                    <Setter Property="FontSize" Value="18" />
                    <Setter Property="Margin" Value="10, 0, 0, 10" />
                </Style>
            </StackPanel.Resources>

            <TextBlock Text="Location" Style="{StaticResource labelText}" />
            <TextBlock x:Name="locationText" Style="{StaticResource valueText}" />

            <TextBlock Text="Temperature" Style="{StaticResource labelText}" />
            <TextBlock x:Name="tempText" Style="{StaticResource valueText}" />

            <TextBlock Text="Wind Speed" Style="{StaticResource labelText}" />
            <TextBlock x:Name="windText" Style="{StaticResource valueText}" />

            <TextBlock Text="Humidity" Style="{StaticResource labelText}" />
            <TextBlock x:Name="humidityText" Style="{StaticResource valueText}" />

            <TextBlock Text="Temperature" Style="{StaticResource labelText}" />
            <TextBlock x:Name="visibilityText" Style="{StaticResource valueText}" />

            <TextBlock Text="Time of Sunrise" Style="{StaticResource labelText}" />
            <TextBlock x:Name="sunriseText" Style="{StaticResource valueText}" />

            <TextBlock Text="Time of Sunset" Style="{StaticResource labelText}" />
            <TextBlock x:Name="sunsetText" Style="{StaticResource valueText}" />
        </StackPanel>
    </Grid>
</Page>

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

MainPage.xaml.cs 分離コード ページで、ボタン用の次のイベント ハンドラーを追加します。In the MainPage.xaml.cs code-behind file, add the following event handler for the button:

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. GetWeather は、Android アプリで呼び出したものと同じメソッドです。GetWeather 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.

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

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

  2. [ソリューション プラットフォーム] ドロップダウン ボックスで、[x86] を選択し、[ローカル コンピューター] を選択してアプリケーションを Windows 10 デスクトップに配置します。In the Solution Platforms dropdown box, select x86 and select Local Machine to deploy the application to the Windows 10 desktop.

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

  4. 編集ボックスに米国の 5 桁の郵便番号を入力し、[Get Weather] を押します。Type a valid five-digit United States zip code into the edit box, and press Get Weather. その地域の気象データがページに表示されます。Weather data for that region then appears on the page.

    UWP の Xamarin アプリXamarin app on UWP

ヒント

このプロジェクトの完全なソース コードは 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. iOS でコードをテストするには、Xcode と Xamarin がインストールされているローカル ネットワーク上の Mac に接続する必要があります。To test the code on iOS, you'll need to connect to a Mac on your local network that has Xcode and Xamarin installed. 接続すると、Visual Studio で直接 iOS デザイナーを使用できます。Once you do that , 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 のチュートリアルもご覧ください。Also refer to the Hello, iOS walkthrough.

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

.NET Standard ライブラリの共有コードはプラットフォームに依存しません。Shared code in a .NET Standard library is platform-neutral. ライブラリは 1 回コンパイルされ、各プラットフォームに固有のアプリ パッケージに追加されます。The library 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. 詳細については、コード共有オプションに関するページを参照してください。For more information, see Code Sharing Options.

参照See Also

Xamarin ドキュメント Xamarin Documentation
Windows デベロッパー センター Windows Dev Center
Swift および C# のクイック リファレンス ポスターSwift and C# Quick Reference Poster