AutoCompleteTextView trong Android: Hướng dẫn kèm ví dụ

Reading Time: 3 minutes

AutoCompleteTextView là một trường nhập liệu có thể chỉnh sửa, hiển thị tự động các gợi ý hoàn thành trong khi người dùng đang gõ trong ứng dụng Android. Trong hướng dẫn này, chúng ta sẽ triển khai AutoCompleteTextView trong ứng dụng bằng cách sử dụng ArrayAdapter để định nghĩa danh sách các gợi ý.

Tổng quan về Android AutoCompleteTextView

AutoCompleteTextView là một thành phần được sử dụng để hiển thị các gợi ý trong khi viết trong một trường văn bản có thể chỉnh sửa. Danh sách gợi ý sẽ được hiển thị dưới dạng menu thả xuống (dropdown menu), từ đó người dùng có thể chọn mục mong muốn. Danh sách gợi ý được lấy từ một adapter và chỉ xuất hiện sau khi nhập một số ký tự nhất định, được chỉ định trong thuộc tính threshold. Để sử dụng một trường AutoCompleteTextView, cần khai báo nó trong layout xml như sau:

<AutoCompleteTextView
   android:id="@+id/autoCompleteTextView"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="65dp"
   android:ems="10" >

Lưu ý: android:ems hoặc setEms(x) thiết lập chiều rộng của TextView sao cho vừa với một đoạn văn bản gồm x chữ cái ‘M’, bất kể độ dài thực tế và kích thước chữ. Một số phương thức quan trọng của danh sách gợi ý trong AutoCompleteTextView được liệt kê bên dưới:

• getAdapter() : Phương thức này trả về một adapter có khả năng lọc được, được sử dụng cho việc tự động gợi ý
• getCompletionHint() : Phương thức này trả về văn bản gợi ý tùy chọn được hiển thị ở dưới cùng của danh sách khớp
• getDropDownAnchor() : Phương thức này trả về id của view mà danh sách thả xuống của auto-complete được gắn vào
• getListSelection() : Phương thức này trả về vị trí được chọn trong danh sách thả xuống, nếu có
• isPopupShowing() : Phương thức này cho biết popup menu có đang hiển thị hay không
• setText(CharSequence text, boolean filter) : Phương thức này đặt nội dung văn bản, tuy nhiên có thể tắt chức năng lọc
• showDropDown() : Phương thức này hiển thị danh sách thả xuống lên màn hình

Phương thức setAdapter được dùng để thiết lập adapter cho autoCompleteTextView. Hãy cùng chuyển sang phần viết mã.

Cấu trúc dự án Android AutoCompleteTextView

Dự án này chứa một TextView đơn giản và một AutoCompleteTextView trong bố cục của MainActivity. ArrayAdapter chứa các loại trái cây sau: Apple, Banana, Cherry, Date, Grape, Kiwi, Mango, Pear.

Mã ví dụ Android AutoCompleteTextView

Bố cục của MainActivity được định nghĩa như sau: activity_main.xml

<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:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:text="Name a fruit from (Apple Banana Cherry Date Grape Kiwi Mango Pear)" />

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView"
        android:layout_marginLeft="36dp"
        android:layout_marginTop="17dp"
        android:ems="10"
        android:text="">

        <requestFocus />
    </AutoCompleteTextView>

</RelativeLayout>

MainActivity.java được định nghĩa như sau.

package com.journaldev.autocomplete;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends Activity {
    String[] fruits = {"Apple", "Banana", "Cherry", "Date", "Grape", "Kiwi", "Mango", "Pear"};

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

        //Creating the instance of ArrayAdapter containing list of fruit names
        ArrayAdapter<String> adapter = new ArrayAdapter<String>
                (this, android.R.layout.select_dialog_item, fruits);
        //Getting the instance of AutoCompleteTextView
        AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView);
        actv.setThreshold(1);//will start working from first character
        actv.setAdapter(adapter);//setting the adapter data into the AutoCompleteTextView
        actv.setTextColor(Color.RED);

    }
}

Trong đoạn mã trên, chúng ta đã lưu danh sách các loại trái cây trong một ArrayAdapter với layout được nhập từ Android SDK. Màu chữ trong ô nhập liệu (Editable TextView) là màu đỏ. Thuộc tính threshold được đặt là 1 có nghĩa là để hiển thị danh sách gợi ý, người dùng cần nhập ít nhất một ký tự. Lưu ý: Danh sách gợi ý chỉ hiển thị khi trường nhập liệu được focus.

Dưới đây là ứng dụng ví dụ của chúng ta với tính năng tự động hoàn thành khi chạy.