13 Şubat 2018 Salı

Android Dersleri 12 - Spinner


12 - Spinner

Spinner allows you to select an item from a drop down menu. (Spinner, bir drop-down menüden item seçmemizi sağlar.)
       For example, when you are using Gmail application you would get drop down menu as shown below, you need to select an item from a drop down menu. ( Örneğin, telefonumuzda Gmail uygulasını kullanırken, aşağıda görüldüğü gibi bir spinner kullanırız. Spinner'a tıklayınca bir dropdown menü gösterilir, bu dropdown menü'den bir item seçeriz.  )
Spinner
        Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one. ( Aşağıda da bir spinner örneği gösterilmiştir. Spinner view object'de default item gösterilir başlangıçta. Spinner view object'e tıklayınca, dropdown menü açılır, bu dropdown menü'de gösterilen item'lardan istediğimizi seçebiliriz. )
https://developer.android.com/images/ui/spinner.png
Spinner is a widget similar to a drop-down list for selecting items.

Example 1 - 11_Spinner_example_0 :

http://www.androidhive.info/2012/04/android-spinner-dropdown-example/
        Bu örnekte, basit bir spinner tanımlayıp bu spinner'a tıklayınca bir dropdown menüden item seçilmesini ve item seçilince ekranda bir toast mesajı göstermeyi sağlayacağız.
        resources klasörü altındaki strings.xml dosyasını açıp gerekli tanımlamaları yapalım. Uygulamanın ismini ve spinner'a tıklayınca gösterilecek olan dropdown menüdeki title'daki yazıyı burada tanımlarız.
strings.xml
<resources>
    <string name="app_name">11_Spinner_example_0</string>
    <string name="spinner_title">Select Category</string>
</resources>

         activity_main.xml dosyamız uygulamamızın main layout'u olacak. Activity class'ında setContentView(activity_main.xml) diyerek, activity_main.xml dosyasını main layout olarak set edeceğiz. Main layout'da textView ve Spinner view vardır.
activity_main.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">



    <!-- 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" dropdown menünün title'ını set ettik.

        />

</LinearLayout>
         MainActivity class'ının onCreate() method'unda, önce layout'u set ederiz:
setContentView(R.layout.activity_main);
        Sonra layout'daki Spinner view object'i elde ederiz:
Spinner spinner = (Spinner) findViewById(R.id.spinner);
        Spinner'a tıklayınca gösterilecek olan dropdown menü'deki item'lara tıklayınca yapılacak operation'ları tanımlamak için spinner object'in setOnItemSelectedListener() method'unu çağırırız. Bu method'a argument olarak OnItemSelectedListener class'ından yaratılmış anonymous bir object veririz, bu object'de onItemSelected() ve onNothingSelected() method'larını tanımlarız. Ancak bu örnekte böyle yapmadık bunun yerine Activity class'ının OnItemSelectedListener class'ını implement etmesini sağladık, onItemSelected() ve onNothingSelected() method'larını da activity class'ında implement ettik, dolayısıyla spinner object'in setOnItemSelectedListener() method'una argument olarak this keyword'ünü verdik.
spinner.setOnItemSelectedListener(this);
        Sonra bir arraylist object yaratıp, bu listeye dropdown menüde göstermek istediğimiz item'ları ekledik:
List<String> categories = new ArrayList<String>();
categories.add("Automobile");
categories.add("Business Services");
categories.add("Computers");
categories.add("Education");
categories.add("Personal");
categories.add("Travel");
        Sonra        arrayadapter object yarattık. arrayadapter class'ının constructor'ına 2.argument olarak verdiğimiz argument, dropdown menü'deki herbir satırın layout'unu belirtir, bu örnekte android ile birlikte default olarak gelen simple_spinner_item.xml  kullanılmıştır. arrayadapter class'ının constructor'ına 3.argument olarak data source'u yani arrayadapter'ü dolduracak array'i yani dropdown menüde göterilecek string'leri içeren arraylist object'i veririz.
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, categories);
        Sonra adapter object'in setDropDownViewResource() method'unu çağırırız, bu method'a default layout xml olan simple_spinner_dropdown_item 'i veririz. Bu layout, dropdown menü'deki item'ların radio box olarak gözükmesini sağlar. dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        En son, spinner object'in setAdapter() method'unu çağırırız. Bu method'a argument olarak az önce yarattığımız adapter object'i veririz. Böylece Spinner view object'i ve arraylist data source'u birbirine bağlamış oluruz, diğer bir deyişle spinner'a adapter'ü bağlamış oluruz.
