Custom Spinner trong Android

Hôm nay chúng ta sẽ cùng nhau tìm hiểu Spinner trong Android. Vậy Spinner là gì? Có mấy cách khai báo Spinner? Sử dụng Spinner như thế nào?

img

Để tìm hiểu Spinner trong Android chúng ta sẽ lần lượt điểm qua các nội dung sau đây:

1. Spinner là gì?

Tương tự như ListView, Spinner trong Android được sử dụng để hiển thị các item theo dạng danh sách. Spinner chỉ được chọn một item trong danh sách. Sau khi chọn thì danh sách item sẽ co lại, item được chọn sẽ hiển thị ra bên ngoài Spinner.

2. Cú pháp khái báo Spinner trong Android

Trong Android cú pháp khai báo Spinner như sau.

<Spinner
   android:id="@+id/id_spinner"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
</Spinner>

3. Các thuộc tính của Spinner trong Android

Một số thuộc tính quan trọng của Spinner tôi đã liệt kê ở dưới.

Để hiểu rõ hơn về Spinner chúng ta cùng nhau thực hiện ví dụ sử dụng Spinner trong Android.

4. Ví dụ sử dụng Spinner trong Android

Đến với ví dụ sử dụng Spinner tôi sẽ hiển thị danh sách các ngôn ngữ lập trình, ngôn ngữ nào được chọn sẽ hiển thị lên trên Spinner. Các bạn có thể download source code ngay bên dưới đây.

Sau đây là 5 bước chuẩn để thực hiện quá trình tạo Project sử dụng Spinner trong Android.

Bước 1: Khởi tạo project với tên SpinnerExample.

Chọn File >> New >> New Project. Xuất hiện form và đặt tên project SpinnerExample sau đó click Finish.

Cấu trúc project SpinnerExample như sau.

Bước 2: Vào res >> layout >> spinner_activity.xml và thêm vào đoạn code dưới đây. Trong ví dụ sử dụng Spinner tôi sẽ lấy danh sách ngôn ngữ lập trình đổ vào trong Spinner.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".SpinnerActivity">

    <Spinner
        android:id="@+id/id_spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </Spinner>

</android.support.constraint.ConstraintLayout>

Bước 3: Mở file SpinnerActivity.java và thêm đoạn code sau đây vào.

package com.teamvietdev.spinnerexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

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

public class SpinnerActivity extends AppCompatActivity {
    private Spinner spinner;
    private List<String> list;

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

        list = new ArrayList<>();
        list.add("Lập Trình Android");
        list.add("Lập Trình Java");
        list.add("Lập Trình JavaFX");
        list.add("Lập Trình Web");
        list.add("Lập Trình Ruby");
        list.add("Lập Trình C++");
        list.add("Lập Trình PHP");
        list.add("Lập Trình WordPress");
        spinner = (Spinner) findViewById(R.id.id_spinner);
        ArrayAdapter spinnerAdapter = new ArrayAdapter<>(this, R.layout.support_simple_spinner_dropdown_item, list);

        spinner.setAdapter(spinnerAdapter);

        //Bắt sự kiện cho Spinner, khi chọn phần tử nào thì hiển thị lên Toast
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) {
                //đối số postion là vị trí phần tử trong list Data
                String msg = "position :" + position + " value :" + list.get(position);
                Toast.makeText(SpinnerActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onNothingSelected(AdapterView<?> parentView) {
                Toast.makeText(SpinnerActivity.this, "onNothingSelected", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Để bắt sự kiện khi click vào item Spinner ta thực hiện gọi phương thức setOnItemSelectedListener.

Bước 4: Mở file AndroidManifest.xml và dán đoạn code sau đây vào.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.teamvietdev.spinnerexample">

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

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

</manifest>

Bước 5: Sau cùng vào res >> values >> strings.xml và dán đoạn code sau đây vào.

<resources>
    <string name="app_name">Spinner Example</string>
</resources>

Kết quả chạy ví dụ sử dụng Custom Spinner trong Android như sau.

image

Lời kết: Như vậy là các bạn đã có thể tự mình Custom Spinner. Hơn thế nữa là qua ví dụ sử dụng Custom Spinner trong Android tôi cũng có hướng dẫn phần bắt sự kiện khi lick vào item của Spinner. Ngoài ra các bạn có thể theo dõi thêm các chuyên mục khác tại Team Việt Dev.

(Tác giả: Team Việt Dev)