Xamarin.Android Spinner

  • Articolo

Spinner è un widget che presenta un elenco a discesa per la selezione di elementi. Questa guida illustra come creare una semplice app che visualizza un elenco di scelte in una selezione, seguita da modifiche che visualizzano altri valori associati alla scelta selezionata.

Spinner di base

Nella prima parte di questa esercitazione si creerà un semplice widget di selezione che visualizza un elenco di pianeti. Quando si seleziona un pianeta, viene visualizzato un messaggio di tipo avviso popup:

Example screenshots of HelloSpinner app

Avviare un nuovo progetto denominato HelloSpinner.

Aprire Resources/Layout/Main.axml e inserire il codice XML seguente:

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

Si noti che l'attributo TextViewe android:text l'attributo Spinnerdell'oggetto android:prompt fanno riferimento alla stessa risorsa stringa. Questo testo si comporta come titolo per il widget. Se applicato a , il testo del Spinnertitolo verrà visualizzato nella finestra di dialogo di selezione visualizzata quando si seleziona il widget.

Modificare Risorse/Valori/Strings.xml e modificare il file in modo che sia simile al seguente:

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

Il secondo <string> elemento definisce la stringa del titolo a cui fa TextView riferimento e Spinner nel layout precedente. L'elemento <string-array> definisce l'elenco di stringhe che verranno visualizzate come elenco nel Spinner widget.

Aprire ora MainActivity.cs e aggiungere l'istruzione seguenteusing:

using System;

Inserire quindi il codice seguente per il OnCreate()metodo ) :

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

Dopo aver impostato il Main.axml layout come visualizzazione contenuto, il Spinner widget viene acquisito dal layout con FindViewById<>(int). La CreateFromResource() il metodo crea quindi un nuovo ArrayAdapteroggetto , che associa ogni elemento nella matrice di stringhe all'aspetto iniziale di Spinner , ovvero il modo in cui ogni elemento verrà visualizzato nella selezione quando selezionato. L'ID Resource.Array.planets_array fa riferimento all'ID string-array definito in precedenza e l'ID Android.Resource.Layout.SimpleSpinnerItem fa riferimento a un layout per l'aspetto standard della selezione, definito dalla piattaforma. SetDropDownViewResource viene chiamato per definire l'aspetto per ogni elemento all'apertura del widget. Infine, l'oggetto ArrayAdapter è impostato per associare tutti i relativi elementi all'oggetto Spinner impostando la Adapter proprietà .

Fornire ora un metodo di callback che invia una notifica all'applicazione quando è stato selezionato un elemento da Spinner. Ecco l'aspetto di questo metodo:

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

Quando viene selezionato un elemento, viene eseguito il cast del mittente a un oggetto Spinner in modo che sia possibile accedere agli elementi. Usando la Position proprietà in ItemEventArgs, è possibile trovare il testo dell'oggetto selezionato e usarlo per visualizzare un oggetto Toast.

Eseguire l'applicazione; dovrebbe essere simile al seguente:

Screenshot example of Spinner with Mars selected as the planet

Selezione tramite coppie chiave/valore

Spesso è necessario usare Spinner per visualizzare i valori chiave associati a alcuni tipi di dati usati dall'app. Poiché Spinner non funziona direttamente con coppie chiave/valore, è necessario archiviare Spinner separatamente la coppia chiave/valore, popolare con i valori chiave, quindi usare la posizione della chiave selezionata in Spinner per cercare il valore di dati associato.

Nei passaggi seguenti, l'app HelloSpinner viene modificata per visualizzare la temperatura media per il pianeta selezionato:

Aggiungere l'istruzione seguente using a MainActivity.cs:

using System.Collections.Generic;

Aggiungere la variabile di istanza seguente alla MainActivity classe . Questo elenco conterrà coppie chiave/valore per i pianeti e le relative temperature medie:

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

OnCreate Nel metodo aggiungere il codice seguente prima adapter di essere dichiarato:

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

Questo codice crea un archivio semplice per i pianeti e le temperature medie associate. In un'app reale un database viene in genere usato per archiviare le chiavi e i relativi dati associati.

Subito dopo il codice precedente, aggiungere le righe seguenti per estrarre le chiavi e inserirle in un elenco (in ordine):

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

Passare questo elenco al ArrayAdapter costruttore (anziché alla planets_array risorsa):

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

Modificare spinner_ItemSelected in modo che la posizione selezionata venga usata per cercare il valore (la temperatura) associato al pianeta selezionato:

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

Eseguire l'applicazione; L'avviso popup dovrebbe essere simile al seguente:

Example of planet selection displaying temperature

Risorse

Le parti di questa pagina sono modifiche basate sul lavoro creato e condiviso dal progetto Open Source Android e usato in base ai termini descritti nellalicenza Creative Commons 2.5 Attribuzione.