Udostępnij za pośrednictwem


Xamarin.Android Spinner

Spinner to widżet, który przedstawia listę rozwijaną do wybierania elementów. W tym przewodniku wyjaśniono, jak utworzyć prostą aplikację, która wyświetla listę opcji w narzędziu Spinner, a następnie modyfikacje, które wyświetlają inne wartości skojarzone z wybranym wyborem.

Podstawowy pokrętło

W pierwszej części tego samouczka utworzysz prosty widżet spinner, który wyświetla listę planet. Po wybraniu planety zostanie wyświetlony wyskakujące komunikat:

Example screenshots of HelloSpinner app

Uruchom nowy projekt o nazwie HelloSpinner.

Otwórz plik Resources/Layout/Main.axml i wstaw następujący kod 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>

Zwróć uwagę, że TextViewatrybut Spinneri android:text atrybut "sandroid:prompt" odwołują się do tego samego zasobu ciągu. Ten tekst zachowuje się jako tytuł widżetu. Po zastosowaniu Spinnerdo elementu tekst tytułu zostanie wyświetlony w oknie dialogowym wyboru, które zostanie wyświetlone po wybraniu widżetu.

Edytuj zasoby/wartości/Strings.xml i zmodyfikuj plik tak, aby wyglądał następująco:

<?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>

Drugi <string> element definiuje ciąg tytułu, do których odwołuje się TextView element i Spinner w powyższym układzie. Element <string-array> definiuje listę ciągów, które będą wyświetlane jako lista w widżecie Spinner .

Teraz otwórz MainActivity.cs i dodaj następującą using instrukcję:

using System;

Następnie wstaw następujący kod dla OnCreate()metody ) :

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

Po ustawieniu Main.axml układu jako widoku Spinner zawartości widżet zostanie przechwycony z układu za pomocą polecenia FindViewById<>(int). Standard CreateFromResource() Następnie metoda tworzy nowy ArrayAdapterelement, który wiąże każdy element w tablicy ciągów z początkowym wyglądem Spinner obiektu (czyli sposób wyświetlania każdego elementu w pokrętło po wybraniu). Identyfikator Resource.Array.planets_array odwołuje się do zdefiniowanego string-array powyżej, a Android.Resource.Layout.SimpleSpinnerItem identyfikator odwołuje się do układu standardowego wyglądu spinnera zdefiniowanego przez platformę. SetDropDownViewResource Element jest wywoływany w celu zdefiniowania wyglądu każdego elementu po otwarciu widżetu. Na koniec parametr jest ustawiany tak, ArrayAdapter aby skojarzył wszystkie jego elementy z właściwością Spinner Adapter , ustawiając właściwość .

Teraz podaj metodę wywołania zwrotnego, która powiadamia aplikację o wybraniu elementu z elementu Spinner. Oto jak powinna wyglądać ta metoda:

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

Po wybraniu elementu nadawca jest rzutowany na element Spinner , aby można było uzyskać dostęp do elementów. Position Za pomocą właściwości w ItemEventArgsobiekcie można znaleźć tekst zaznaczonego obiektu i użyć go do wyświetlenia Toastobiektu .

Uruchom aplikację; powinien wyglądać następująco:

Screenshot example of Spinner with Mars selected as the planet

Pokrętło przy użyciu par klucz/wartość

Często należy użyć Spinner polecenia , aby wyświetlić wartości kluczy skojarzone z pewnego rodzaju danymi używanymi przez aplikację. Ponieważ Spinner nie działa bezpośrednio z parami klucz/wartość, musisz przechowywać parę klucz/wartość oddzielnie, wypełnić wartościami Spinner klucza, a następnie użyć pozycji wybranego klucza w narzędziu Spinner, aby wyszukać skojarzoną wartość danych.

W poniższych krokach aplikacja HelloSpinner została zmodyfikowana w celu wyświetlenia średniej temperatury dla wybranej planety:

Dodaj następującą using instrukcję, aby MainActivity.cs:

using System.Collections.Generic;

Dodaj następującą zmienną wystąpienia do MainActivity klasy. Ta lista będzie zawierać pary klucz/wartość dla planet i ich średnie temperatury:

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

W metodzie OnCreate dodaj następujący kod przed adapter zadeklarowaniem:

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

Ten kod tworzy prosty magazyn dla planet i skojarzonych ze nimi średnią temperaturę. (W rzeczywistej aplikacji baza danych jest zwykle używana do przechowywania kluczy i skojarzonych z nimi danych).

Bezpośrednio po powyższym kodzie dodaj następujące wiersze, aby wyodrębnić klucze i umieścić je na liście (w kolejności):

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

Przekaż tę listę do konstruktora ArrayAdapter (zamiast planets_array zasobu):

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

Zmodyfikuj spinner_ItemSelected tak, aby wybrana pozycja była używana do wyszukiwania wartości (temperatury) skojarzonej z wybraną planetą:

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

Uruchom aplikację; wyskakujące powinno wyglądać następująco:

Example of planet selection displaying temperature

Zasoby

Części tej strony to modyfikacje oparte na pracy utworzonej i udostępnionej przez projekt open source systemu Android i używane zgodnie z warunkami opisanymi wlicencji autorstwa Creative Commons 2.5.