spinner.setAdapter(dataAdapter);
        Sonra onItemSelected() method'unu implement ederiz. Dropdown menüdeki tıklanan item'ı elde etmek için parent.getItemAtPosition(position) method'unu çağırırız. Sonra toast mesajı ile bunu ekranda gösteririz.
public void onItemSelected(AdapterView<?>parent, View view, int position, long id) {
     String item = parent.getItemAtPosition(position).toString();
     Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();
}
        Sonra onNothingSelected() method'unu implement ederiz. Bu method'un amacını bilmiyorum ama boş bile olsa implement etmek zorunludur. Gerek olursa detaylarına bakarsın.
public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub
}

MainActivity.java
public class MainActivity extends Activity implements OnItemSelectedListener{

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        // Spinner element

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



        // Spinner click listener

        spinner.setOnItemSelectedListener(this);



        // Spinner Drop down elements

        List<String> categories = new ArrayList<String>();

        categories.add("Automobile");

        categories.add("Business Services");

        categories.add("Computers");

        categories.add("Education");

        categories.add("Personal");

        categories.add("Travel");



        // Creating adapter for spinner

        ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, categories);



           // Drop down layout style - list view with radio button 
          dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);



        // attaching data adapter to spinner

        spinner.setAdapter(dataAdapter);

    }



    @Override

    public void onItemSelected(AdapterView<?>parent, View view, int position, long id) {

        // On selecting a spinner item

        String item = parent.getItemAtPosition(position).toString();



        // Showing selected spinner item

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



    }



    public void onNothingSelected(AdapterView<?> arg0) {

        // TODO Auto-generated method stub

    }



}
Output :
        Programı çalıştırdığımızda spinner view aşağıdaki gibi gözükür.
        Spinner view'e tıklayınca aşağıdaki gibi bir dropdown menü gösterilir.
        Yukarıdaki dropdown menü'deki bir item'a mesela Travel'a tıklayalım. Travel'a tıklayınca ekranda bir toast mesajı gösterilir ve spinner'daki seçili eleman artık Travel olur.

Example 2 - 11_Spinner_example_1 :

