Hướng dẫn sử dụng Android Spinner
Xem thêm các chuyên mục:
Trong Android, Spinner là một ViewGroup cho phép người dùng lựa chọn một giá trị trong một danh sách các giá trị. Ở chế độ mặc định, Android Spinner hoạt động giống như một Dropdown List (Danh sách thả xuống) hoặc Combox trong các ngôn ngữ lập trình khác.

Khi người dùng nhấn vào Android Spinner, một danh sách sẽ được thả xuống chứa tất cả các giá trị, và người dùng có thể lựa chọn một giá trị.
Android Spinner có 2 chế độ (mode) với giao diện khác nhau hoàn toàn:
- android:spinnerMode="dropdown"
- android:spinnerMode="dialog"

android:spinnerMode="dropdown"
Khi người dùng nhấp (click) vào Spinner một Dropdown List (danh sách thả xuống) sẽ hiển thị cho phép người dùng lựa chọn một giá trị. Đây là chế độ mặc định của Spinner.

android:spinnerMode="dropdown"
android:spinnerMode="dialog"
Khi người dùng nhấp (click) vào Spinner một Dialog chứa danh sách các giá trị sẽ hiển thị cho phép người dùng lựa chọn một giá trị.

android:spinnerMode="dialog"
OK, Bây giờ chúng ta sẽ bắt đầu với một ví dụ đơn giản sử dụng Spinner và ArrayAdapter. Trong ví dụ này Spinner sẽ chứa một danh sách các đối tượng Employee:


Một Adapter giúp bạn kết hợp một Spinner-Item Layout Resource và dữ liệu để tạo ra một Spinner.

ArrayAdapter là một lớp sẵn có trong thư viện của Android. nó là một Adapter đơn giản, chấp nhận một Spinner-Item Layout Resource đơn giản, bao gồm một TextView, và có thể có thêm CheckBox, ImageView,..
Ví dụ: Một Spinner-Item Layout Resource đơn giản với ID là android.R.layout.simple_spinner_item đã được định nghĩa sẵn trong Android SDK và bạn có thể sử dụng. Android Studio cho phép bạn xem nội dung của các tập tin này, chỉ cần giữ phím CONTROL và click vào nó, giống như minh họa dưới đây:

