Bài tập 17: Thực hành về AutocompleteTextView và MultiAutocompleteTextView

– Đối với các thiết bị di động, việc hỗ trợ nhập dữ liệu nhanh cho người sử dụng là điều rất cần thiết.

– Android hỗ trợ 2 control này giúp chúng ta làm được điều đó. Bạn để ý là danh sách hiển thị lên nó tương tự như Spinner do đó một số bạn sẽ tưởng lầm là Spinner khi quan sát chưa kỹ.

– Tôi ví dụ một trường hợp cụ thể như sau: Bạn viết ứng dụng yêu cầu nhập vào quê quán, giả sử đất nước Việt Nam mình có 63 tỉnh thành, trong đó có các tỉnh như: Hà Nội, Huế, Hà Giang, Hà Nam Ninh,… bất kỳ tỉnh nào đó có chữ H hoặc một nhóm tỉnh thành nào đó có cùng một số ký tự đầu. Như vậy ứng dụng phải Thông minh tự đưa ra lời đề nghị nhập tỉnh thành theo đúng ký tự mà họ muốn nhập, xem hình dưới:

– Như hình trên: Bạn chỉ cần nhập ký tự h đầu tiên, nó sẽ lọc ra các tỉnh thành (hay thành phố) có ký tự đầu là h.

– Bạn nhớ đây không phải là Spinner vì bạn nhìn vào tưởng nó là Spinner. Mà nó là AutoCompleteTextView.

– Vậy 2 control này nó ở đâu? xem hình:

– Bạn xem cấu trúc XML của giao diện (activity_main.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/LinearLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".AutoCompleteTextViewActivity" >
 <TextView
 android:id="@+id/selection"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#5576BE"
 android:text="TextView"
 android:textColor="#FFFFFF"
 android:textSize="20sp" />

<AutoCompleteTextView
 android:id="@+id/editauto"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:completionThreshold="1"
 android:ems="10" >

<requestFocus />
 </AutoCompleteTextView>

<MultiAutoCompleteTextView
 android:id="@+id/multiAutoCompleteTextView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:completionThreshold="1"
 android:ems="10" />

</LinearLayout>

– Ở trên Tôi kéo 2 control ra luôn. Vì Tôi muốn demo code của 2 control này trong một chỗ để bạn dễ so sánh.

– Bạn nhìn vào dòng lệnh số 21 và 31:

android:completionThreshold= “1”

– Mục đích của nó là thiết lập số ký tự bắt đầu lọc trong AutoComplete. Ở đây Tôi nhập là số 1 tức là chỉ cần 1 ký tự là nó bắt đầu lọc, còn nếu như bạn sửa thành 3 thì bạn nhập tới 3 ký tự vào nó mới bắt đầu lọc.

– Xem class xử lý (MainActivity.java):

package tranduythanh.com;

import android.os.Bundle;
import android.app.Activity;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;
import android.widget.TextView;

public class MainActivity extends Activity
 implements TextWatcher /*TextWatcher để xử lý sự kiện TextChange */
 {
 TextView selection;
 //Khai báo 2 CompleteTextView
 AutoCompleteTextView singleComplete;
 MultiAutoCompleteTextView multiComplete;
 //Khởi tạo mảng tạm để Test
 String arr[]={"hà nội","Huế","Sài gòn",
 "hà giang","Hội an","Kiên giang",
 "Lâm đồng","Long khánh"};
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 selection =(TextView) findViewById(R.id.selection);
 //lấy đối tượng AutoCompleteTextView ra
 singleComplete=(AutoCompleteTextView) findViewById(R.id.editauto);
 //Thiết lập để lắng nghe TextChange
 singleComplete.addTextChangedListener(this);
 //Thiết lập ArrayADapter
 singleComplete.setAdapter(
 new ArrayAdapter<String>
 (
 this,
 android.R.layout.simple_list_item_1,
 arr
 ));
 //Lấy đối tượng MultiAutoCompleteTextView ra
 multiComplete=(MultiAutoCompleteTextView)
 findViewById(R.id.multiAutoCompleteTextView1);
 //Thiết lập ArrayADapter
 multiComplete.setAdapter(
 new ArrayAdapter<String>
 (
 this,
 android.R.layout.simple_list_item_1,
 arr
 ));
 //Đối với MultiAutoCompleteTextView bắt buộc phải gọi dòng lệnh này
 multiComplete.setTokenizer(new MultiAutoCompleteTextView
 .CommaTokenizer());
 }
 //Khi chọn trong AutoCompleteTextView hàm này sẽ tự động phát sinh
 public void onTextChanged(CharSequence arg0, int arg1,
 int arg2, int arg3) {
 selection.setText(singleComplete.getText());
 }
 public void afterTextChanged(Editable arg0) {
 }
 public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
 int arg3) {
 }
}

– Tôi giải thích thêm:

+ Việc gán DataSource vào ArrayAdapter rồi gán ArrayAdapter vào cho ListView như thế nào thì nó y xì như vậy đối với AutoCompleteTextView.

+ Đối với MultiAutoCompleteTextView cũng vậy, nó chỉ yêu cầu thêm dòng lệnh:

setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer())

– Như vậy nếu bạn đã hiểu ListView thì không có lý do gì mà lại không hiểu CompleteTextView.

– Bạn tải code mẫu ở đây:http://www.mediafire.com/?dos0a2v0bh6hp2b

– Bài tập sau Tôi sẽ hướng dẫn các bạn cập nhật DataSource lúc Runtime cho AutocompleteTextView.

– Chúc các bạn thành công.