https://www.mkyong.com/android/android-spinner-drop-down-list-example/
      Bu örnekte şunları yapacağız:
  1. Render a Spinner in XML, and load the selection items via XML file also.( XML layout dosyasında, Spinner view object'i tanımlarız. 1. Spinner view'de gösterilecek olan item'ları da XML dosyasında tanımlarız. )
  2. Render another Spinner in XML, and load the selection items via code dynamically. ( XML layout dosyasında, Spinner view object'i tanımlarız. 2. Spinner view'de gösterilecek olan item'ları ise java dosyasında dinamik olarak tanımlarız. )
  3. Attach a listener on Spinner, fire when user select a value in Spinner. ( 1. Spinner'daki item'lara bir listener register edelim. 2.Spinner'a listener koymadık. )
  4. Render and attach a listener on a normal button, fire when user click on it, and it will display selected value of Spinner. ( Butona da bir listener register edelim. Butona tıklayınca 2 spinner'daki seçili item'lar toast mesajı ile gösterilir ekranda. )
        Open “res/values/strings.xml” file, define the list of items that will display in Spinner (dropdown list). (Bu örnekte, dropdown menü'de göstermek istediğimiz string'leri strings.xml'deki country_arrays isimli array'de tanımlarız. )
strings.xml
<resources>

    <string name="app_name">11_Spinner_example_1</string>

    <string name="country_prompt">Choose a country</string>



    <string-array name="country_arrays">

        <item>Malaysia</item>

        <item>United States</item>

        <item>Indonesia</item>

        <item>France</item>

        <item>Italy</item>

        <item>Singapore</item>

        <item>New Zealand</item>

        <item>India</item>

    </string-array>

</resources>
 

        Open “res/layout/main.xml” file, add two spinner components and a button.
  1. In “spinner1”, the “android:entries” represents the selection items in spinner.
  2. In “spinner2”, the selection items will be defined in code later.
( Uygulamamızın main layout'u activity_main.xml'dir. Bu layout'da yukarıdan aşağıya doğru önce 2 tane Spinner view sonra 1 tane button view koyalım. spinner'da gösterilecek elemanları static olarak belirleriz spinner element'in android:entries: attribute'ünü kullanarak.
android:entries="@array/country_arrays"

          spinner element'in android:prompt attribute'ünü kullanarak dropdown menünün başlığını belirleriz. )
 
activity_main.xml
 
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >



    <Spinner

        android:id="@+id/spinner1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:entries="@array/country_arrays"

        android:prompt="@string/country_prompt" />



    <Spinner

        android:id="@+id/spinner2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />



    <Button

        android:id="@+id/btnSubmit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Submit" />



</LinearLayout>
 
          MainActivity class'ında, Spinner ve Button type'ında reference variable'lar tanımlarız. onCreate() method'unda 
setContentView(R.layout.activity_main); diyerek yukarıda tanımladığımız layout'u set ederiz. Sonra sırayla,  addItemsOnSpinner2(),     addListenerOnButton(), addListenerOnSpinnerItemSelection() method'larını çağırırız, şimdi bu method'ları inceleyelim.
          addItemsOnSpinner2()method'unda, Spinner view object'i elde ederiz findViewByID() METHOD'uNU çağırarak. Sonra bir arraylist object yaratırız ve bu listeye 3 tane eleman ekleriz. Sonra arrayadapter class'dan bir object yaratız, arrayadapter'Ün constructor'ına 2. argument olarak default spinner row layout olan android.R.layout.simple_spinner_item veririz. 3. argument olarak, arraylist object veririz, bu listedeki string'ler dropdown menü'de gösterilecektir. Sonra, arraylist object'in setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item) method'unu çağırarak dropdown'da gösterilecek olan item'Ların radiobox olarak gösterilmesini sağlarız, simple_spinner_dropdown_item default layout'dur. En son setAdapter() method'unu çağırarak spinner view'e adapter'ü bağlarız.
// add items into spinner dynamically
public void addItemsOnSpinner2() 
{
          spinner2 = (Spinner) findViewById(R.id.spinner2);
          List<String> list = new ArrayList<String>();
          list.add("list 1");   list.add("list 2");   list.add("list 3");
          ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list);
          dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
          spinner2.setAdapter(dataAdapter);
}
          addListenerOnSpinnerItemSelection() method'u çağırıldığında, spinner view object elde edilir. Sonra spinner view object'in setOnItemSelectedListener(new CustomOnItemSelectedListener()) method'unu çağırarak, spinner'daki item'lardan birine tıklanıldığında CustomOnItemSelectedListener class'ında tanımlı onItemSelected() method'unun çağırılmasını sağlarız.
          addListenerOnButton() method'u çağırıldığında, spinner view object'ler ve Button view object'ler elde edilir. Sonra button için bir listener register edilir, artık bu butona tıklanıldığında, Spinner1 ve Spinner2'de seçili item'lar ekranda toast mesajı ile gösterilecektir.
MainActivity.java
public class MainActivity extends Activity {



    private Spinner spinner1, spinner2;

    private Button btnSubmit;



    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        addItemsOnSpinner2();

        addListenerOnButton();

        addListenerOnSpinnerItemSelection();

    }



    // add items into spinner dynamically

    public void addItemsOnSpinner2() {

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

          List<String> list = new ArrayList<String>();

          list.add("list 1");

          list.add("list 2");

          list.add("list 3");

          ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list);
          dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

          spinner2.setAdapter(dataAdapter);

    }



    public void addListenerOnSpinnerItemSelection() {

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

        spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());

    }



    // get the selected dropdown list value

    public void addListenerOnButton() {

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

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

        btnSubmit = (Button) findViewById(R.id.btnSubmit);

        btnSubmit.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                Toast.makeText(MainActivity.this,

                        "OnClickListener : " +

                                "\nSpinner 1 : "+ String.valueOf(spinner1.getSelectedItem()) +

                                "\nSpinner 2 : "+ String.valueOf(spinner2.getSelectedItem()),

                        Toast.LENGTH_SHORT).show();

            }

        });

    }

}

CustomOnItemSelectedListener.java
          CustomOnItemSelectedListener class'ı, OnItemSelectedListener class'ını extend eder. onItemSelected() ve onNothingSelected() method'larını implement ederiz bu method'da. Spinner'daki bir item'a tıklayınca OnItemSelectedListener class'Inı implement eden bu class'ın onItemSelected() method'u çağırılır.
 
public class CustomOnItemSelectedListener implements OnItemSelectedListener {

    public void onItemSelected(AdapterView<?> parent, View view, int pos,long id) 
     {

        Toast.makeText(parent.getContext(), "OnItemSelectedListener : " +parent.getItemAtPosition(pos).toString(),Toast.LENGTH_SHORT).show();

     }



