Chương 7 LISTVIEW Thực chất ListView cũng là một View, một UI Control, tuy nhiên ta tách ra thành một chương riêng bởi vì nó có khá nhiều vấn đề đề trình bày và được sử dụng nhiều. Chúng ta đã được tìm hiểu TextView dùng thê hiên thị các thông tin, tuy nhiên khi muốn hiên thị thông tin dưới dạng danh sách thì sử dụng TextView lại kém hiệu quả, rất khó quản lý và xử lý dữ liệu. Do đó, Android cung cấp cho chúng ta một số đối tượng cho phép hiên thị danh sách tốt hơn, quản lý dễ dàng hơn, một trong số đó là ListView. ListView là đối tượng nâng cao được sử dụng khá nhiều trong lập trình ứng dụng, hình dưới hình ảnh minh họa cho việc sử dụng ListView trong các ứng dụng.
=” 7 = RES it me NN VNG CORPORATION Cài đặt Version 3.1 Danh sách sinh viên 5 tốt Nguyễn Ngọc Bích Album Đặng Thị Ly oeng 0 Nói Với Anh (Single) Lê Hoàng Anh Đáng Khôi Nguyễn Gia Linh Nhin Em Lan Cudi PS vưii uy Nam Nguyễn Tài EM Ñ an Những Ngày Yêu The Teel Ngày Ky 88 Đến q BR: = Hình 7. Ví dụ về ứng dụng ListView Chúng ta có thê sử dụng trực tiếp ListView có sẵn của Android dé hiền thị thông tin, nhưng nội dung hiện thị trong ListView chi la ky tự. Nếu muốn các item của ListView hiên thị nhiều thông tin hơn như hình trên chúng ta cần thiết kế lại layout cho mỗi item của ListView. Trước 191 https://tieulun.org tiên, chúng ta sẽ tìm hiểu về cách Sử dụng ListView có sẵn của Android cho các ứng dụng cơ bản, khi đã nắm rõ về cách sử dụng chúng ta sẽ thiết kế lại layout cho ListView để phục vụ cho các ứng dụng phức tạp hơn.
Dé dé dàng nắm bắt được cách sử dụng ListView chúng ta hãy cùng tham khảo qua các ví dụ dưới đây. Ví dụ 1: Thiết kế ứng dụng hiền thị danh sách sinh viên trong lớp và xử lý sự kiện nhân chọn vào mỗi sinh viên trong danh sách. Ví dụ này nhằm làm quen với viéc su dung ListView do do, chung ta sẽ sử dụng một danh sách sinh viên cô định được luu trong file xml. Tạo một ProJect mới có tén List View_ex1.
Chúng ta sẽ tạo giao điện đơn giản gồm: - TextBox: Hiên thị tên danh sách. - ListBox: Hiển thị đanh sách sinh viên. Ở ví dụ này, tôi dùng LinearLayout đề thiết kế: 4 —— Palette —— |fq Paiette 2 | <) | (9) 4.7in wxGa vị Al + (i Form Widgets | @ vị iia ~ __¡ Text Fields _—' Layeuts Oe) Go| aa! > Composite Sub Item ExpandableLTR Sub ltem "TIẾN N4 GridView L] ScrollView | HorizontalScrollView Qy SearchView {=! SlidingDrawer TABI TAB2 TAB3 TABI _) Custom & Library Views Iv 5] Graphical Layout =) activity_main. Thiết kế giao diện dùng ListView 192 https://tieulun.org Code file activity_main.xml <LinearLayoutxmIns:android="http://schemas.com/apk/res /android" xmlns:tools="http://schemas.com/tools" android:id="@ +id/LinearLayoutl" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@ dimen/activity_vertical_margin" android:paddingLeft="@ dimen/activity_horizontal_margin" android:paddingRight="@ dimen/activity_horizontal_margin" android:padding Top="@ dimen/activity_vertical_margin" tools:context="_MainActivity"> <TextView android:id="@ +id/tvTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:textS1ze=”20sp” android:gravity=“cenfer ” android:text="Danh sdch sinh viên trong lớp "> <ListView android:id="@ +id/lstName" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout> 193 https://tieulun.org Ở đoạn code trên các bạn lưu ý một sô điêm sau: _ +» android:id="“@-+id/Istname” dau la id cua ListView dung dé tuy xuat khi lap trinh code - ListView cũng hỗ trợ một số thuộc tính khác như: margin, padding, gravtty,.
nhưng tôi không để cập ở đây vì mục đích của ví dụ này chỉ giúp các bạn biết cách hiên thị nội dung của một danh sách lên ListView, các bạn có thể thêm các thuộc tính ây vào khi thiết kế giao diện trong file xml va xem su thay đôi. Tiếp theo, chúng ta sẽ tạo một file xml chứa danh sách các sinh viên. Đê tạo file này, tại cửa sô Project Explorer bạn vào thư mục res/ value tao mot file Android XML. Tiếp theo, chúng ta sẽ thêm vào một mảng đề chứa đanh sách sinh viên.
Ở cửa số đang mở file DanhSachSinhVien.xml các bạn nhắn vào nút Add. đê thêm vào một mảng. O hộp thoai hién ra, ban chon muc String Array va chon OK dé hoan tat.xml 5 i@ Android Resources (default) Resources Elements @&® @ ® Ø® 6) @ 6] (HƒP) A: Hình 7. Thêm mảng chứa danh sách sinh viên 194 https://tieulun.org Create a new element at the top level, in Resources, © Color ©)Dimension () Drawable (T)integer Array item (P} Quantity Strings (Plurals) Hình 7.
Thêm mảng chứa danh sách sinh viên Tiếp theo, chúng ta sẽ thêm các item (phân tử) vào trong mảng như sau: Tại cửa sô hiển thị mảng vừa tạo, bạn nhắn vào nút Add. đề thêm phân tử Resources Hements ® ® ® @ (5) @ (S] (H Œ) A: [S| DanhSachSinhVien (String Array) Hình 7. Các thành phân tài nguyên của mảng Ở hộp thoại thêm phần tử, chọn mục item va nhan OK dé hoàn tắt.org Sau khi đã tạo xong danh sách sinh viên, tiếp theo chúng ta sẽ viết code đê hiên thị danh sách này lên ListView khi chạy ứng dụng. Bạn mở file MainActivity.java và nhập vào code sau: a Hình 7.
Tạo các Item cho mang Cuối cùng là nhập giá trị cho item (ở đây item có kiêu String đề chứa tên sinh viên). Chọn Item ở của sô bên trái và nhấp giá trị ở mục Value*. Làm tương tự cho đủ số sinh viên. Resources Elements ®@©@®@®fS)@®(S(T(P]lA: Attributes for item IS : g value to se in this string arr =e—e - ‘Remove.
Nhập giá trị cho các Item cia mang 196 https://tieulun.org Dưới đây là nội dung file DanhSachSinhVien.xml sau khi đã thêm các sinh viên: <?xmlversion="/.0"encoding="utf-8"?> <resources> <string-arrayname="DanhSachSinhVien"> <item>Dang Thi Bich Ly</item> <item>Nguyén Ngoc Bich</item> <item>Hoang Ngoc Van</item> <item>Nguyén Khai Minh</item> <item>Nguyén Ngoc Toan</item> <item>Lé Tuan Diing</item> </string-array> </resources> Ngoài cách thêm mảng và các item trong mảng như đã hướng dẫn ở trên, bạn cũng có thê mở trực tiếp file DanhSachSinhVien.xml sau đó nhập vào code như trên và lưu lại. Khi đã thành thạo bạn nên sử dụng cách viết code đề thực hiện thao tác nhanh và đơn giản hơn. Lập trình để hiển thị danh sách lên ListView và sử lý một số sự kiện đơn giản.listview_ex 1; import java.ArrayList; import android.Bundle; import android. Activity; import android.Menu; import android.
View; import android.AdapterView; 197 https://tieulun.org imporf android.ArrayAdapter; import android.ListView; import android.Toast; public class MainActivity extends Activity { // Khai bao cac đối tượng sử dụng private ListView IstName; private String[] arrDanhSach; private Array Adapter<String>adapterlist; @ Override Protectedvoid onCreate(Bundle savedInstanceState) { super.activity_main); // Tao mang chira danh sach sinh vién va lấy dữ liệu từ file // DanhSachSinhVien.DanhSachSinhVien), // Lay d6i tượng ListView dựa vào ¡d IstName = (ListView) findViewByld(R.istName); // Gán DataSource và ArrayAdapter adapterlist = new ArrayAdapter<String>(this, android.simple_list_item_l, arrDanhSach); // Dua DataSource va ListView IstName.setAdapter(adapterlist); // Sử lý sự kiện Nhắn vào item trên ListView IstName.setOnItemClickListener(new AdapterView.OnItemClickListener() { 198 https://tieulun.org @ Override Publicvoid onltemClick(AdapterView<?> arg0, View argl, intarg2, long arg3) { // TODO Auto-generated method stub String msg; msg = "Sự kiện 'OnltemClickListener”; msg = msg + "nBạn vừa chọn sinh viên ở vị trí: ”; sg = msg + String.this, msg, Toast.show(); // Sử lý sự kiện nhân và giữ vào item trên ListView IstName.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() { @ Override Publicboolean onItemLongClick(AdapterView<?> arg0, View argl, int arg2, long arg3) { // TODO Auto-generated method stub String msg; msg = "Su kiện 'OnltemLongClickLlIstener"”; msg = msg + "\nBan vita chon sinh viên ở vị trí: "; msg = msg + String.this, msg, Toast.show(); Returnfalse; 199 https://tieulun.org }); @ Override Publicboolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present.main, menu); return true; } } _ Code trén duge chú thích khá chỉ tiết, tôi chỉ lưu ý các bạn một sô điểm sau: - Dong code: “adapterlist = new ArrayAdapter<String>(this, android.simple_list_item_1, arrDanhSach);” sé gan DataSource vao ArrayAdapter dé hién thị lên ListView. Bạn đê ý các đối số: _ +this: chính là context của Activity hiện tại, bạn có thê việt MainActivity.this, tuy nhiên khi việt là this thì bạn có thê copy dòng code này đi bất kỳ Actfivity nào thì nó cũng hiểu.simple_list_item_1: day chinh la layout cho cac item ma Android da xay dung san, dé xem ndi dung cua layout nay, ban nhan Ctrl + nhấn chuột vào dong lệnh này, cửa số simple_ list _item_ I.xml sẽ được mở ra. + arrDanhSach: chính là dữ liệu truyền vào để hiển thị lên ListView - Phần xử lý sự kiện sẽ được thảo luận rõ hơn ở chương khác, ở đây tôi chỉ muốn nêu ra hai sự kiện quan trọng được dùng nhiều nhất của ListView do setOnItemClickListener va setOnItemLongClickListener + setOnltemClickListener: xảy ra khi nhắn vào một item trên ListView, khi đó ListView sẽ trả về các đối số, trong đó đối số int arg2 cho biết vị trí của item được nhấn trên ListView. Vị trí đầu tiên trong 200 https://tieulun.org ListView là 0, dựa vào vị trí này ta có thê xác định được Item được nhân và nội dung cua item do.
+ setOnltemLongClickListener: xảy ra khi nhắn và giữ vào item từ 2 đến 3 giây, cũng tương tự như setOnltemClickListener, sự kiện này cũng trả về đối số cho biết vị trí item được nhấn. -O phan này, tôi có sử dụng Toast dung để hiên thị thông tin các item được nhắn. Toast thường được sử dụng đê hiên thị các thông báo và tự mất sau khoảng thời gian nhất định. Kết quả khi chạy trên máy ảo: x5 ` eS, RRR ae.
® ListView_exl Danh sách sinh viên trong lớp Danh sách sinh viên trong lớp Đặng Thị Bích Ly Đặng Thị Bích Ly Nguyễn Ngọc Bích Nguyễn Ngọc Bích Hoang Ngoc Van Hoang Ngoc Van Nguyén Khai Minh Nguyén Khai Minh Lé Tuan Ding Lê Tuấn Dũng Sự kiện "OnlternCtckl tstener Sư kiện 'Q 3an via chon sinh vién ow tri. 0 i Thị Bích Ly Tên: Nguyệt Ng: nttenv_ongChick ist Cama) a Hình 7. Kết quả chạy trên máy do của bài tập Danh sách sinh viên Khi bạn nhân vào tên sinh viên trong danh sách, tùy vào thời gian nhân mà ListView sẽ xử lý các sự kiện tương ứng. Ví dụ 2: Thiệt kê ứng dụng nhập vào danh sách sinh viên và hiện thị trên ListView.
Muôn xóa sinh viên nào thì nhân và giữ vào sinh viên đó. Giao diện ứng dụng gôm: - Hai EditText đề nhập Tên và Mã số sinh viên.org - Một Button đề thêm sinh viên vào danh sách. - Một ListView đề hiện thị danh sách sinh viên Code file activity_main.xml <LinearLayoutxmIns:android="http:/schemas.com/apk/res /android" xmlns:tools="hitp://schemas.com/tools" android:id="@ +id/LinearLayout]" android:layout_width="match_parent" android:layout_height="match_parent" android: gravity="center_horizontal" android:orientation="vertical" 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="_MainActivity"> <EditText android:id="@ +id/etTen" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="/0" android:hint="Nhdp vao Tén sinh vién"> <requestFocus/> </EditText> <EditText android:id="@ +id/etCode" 202 https://tieulun.org android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="/0" android:hint="Nhdp vao Mã số sinh viên" android:numeric="decimal"/> <Button android:id="@ +id/btnThem" android:layout_width="Wwrap_content" android:layout_height="wrap_content" android:text="7Thém sinh vién"/> <ListView android:id="@ +id/stSinhVien" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout> Code trên khá quen thuộc khi bạn đã học qua Layout và các View cơ bản của Android, ở đây tôi sử dụng một thuộc tính quen thuộc là grayvity=center_horizontal cho LinearLayout do đó tất cả các đối tượng trong LinearLayout sẽ được tự động canh giữa màn hình. Ngoài ra, EditText có thêm thuộc tính android:numeric=“deeimal° để quy định chỉ cho phép nhập số vào EditText.
Code file MainActivity.java package com.listview_ex2; import java.ArrayList; import android.Bundle; 203 https://tieulun.org imporf android.Activity; import android.Menu; import android. View; import android.