Xamarin.Android Spinner

[アーティクル]
02/06/2018

Spinner は、項目を選択するためのドロップダウンリストを表示するウィジェットです。このガイドでは、スピナーに選択肢のリストを表示し、その後、選択した選択肢に関連付けられた他の値を表示する変更を行う単純なアプリを作成する方法について説明します。

基本的なスピナー

このチュートリアルの最初の部分では、惑星のリストを表示する単純なスピナーウィジェットを作成します。惑星を選択すると、選択した項目がトーストメッセージに表示されます。

HelloSpinner という名前の新しいプロジェクトを開始します。

Resources/Layout/Main.axml を開き、次の XML を挿入します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="10dip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="@string/planet_prompt"
    />
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/planet_prompt"
    />
</LinearLayout>

TextView の android:text 属性と Spinner の android:prompt 属性はどちらも同じ文字列リソースを参照していることに注意してください。このテキストは、ウィジェットのタイトルとして動作します。 Spinner に適用すると、ウィジェットを選択したときに表示される選択ダイアログにタイトルテキストが表示されます。

Resources/Values/Strings.xml を編集し、次のようにファイルを変更します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">HelloSpinner</string>
  <string name="planet_prompt">Choose a planet</string>
  <string-array name="planets_array">
    <item>Mercury</item>
    <item>Venus</item>
    <item>Earth</item>
    <item>Mars</item>
    <item>Jupiter</item>
    <item>Saturn</item>
    <item>Uranus</item>
    <item>Neptune</item>
  </string-array>
</resources>

2 番目の <string> 要素は、上記のレイアウトの TextView と Spinner によって参照されるタイトル文字列を定義します。 <string-array> 要素は、Spinner ウィジェットにリストとして表示される文字列のリストを定義します。

MainActivity.cs を開いて、次の using ステートメントを追加します。

using System;

次に、OnCreate() メソッドに対して次のコードを挿入します。

protected override void OnCreate (Bundle bundle)
{
    base.OnCreate (bundle);

    // Set our view from the "Main" layout resource
    SetContentView (Resource.Layout.Main);

    Spinner spinner = FindViewById<Spinner> (Resource.Id.spinner);

    spinner.ItemSelected += new EventHandler<AdapterView.ItemSelectedEventArgs> (spinner_ItemSelected);
    var adapter = ArrayAdapter.CreateFromResource (
            this, Resource.Array.planets_array, Android.Resource.Layout.SimpleSpinnerItem);

    adapter.SetDropDownViewResource (Android.Resource.Layout.SimpleSpinnerDropDownItem);
    spinner.Adapter = adapter;
}

Main.axml レイアウトがコンテンツビューとして設定されると、FindViewById<>(int) を使用して Spinner ウィジェットがレイアウトからキャプチャされます。 .次に、CreateFromResource() メソッドは新しい ArrayAdapter を作成し、文字列配列内の各項目を Spinner の初期の外観 (各項目が選択されたときにスピナーに表示される状態) にバインドします。 Resource.Array.planets_array ID は上で定義した string-array を参照し、Android.Resource.Layout.SimpleSpinnerItem ID はプラットフォームによって定義された標準スピナーの外観のレイアウトを参照します。 SetDropDownViewResource は、ウィジェットを開いたときの各項目の外観を定義するために呼び出されます。最後に、Adapter プロパティを設定すると、ArrayAdapter のすべての項目が Spinner に関連付けられるように設定されます。

次に、Spinner から項目が選択されたときにアプリケーションに通知するコールバックメソッドを指定します。このメソッドは次のようになります。

private void spinner_ItemSelected (object sender, AdapterView.ItemSelectedEventArgs e)
{
    Spinner spinner = (Spinner)sender;
    string toast = string.Format ("The planet is {0}", spinner.GetItemAtPosition (e.Position));
    Toast.MakeText (this, toast, ToastLength.Long).Show ();
}

項目を選択すると、送信者は Spinner にキャストされ、その項目にアクセスできるようになります。 ItemEventArgs の Position プロパティを使用すると、選択したオブジェクトのテキストを見つけて、それを使用して Toast を表示できます。

アプリケーションを実行すると、次のようになるはずです。

キーと値のペアを使用したスピナー

多くの場合、アプリで使用されるある種のデータに関連付けられたキー値を表示するには、Spinner を使用する必要があります。 Spinner はキーと値のペアを直接操作しないため、キーと値のペアを個別に保存し、Spinner にキー値を設定してから、そのスピナーで選択したキーの位置を使用して関連付けられているデータ値を検索する必要があります。

次の手順では、選択した惑星の平均気温を表示するように HelloSpinner アプリを変更します。

次の using ステートメントを MainActivity.cs に追加します。

using System.Collections.Generic;

MainActivity クラスに次のインスタンス変数を追加します。このリストには、惑星とその平均気温のキーと値のペアが保持されます。

private List<KeyValuePair<string, string>> planets;

OnCreate メソッドで、adapter が宣言される前に次のコードを追加します。

planets = new List<KeyValuePair<string, string>>
{
    new KeyValuePair<string, string>("Mercury", "167 degrees C"),
    new KeyValuePair<string, string>("Venus", "464 degrees C"),
    new KeyValuePair<string, string>("Earth", "15 degrees C"),
    new KeyValuePair<string, string>("Mars", "-65 degrees C"),
    new KeyValuePair<string, string>("Jupiter" , "-110 degrees C"),
    new KeyValuePair<string, string>("Saturn", "-140 degrees C"),
    new KeyValuePair<string, string>("Uranus", "-195 degrees C"),
    new KeyValuePair<string, string>("Neptune", "-200 degrees C")
};

このコードは、惑星とそれに関連付けられた平均気温の単純なストアを作成します (実際のアプリでは、通常、データベースはキーとそれに関連付けられたデータを保存するために使用されます)。

上記のコードの直後に、次の行を追加してキーを抽出し、(順番に) リストに配置します。

List<string> planetNames = new List<string>();
foreach (var item in planets)
    planetNames.Add (item.Key);

このリストを (planets_array リソースの代わりに) ArrayAdapter コンストラクターに渡します。

var adapter = new ArrayAdapter<string>(this,
    Android.Resource.Layout.SimpleSpinnerItem, planetNames);

選択した位置を使用して、選択した惑星に関連付けられた値 (気温) を検索するように、spinner_ItemSelected を変更します。

private void spinner_ItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
{
    Spinner spinner = (Spinner)sender;
    string toast = string.Format("The mean temperature for planet {0} is {1}",
        spinner.GetItemAtPosition(e.Position), planets[e.Position].Value);
    Toast.MakeText(this, toast, ToastLength.Long).Show();
}

アプリケーションを実行します。トーストは次のようになります。

リソース

"このページの一部は、Android オープンソースプロジェクトによって作成および共有された作業生産物に基づいて変更されており、Creative Commons 2.5 Attribution License に記載されている条件に従って使用されます。"

次の方法で共有

Xamarin.Android Spinner

基本的なスピナー

キーと値のペアを使用したスピナー

リソース

その他のリソース