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

[polldaddy poll=9764234]

– Đố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):

[code language=”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>

[/code]

– Ở 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):

[code language=”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) {
}
}
[/code]

– 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.