Android Spinner – keuzelijst

Deze tutorial geeft je een praktische ervaring in het gebruik van Android Spinner als een dropdown-menu, het doorgeven van gegevens met behulp van android bundle en het tonen van een pop-up melding met behulp van android toast. We zullen een Android-applicatie maken die bestaat uit een eenvoudige spinner waarmee je een item kunt selecteren uit een dropdown-lijst. We zullen statische gegevens weergeven in de spinner. Het selecteren van een item uit de spinner geeft een toast-bericht weer. Om gegevens door te geven in de vorm van bundels tussen activiteiten, zullen we een knop gebruiken om een intent uit te voeren en de gegevens door te geven aan het volgende scherm.

Android Spinner

Android Spinner is gewoon een dropdown-lijst vergelijkbaar met wat je ziet in andere programmeertalen, zoals in HTML-pagina’s. In Android wordt Spinner gebruikt om één waarde te selecteren uit een set waarden. In de standaardstatus toont een spinner de momenteel geselecteerde waarde. Door op de spinner te tikken, wordt een dropdown-menu weergegeven met alle andere beschikbare waarden waaruit de gebruiker een nieuwe kan selecteren. Android spinner is geassocieerd met AdapterView. Dus we moeten de adapterklasse instellen met de Spinner.

Android keuzelijst

De volgende XML-bestand toont de lay-out van een typische spinner in Android die bestaat uit een tekstlabel en een spinner element tag.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="10dip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    
    <!-- Text Label -->
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="Category:"
        android:layout_marginBottom="5dp"
    />
    
    <!-- Spinner Element -->
    <Spinner 
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/spinner_title"
    />
</LinearLayout>

Het volgende fragment toont hoe je een spinner gebruikt in de activiteitsklasse.

Spinner spinner = (Spinner) findViewById(R.id.spinner);

Laten we een toepassing ontwikkelen waarbij we de geselecteerde waarde van de spinner doorgeven aan het volgende scherm met behulp van Bundels en tegelijkertijd een Toast-bericht weergeven van de geselecteerde waarde.

Voorbeeldprojectstructuur van Android Spinner

De onderstaande afbeelding toont het Android Studio-project voor het spinner-voorbeeld. Laten we beginnen met de lay-out van de MainActivity-klasse. We moeten gewoon een knop toevoegen aan het basic_spinner.xml-bestand.

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <LinearLayout
        android:orientation="vertical"
        android:padding="10dip"
        android:id="@+id/linear_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <!-- Text Label -->
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:text="Category:"
            android:layout_marginBottom="5dp"
            />

        <!-- Spinner Element -->
        <Spinner
            android:id="@+id/spinner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:prompt="@string/spinner_title"
            />
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NEXT"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="137dp" />


</RelativeLayout>

De lay-out van de SecondActivity is als volgt:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Empty"
        android:id="@+id/txt_bundle"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="103dp" />
</RelativeLayout>

Hier is het Android Manifest-bestand. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="journaldev.com.spinners" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SecondActivity"/>
    </application>

</manifest>

De Java-klassen MainActivity en SecondActivity zijn gedefinieerd als volgt.

package journaldev.com.spinners;

import android.app.Activity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Spinner element
        final Spinner spinner = (Spinner) findViewById(R.id.spinner);
        Button button=(Button)findViewById(R.id.button);

        // Spinner click luisteraar
        spinner.setOnItemSelectedListener(this);

        // Spinner uitklapelementen
        List categories = new ArrayList();
        categories.add("Item 1");
        categories.add("Item 2");
        categories.add("Item 3");
        categories.add("Item 4");
        categories.add("Item 5");
        categories.add("Item 6");

        // Adapter maken voor spinner
        ArrayAdapter dataAdapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, categories);

        // Uitklaplay-outstijl - lijstweergave met keuzerondje
        dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        // Datenadapter koppelen aan spinner
        spinner.setAdapter(dataAdapter);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(MainActivity.this,SecondActivity.class);
                intent.putExtra("data",String.valueOf(spinner.getSelectedItem()));
                startActivity(intent);
            }
        });
    }

    @Override
    public void onItemSelected(AdapterView parent, View view, int position, long id) {
        // Bij het selecteren van een spinneritem
        String item = parent.getItemAtPosition(position).toString();

        // Geselecteerd spinneritem weergeven
        Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();

    }

    public void onNothingSelected(AdapterView arg0) {
        // TODO Automatisch gegenereerde methode-stub

    }

}
package journaldev.com.spinners;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class SecondActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second_activity);

        TextView  textView=(TextView) findViewById(R.id.txt_bundle);
        Bundle bundle=getIntent().getExtras();
        String data=bundle.get("data").toString();
        textView.setText(data);
    }
}

In de bovenstaande code hebben we een toast weergegeven wanneer een item uit het keuzemenu van de spinner wordt geselecteerd. Bij het klikken op de knop geven we het geselecteerde spinneritem door als een tekenreekswaarde naar de volgende activiteit met behulp van de Android-bundel. Vervolgens wordt de gegevens uit de bundel opgehaald en weergegeven in een TextView. Snel, eenvoudig en simpel, toch? De schermafbeeldingen van de app worden hieronder getoond. Ik draai het op een van de emulators. Het eerste scherm toont de inhoud van de keuzelijst wanneer de Spinner wordt geopend. Nadat een item is geselecteerd, verschijnt er gedurende enige tijd een toostmelding. Na enige tijd verdwijnt de toostmelding zoals te zien is in de onderstaande afbeelding. Het weerhoudt ons er niet van om op de volgende knop te klikken. Ten slotte wordt in het tweede scherm het geselecteerde item uit de keuzelijst opgehaald met behulp van Bundles en weergegeven in de TextView. Hieronder staat een voorbeelduitvoer van onze Android-spinnervoorbeeldtoepassing in de emulator. Dat is alles voor nu, we zullen in de volgende post kijken naar Android ListView. Je kunt het voorbeeldproject Android Spinner, Bundle en Toast downloaden van onderstaande link.

Download Android Spinner, Bundle en Toast Voorbeeld Project

Referentie: Officiële Documentatie

Source:
https://www.digitalocean.com/community/tutorials/android-spinner-drop-down-list