MultiAutocompleteTextView trong Android
MultiAutocompleteTextView trong Android hỗ trợ cho người dùng những gợi ý liên quan khi bạn nhập vào trường EditText. Những gợi ý đó sẽ được hiển thị trong một danh sách thả xuống từ đó người dùng có thể chọn một item để thay thế cho nội dung của mình vừa nhập vào.
Sự khác biệt với AutocompleteTextView :
Khi sử dụng AutocompleteTextView nó sẽ hiển thị danh sách các gợi ý liên quan và bạn chỉ chọn được 1 gợi ý duy nhất từ danh sách đó. Còn khi sử dụng MultiAutocompleteTextView nó cũng đưa ra các gợi ý liên quan nhưng bạn có thể chọn được nhiều hơn từ danh sách hiển thị, các gợi ý này sẽ được phân cách bởi dấu phẩy.
MultiAutoCompleteTextView code trong XML:
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This Is A MultiAutoCompleteTextView" /> Để cung cấp dữ liệu cho AutoCompleteTextView trong Android chúng ta dùng đối tượng Adapter
Android Adapter (Tạm dịch là bộ tiếp nối) là một cầu nối giữa các View (ví dụ như ListView) và các dữ liệu cơ bản cho View đó. Mộ tAdapter quản lý dữ liệu và ghép nối với các dòng riêng lẻ (ListItem) của View.
Cú pháp:
ArrayAdapter adapter = new ArrayAdapter<String>(this, int resource,T[] objects); - Context context : Đây là Activity hiện tại thông thường dùng từ khóa this
- int resource : Mẫu layout cần hiển thị
- T[] objects: Nguồn dữ liệu
Lấy giá trị từ MultiAutoCompleteTextView trong Java Class:
Code ví dụ sau lấy giá trị từ MultiAutoCompleteTextView
// initiate a MultiAutoCompleteTextView MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); String MultiAutoCompleteTextViewValue = simpleMultiAutoCompleteTextView.getText().toString(); // retrieve
Các phương thức quan trọng của MultiAutoCompleteTextView
1. setTokenizer(MultiAutoCompleteTextView.Tokenizer t): Nếu sử dụng MultiAutoCompleteTextView thì đây là phương thức bắt buộc, Phương thức này để phân cách giữa các chuỗi với nhau khi người sử dụng gõ vào. đối tượng CommaTokenizer được sử dụng để đặt tokenozer phân biệt các chuỗi con khác nhau bằng dấu phẩy.
Ví dụ sau thiết lập dấu "," giữa các chuỗi:
// initiate a MultiAutoCompleteTextView MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); // set tokenizer that distinguish the various substrings by comma simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()); 2. setThreshold(int threshold): Phương thức này dùng để thiết lập số ký tự. Người sử dụng gõ vào đúng với số ký tự được thiết lập trong phương thức này, thì nó mới xuất hiện danh sách gợi ý.
Ví dụ sau khi người dùng gõ vào 2 ký tự mới xuất hiện danh sách gợi ý:
// initiate a MultiAutoCompleteTextView MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); // set threshold value 2 that help us to start the searching from second character simpleMultiAutoCompleteTextView.setThreshold(2);
Thuộc tính thường dùng của MultiAutoCompleteTextView
Bây giờ chúng xem một số thuộc tính hay sử dụng trong MultiAutoCompleteTextView trong tập tin XML
1. android:id: Là thuộc tính duy nhất của MultiAutoCompleteTextView.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" /><!--Trong project Android id là duy nhất--> Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); 2. android:text: thuộc tính này thiết lập nội dung mặc định cho 1 MultiAutoCompleteTextView. Chúng ta có thể thiết lập trong tập tin xml hoặc code java. Ví dụ sau chúng ta thiết lập nội dung "Aspx" cho MultiAutoCompleteTextView
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" /><!--Thiết lập thuộc tính text--> Thiết lập thuộc android:text trong java class
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); simpleMultiAutoCompleteTextView.setText("Hiệp Sĩ IT"); // set text in a MultiAutoCompleteTextView 3. android:gravity: Thuộc tính này thường sử dụng để canh nội dung trên MultiAutoCompleteTextView: left, right, center, top, bottom, center_vertical, center_horizontal.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:gravity="right"/><!--Thiết lập text bên phải --> 
4. android:hint: Thuộc tính hint để hiển thị thông tin gợi ý trong vùng nhập dữ liệu khi bạn chưa nhập bất kỳ dữ liệu nào vào, chỉ cần có dữ liệu là phần hint sẽ tự động mất đi.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:gravity="right" android:hint="Nhập ngôn ngữ "/><!--Thiết lập hint --> 
Thiết lập thuộc tính android:hint trong java code
/*Add in Oncreate() funtion after setContentView()*/ MultiAutoCompleteTextView multiAutoCompleteTextView = (MultiAutoCompleteTextView )findViewById(R.id.simpleMultiAutoCompleteTextView); multiAutoCompleteTextView.setHint("Nhập ngôn ngữ");//display hint 5. android:textColor: Thuộc tính này dùng xác định màu chữ, dạng màu chữ: “#argb”, “#rgb”, “#rrggbb”, hoặc “#aarrggbb”. Vi dụ sau set chữ trong MultiAutoCompleteTextView màu đỏ.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:hint="Nhập ngôn ngữ " android:textColor="#f00"/><!--Thiết lập thuộc tính màu đỏ--> 
Thiết lập thuộc tính android:textColor trong java code
/*Add in Oncreate() funtion after setContentView()*/ MultiAutoCompleteTextView simplemultiAutoCompleteTextView=(MultiAutoCompleteTextView )findViewById(R.id.simplemultiAutoCompleteTextView); //green color for displayed hint simplemultiAutoCompleteTextView.setHintTextColor(Color.green(0)); 6. android:textSize: Thuộc tính textSize xác định kích thước văn bản của MultiAutoCompleteTextView . Chúng ta có thể thiết lập kích thước văn bản theo sp(scale independent pixel) hoặc dp(density pixel). Trong ví dụ này chúng ta xác định kich thước cho văn bản là 40sp.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:textSize="40sp" /><!--thiết lập kícch thước văn bản--> 
Thiết lập thuộc tính android:textSize trong java code
/*Add in Oncreate() funtion after setContentView()*/ MultiAutoCompleteTextView simpleMultiAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleMultiAutoCompleteTextView); //set the text size simpleMultiAutoCompleteTextView.setTextSize(40); 7. android:textStyle: Thuộc tính xác định loại văn bản của MultiAutoCompleteTextView, thông thường có các loại văn bản:bold, italic và normal. Nếu chúng ta muốn sử nhiều hơn một loại văn bản thì phải thêm phép toán hoặc "|" vào giữa các loại văn bản:
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:textSize="40sp" android:textStyle="bold|italic"/><!--bold and italic text style--> 
8. android:background: Thuộc tính này xác định màu nền cho MultiAutoCompleteTextView.
9. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của MultiAutoCompleteTextView với nội dung nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định android:paddingLeft =40dp từ mọi phía của MultiAutoCompleteTextView.
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:textSize="40sp" android:paddingLeft="40dp"/><!-- Thiết lập khoảng trắng 40dp MultiAutoCompleteTextView --> 
Thiết lập thuộc tính Background trong Java class:
/*Add in Oncreate() funtion after setContentView()*/ multiAutoCompleteTextView simpleMultiAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleMultiAutoCompleteTextView); simpleMultiAutoCompleteTextView.setBackgroundColor(Color.BLACK);//set black background color 10. android:drawableTop, android:drawableRight và android:drawableLeft: Hiển thị Icon bên trái, bên phải hoặc phía trên của chuỗi văn bản. Ví dụ sau hiển thị Icon bên phải chuỗi văn bản:
<MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Aspx" android:textSize="40sp" android:paddingLeft="40dp" android:drawableRight="@drawable/ic_launcher"/><!--image drawable on Right side of Text on button-->
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụn gồm có 1 AutoCompleteTextView và 1 TextView. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là AutoCompleteTextView : File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng AutoCompleteTextView và TextView trong Relative Layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.multiautocompletetextview.MainActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="15dp" android:text="Chọn ngôn ngữ lập trình bạn thích" /><!--image drawable on Right side of Text on button--> <MultiAutoCompleteTextView android:id="@+id/simpleMultiAutoCompleteTextView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginTop="38dp" android:drawableRight="@drawable/ic_launcher" android:ems="10" android:paddingLeft="40dp" android:textSize="40sp" > <requestFocus /> </MultiAutoCompleteTextView> </RelativeLayout> Bước 3: Mở app -> src ->MainActivity.java và thêm code.
Khai báo nguồn dữ liệu
String[] language ={"C","C++","Java",".NET","iPhone","Android","ASP.NET","PHP"}; Trong phương thức onCreate(Bundle savedInstanceState) thêm code :
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); // set adapter to fill the data in suggestion list ArrayAdapter<String> versionNames = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, language); simpleMultiAutoCompleteTextView.setAdapter(versionNames); // set threshold value 1 that help us to start the searching from first character simpleMultiAutoCompleteTextView.setThreshold(1); // set tokenizer that distinguish the various substrings by comma simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()); } Toàn bộ code ứng dụng
package hiepsiit.com.multiautocompletetextview; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.ArrayAdapter; import android.widget.MultiAutoCompleteTextView; public class MainActivity extends Activity { String[] language ={"C","C++","Java",".NET","iPhone","Android","ASP.NET","PHP"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView); // set adapter to fill the data in suggestion list ArrayAdapter<String> versionNames = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, language); simpleMultiAutoCompleteTextView.setAdapter(versionNames); // set threshold value 1 that help us to start the searching from first character simpleMultiAutoCompleteTextView.setThreshold(1); // set tokenizer that distinguish the various substrings by comma simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()); } }
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó nhập vào chữ "a" và chữ "i":
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