Trên Android Studio tạo mới một project:
- File > New > New Project > Empty Activity
- Name: SpinnerExample
- Package name: org.o7planning.spinnerexample
- Language: Java

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:orientation="horizontal" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Select Employee:" /> <Space android:layout_width="10dp" android:layout_height="wrap_content" android:layout_weight="0" /> <Spinner android:id="@+id/spinner_employee" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.spinnerexample; import android.os.Bundle; import android.view.View; import android.widget.Adapter; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Spinner; import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private Spinner spinnerEmployee; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.spinnerEmployee = (Spinner) findViewById(R.id.spinner_employee); Employee[] employees = EmployeeDataUtils.getEmployees(); // (@resource) android.R.layout.simple_spinner_item: // The resource ID for a layout file containing a TextView to use when instantiating views. // (Layout for one ROW of Spinner) ArrayAdapter<Employee> adapter = new ArrayAdapter<Employee>(this, android.R.layout.simple_spinner_item, employees); // Layout for All ROWs of Spinner. (Optional for ArrayAdapter). adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); this.spinnerEmployee.setAdapter(adapter); // When user select a List-Item. this.spinnerEmployee.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { onItemSelectedHandler(parent, view, position, id); } @Override public void onNothingSelected(AdapterView<?> parent) { } }); } private void onItemSelectedHandler(AdapterView<?> adapterView, View view, int position, long id) { Adapter adapter = adapterView.getAdapter(); Employee employee = (Employee) adapter.getItem(position); Toast.makeText(getApplicationContext(), "Selected Employee: " + employee.getFullName() ,Toast.LENGTH_SHORT).show(); } }
Employee.java
package org.o7planning.spinnerexample; public class Employee { private String firstName; private String lastName; private String position; private int salary; public Employee(String firstName, String lastName, String position, int salary) { this.firstName = firstName; this.lastName = lastName; this.position = position; this.salary = salary; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getPosition() { return position; } public void setPosition(String position) { this.position = position; } public int getSalary() { return salary; } public void setSalary(int salary) { this.salary = salary; } public String getFullName() { return this.firstName + " " + this.lastName; } // Text show in Spinner @Override public String toString() { return this.getFullName() + " - (" + this.position+")"; } }
EmployeeDataUtils.java
package org.o7planning.spinnerexample; public class EmployeeDataUtils { public static Employee[] getEmployees() { Employee emp1 = new Employee("James", "Smith", "Receptionist", 1000); Employee emp2 = new Employee("Michael", "Garcia", "CEO", 50000); Employee emp3 = new Employee("Robert", "Johnson", "Professional staff", 2000); return new Employee[] {emp1, emp2, emp3}; } }
Tùy biến Adapter giúp bạn có được một Spinner phức tạp hơn, đẹp hơn. Dưới đây là hình ảnh minh họa một Spinner chứa một danh sách các đối tượng Language, và nó cũng là ví dụ tiếp theo mà chúng ta sẽ thực hiện:

Trong ví dụ này chúng ta sẽ tạo ra "Spinner Item Layout Resource File" để định nghĩa Layout của một hàng (row) của Spinner. CustomAdapter sẽ kết hợp dữ liệu và "Spinner Item Layout Resource" để tạo thành một Spinner mà người dùng sẽ nhìn thấy.

OK. Trên Android Studio tạo mới một project:
- File > New > New Project > Empty Activity
- Name: CustomSpinnerAdapterExample
- Package name: org.o7planning.customspinneradapterexample
- Language: Java
Đầu tiên, chúng ta cần tạo một Layout Resource File để định nghĩa Layout cho Spinner Item:
Trên Android Studio, chọn thư mục "layout", và chọn:
- File > New > Layout Resource File

- File Name: spinner_item_layout_resource.xml
- Root element: LinearLayout

Thiết kế giao diện cho spinner_item_layout_resource:

spinner_item_layout_resource.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="10dp"> <TextView android:id="@+id/textView_item_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Language Name" /> <TextView android:id="@+id/textView_item_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Percent" /> </LinearLayout>
Giao diện chính của ứng dụng:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="32dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:text="Select Language:" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Spinner android:id="@+id/spinner_language" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:spinnerMode="dialog" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.customspinneradapterexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.Spinner; import java.util.List; public class MainActivity extends AppCompatActivity { private Spinner spinner; private List<Language> languages; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Data: this.languages = LanguageDataUtils.getLanguages(); this.spinner = (Spinner) this.findViewById(R.id.spinner_language); // Adapter" CustomAdapter adapter = new CustomAdapter(MainActivity.this, R.layout.spinner_item_layout_resource, R.id.textView_item_name, R.id.textView_item_percent, this.languages); this.spinner.setAdapter(adapter); } }
CustomAdapter.java
package org.o7planning.customspinneradapterexample; import android.app.Activity; import android.view.View; import android.view.ViewGroup; import android.view.LayoutInflater; import android.widget.BaseAdapter; import android.widget.TextView; import java.util.List; public class CustomAdapter extends BaseAdapter { private LayoutInflater flater; private List<Language> list; private int listItemLayoutResource; private int textViewItemNameId; private int textViewItemPercentId; // Arguments example: // @listItemLayoutResource: R.layout.spinner_item_layout_resource // (File: layout/spinner_item_layout_resource.xmll) // @textViewItemNameId: R.id.textView_item_name // (A TextVew in file layout/spinner_item_layout_resource.xmlxml) // @textViewItemPercentId: R.id.textView_item_percent // (A TextVew in file layout/spinner_item_layout_resource.xmll) public CustomAdapter(Activity context, int listItemLayoutResource, int textViewItemNameId, int textViewItemPercentId, List<Language> list) { this.listItemLayoutResource = listItemLayoutResource; this.textViewItemNameId = textViewItemNameId; this.textViewItemPercentId = textViewItemPercentId; this.list = list; this.flater = context.getLayoutInflater(); } @Override public int getCount() { if(this.list == null) { return 0; } return this.list.size(); } @Override public Object getItem(int position) { return this.list.get(position); } @Override public long getItemId(int position) { Language language = (Language) this.getItem(position); return language.getId(); // return position; (Return position if you need). } @Override public View getView(int position, View convertView, ViewGroup parent) { Language language = (Language) getItem(position); // Example: @listItemLayoutResource: R.layout.spinner_item_layout_resource // (File: layout/spinner_item_layout_resourcerce.xml) View rowView = this.flater.inflate(this.listItemLayoutResource, null,true); // Example: @textViewItemNameId: R.id.textView_item_name // (A TextView in file layout/spinner_item_layout_resourcerce.xml) TextView textViewItemName = (TextView) rowView.findViewById(this.textViewItemNameId); textViewItemName.setText(language.getName()); // Example: @textViewItemPercentId: R.id.textView_item_percent // (A TextView in file layout/spinner_item_layout_resource.xmlxml) TextView textViewItemPercent = (TextView) rowView.findViewById(textViewItemPercentId); textViewItemPercent.setText(language.getPercent() + "%"); return rowView; } }
Language.java
package org.o7planning.customspinneradapterexample; public class Language { private long id; private String name; private float percent; public Language(long id, String name, float percent) { this.id = id; this.name = name; this.percent = percent; } public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public float getPercent() { return percent; } public void setPercent(float percent) { this.percent = percent; } }
LanguageDataUtils.java
package org.o7planning.customspinneradapterexample; import java.util.ArrayList; import java.util.List; public class LanguageDataUtils { public static List<Language> getLanguages( ) { Language javascript = new Language(1,"Javascript", 67.7f); Language htmlCss = new Language(2,"HTML/CSS", 63.1f); Language sql = new Language(3,"SQL", 54.7f); Language python = new Language(4,"Python", 44.1f); Language java = new Language(5, "Java", 40.2f); List<Language> list = new ArrayList<Language>(); list.add(javascript); list.add(htmlCss); list.add(sql); list.add(python); list.add(java); return list; } }