    @Override

    public void onNothingSelected(AdapterView<?> arg0) {

        // TODO Auto-generated method stub

    }

}
Output :
    

   


Spinners from official Android website

https://developer.android.com/guide/topics/ui/controls/spinner.html
Bu dökümanda şunları öğreneceğiz :
- Populate the Spinner with User Choices ( Spinner'da gösterilecek elemanları tanımla. )
- Responding to User Selections ( Kullanıcı Spinner'daki item'lara tıklayınca alınacak aksiyon tanımlanır. )
Key classes ( Spinner'ı tanımlamak için şu class'ları kullanacağız. )
Spinner
SpinnerAdapter (Bu örnekte arrayadapter kullanacağız)
AdapterView.OnItemSelectedListener ( Kullanıcı, Spinner'daki item'lardan birine tıklayınca ne yapılacağını implement etmek için bu class'ı kullanırız. )

        You can add a spinner to your layout with the Spinner object. You should usually do so in your XML layout with a <Spinner> element. ( XML Layout dosyasında, Spinner view element'ini kullanarak ekranda bir spinner gösteririz. )
For example:
<Spinner

    android:id="@+id/planets_spinner"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content" />
        To populate the spinner with a list of choices, you then need to specify a SpinnerAdapter in your Activity or Fragment source code.( Spinner'a gösterilecek item'ları tanımlamak için bir adapter kullanırız. Yukarıdaki örneklerde arrayadapter kullandık. )

Populate the Spinner with User Choices

        The choices you provide for the spinner can come from any source, but must be provided through an SpinnerAdapter, such as an ArrayAdapter if the choices are available in an array or a CursorAdapter if the choices are available from a database query. (Spinner'a gösterilecek item'ları tanımlamak için bir SpinnerAdapter kullanırız. Arrayadapter ve CursorAdapter birer SpinnerAdapter'dür, bir array'deki verileri göstermek için Arrayadapter, veritabanından okunacak verileri göstermek için CursorAdapter kullanırız. Veya aşağıdaki gibi bir string array'de tanımlayabiliriz. )
        For instance, if the available choices for your spinner are pre-determined, you can provide them with a string array defined in a string resource file:
<?xml version="1.0" encoding="utf-8"?>

<resources>

    <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>
        With an array such as this one, you can use the following code in your Activity or Fragment to supply the spinner with the array using an instance of ArrayAdapter:
Spinner spinner = (Spinner) findViewById(R.id.spinner);

// Create an ArrayAdapter using the string array and a default spinner layout

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,

        R.array.planets_array, android.R.layout.simple_spinner_item);

// Specify the layout to use when the list of choices appears

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

// Apply the adapter to the spinner

spinner.setAdapter(adapter);
        The createFromResource() method allows you to create an ArrayAdapter from the string array. The third argument for this method is a layout resource that defines how the selected choice appears in the spinner control. The simple_spinner_item layout is provided by the platform and is the default layout you should use unless you'd like to define your own layout for the spinner's appearance.
You should then call setDropDownViewResource(int) to specify the layout the adapter should use to display the list of spinner choices (simple_spinner_dropdown_item is another standard layout defined by the platform).
Call setAdapter() to apply the adapter to your Spinner.

Responding to User Selections

        When the user selects an item from the drop-down, the Spinner object receives an on-item-selected event.
        To define the selection event handler for a spinner, implement the AdapterView.OnItemSelectedListener interface and the corresponding onItemSelected() callback method. For example, here's an implementation of the interface in an Activity:
public class SpinnerActivity extends Activity implements OnItemSelectedListener {

    ...



    public void onItemSelected(AdapterView<?> parent, View view,

            int pos, long id) {

        // An item was selected. You can retrieve the selected item using

        // parent.getItemAtPosition(pos)

    }



    public void onNothingSelected(AdapterView<?> parent) {

        // Another interface callback

    }

}
        The AdapterView.OnItemSelectedListener requires the onItemSelected() and onNothingSelected() callback methods.
        Then you need to specify the interface implementation by calling setOnItemSelectedListener():
Spinner spinner = (Spinner) findViewById(R.id.spinner);

spinner.setOnItemSelectedListener(this);
        If you implement the AdapterView.OnItemSelectedListener interface with your Activity or Fragment (such as in the example above), you can passthis as the interface instance.


Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)