ListView nâng cao trong Android

Nếu bạn nào muốn rèn luyện thêm lập trình Java, lập trình Android, lập trình Webservice với tổng thời lượng học >80 giờ thì có thể đăng ký học theo các link sau: 1] Lập trình java trong 4 tuần 19 giờ[chỉ dành cho những ai CHƯA BIẾT GÌ VỀ LẬP TRÌNH hoặc đã biết lơ mơ về Java, lý thuyết và các bài tập phong phú tạo nền tảng lập trình Android và các hướng khác liên quan tới Java]: //kyna.vn/lap-trinh-java-trong-4-tuan/325931 2] Lập trình Android cơ bản [>24 giờ học] toàn bộ kiến thức về Android cơ bản: //kyna.vn/lap-trinh-android-co-ban/325931 3] Lập trình Android nâng cao [23 giờ học] toàn bộ kiến thức về Android nâng cao: //kyna.vn/lap-trinh-android-nang-cao/325931 4] Lập trình Webservice cho Di Động 14 giờ [dành cho những ai ĐÃ BIẾT ANDROID], những ai chưa biết Android tuyệt đối không đăng ký, khóa học hướng dẫn tỉ mỉ từ A->Z để có thể xây dựng được một phần mềm hoàn chỉnh tương tác client-server: //kyna.vn/lap-trinh-webservice-cho-di-dong/325931

View Poll

Ở bài tập 13bạn đã được thực hành với ListView control. Trong bài tập này bạn sẽ học cách Custom lại layout cho ListView trong ứng dụng Android của bạn. Tôi nghĩ bài tập này nó rất quan trọng và thực tế bởi vì trong các ứng dụng Android có liên quan tới ListView thì đa phần chúng ta phải custom lại cho đúng với yêu cầu của khách hàng.

Tôi có làm một ví dụ về quản lý nhân viên với giao diện bên dưới đây:

Bạn quan sát là phần danh sách nhân viên bên dưới là Custom Layout.

Mỗi dòng trong ListView sẽ có 3 đối tượng: ImageView, TextView và Checkbox.

Khi nhập nhân viên nếu người sử dụng chọn Nữ thì sẽ hiển thị hình là con gái, nếu chọn Nam thì hiển thị hình là con trai [bạn nhìn danh sách hình nhỏ nhỏ 16×16 ở ListView].

Mã và tên của nhân viên sẽ được hiển thị vào TextView

Checkbox cho phép người sử dụng checked [nhằm đánh dấu những nhân viên muốn xóa, ở đây cho phép xóa nhiều nhân viên]

Bạn để ý Tôi có thêm 1 ImageButton có hình màu Chéo đỏ, nó dùng để xóa tất cả các nhân viên được Checked trong ListView, sau khi xóa thành công thì phải cập nhật lại ListView.

Để làm được điều trên thì ta sẽ kế thừa từArrayAdapter và override phương thức getView, cụ thể:

Bạn xem Cấu trúc chương trình quản lý nhân viên:

Tôi tạo thêm thư mục drawable và kéo thả 3 icon mà Tôi sử dụng vào [bạn cũng tạo thư mục tên y xì vậy]. Nhớ là tên hình phải viết liền và chữ thường đầu tiên.

Trong thư mục layout: Tôi tạo thêm my_item_layout.xml dùng để Custom lại ListView, dưới đây là cấu trúc XML của nó:

Ta sẽ dựa vào các id trong này để xử lý trong hàm getView của class mà ta kế thừa từ ArrayAdapter [các id trên làimgitem đại diện cho hình là Nữ hay Nam, txtitem dùng để hiển thị mã và tên nhân viên,chkitem dùng để xử lý Checked]

Bạn xem activity_main.xml:

Layout main này chính là giao diện chính của ứng dụng.

Dưới đây là các class hỗ trợ xử lý nghiệp vụ:

Class Employee dùng để lưu trữ thông tin nhân viên: Mã nhân viên, tên nhân viên, giới tính

ClassMyArrayAdapter kế thừa từ ArrayAdapter, mục đích của nó là giúp chúng ta Custom lại layout cho ListView.

Cuối cùng MainActivity.

Bây giờ ta vào chi tiết từng class:

1] class Employee:

package tranduythanh.com; public class Employee { private String id; private String name; private boolean gender; public String getId[] { return id; } public void setId[String id] { this.id = id; } public String getName[] { return name; } public void setName[String name] { this.name = name; } public boolean isGender[] { return gender; } public void setGender[boolean gender] { this.gender = gender; } @Override public String toString[] { return this.id+"-"+this.name; } }

2] class MyArrayAdapter:

package tranduythanh.com; import java.util.ArrayList; import android.app.Activity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; public class MyArrayAdapter extends ArrayAdapter { Activity context=null; ArrayListmyArray=null; int layoutId; /** * Constructor này dùng để khởi tạo các giá trị * từ MainActivity truyền vào * @param context : là Activity từ Main * @param layoutId: Là layout custom do ta tạo [my_item_layout.xml] * @param arr : Danh sách nhân viên truyền từ Main */ public MyArrayAdapter[Activity context, int layoutId, ArrayListarr]{ super[context, layoutId, arr]; this.context=context; this.layoutId=layoutId; this.myArray=arr; } /** * hàm dùng để custom layout, ta phải override lại hàm này * từ MainActivity truyền vào * @param position : là vị trí của phần tử trong danh sách nhân viên * @param convertView: convertView, dùng nó để xử lý Item * @param parent : Danh sách nhân viên truyền từ Main * @return View: trả về chính convertView */ public View getView[int position, View convertView, ViewGroup parent] { /** * bạn chú ý là ở đây Tôi không làm: * if[convertView==null] * { * LayoutInflater inflater= * context.getLayoutInflater[]; * convertView=inflater.inflate[layoutId, null]; * } * Lý do là ta phải xử lý xóa phần tử Checked, nếu dùng If thì * nó lại checked cho các phần tử khác sau khi xóa vì convertView * lưu lại trạng thái trước đó */ LayoutInflater inflater= context.getLayoutInflater[]; convertView=inflater.inflate[layoutId, null]; //chỉ là test thôi, bạn có thể bỏ If đi if[myArray.size[]>0 && position>=0] { //dòng lệnh lấy TextView ra để hiển thị Mã và tên lên final TextView txtdisplay=[TextView] convertView.findViewById[R.id.txtitem]; //lấy ra nhân viên thứ position final Employee emp=myArray.get[position]; //đưa thông tin lên TextView //emp.toString[] sẽ trả về Id và Name txtdisplay.setText[emp.toString[]]; //lấy ImageView ra để thiết lập hình ảnh cho đúng final ImageView imgitem=[ImageView] convertView.findViewById[R.id.imgitem]; //nếu là Nữ thì lấy hình con gái if[emp.isGender[]] imgitem.setImageResource[R.drawable.girlicon]; else//nếu là Nam thì lấy hình con trai imgitem.setImageResource[R.drawable.boyicon ]; } //Vì View là Object là dạng tham chiếu đối tượng, nên //mọi sự thay đổi của các object bên trong convertView //thì nó cũng biết sự thay đổi đó return convertView;//trả về View này, tức là trả luôn //về các thông số mới mà ta vừa thay đổi } }

Đây là class quan trọng nhất, mới nhất; dùng để custom layout.

3] class MainActivity:

package tranduythanh.com; import java.util.ArrayList; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.CheckBox; import android.widget.EditText; import android.widget.ImageButton; import android.widget.ListView; import android.widget.RadioGroup; public class MainActivity extends Activity { ArrayListarrEmployee=new ArrayList[]; //Sử dụng MyArrayAdapter thay thì ArrayAdapter MyArrayAdapter adapter=null; ListView lvNhanvien=null; Button btnNhap; ImageButton btnRemoveAll; EditText editMa,editTen; RadioGroup genderGroup; @Override protected void onCreate[Bundle savedInstanceState] { super.onCreate[savedInstanceState]; setContentView[R.layout.activity_main]; btnNhap=[Button] findViewById[R.id.btnNhap]; btnRemoveAll=[ImageButton] findViewById[R.id.btndelete]; editMa=[EditText] findViewById[R.id.editMa]; editTen=[EditText] findViewById[R.id.editTen]; genderGroup=[RadioGroup] findViewById[R.id.radioGroup1]; lvNhanvien=[ListView] findViewById[R.id.lvnhanvien]; arrEmployee=new ArrayList[]; //Khởi tạo đối tượng adapter và gán Data source adapter=new MyArrayAdapter[ this, R.layout.my_item_layout,// lấy custom layout arrEmployee/*thiết lập data source*/]; lvNhanvien.setAdapter[adapter];//gán Adapter vào Lisview btnNhap.setOnClickListener[new OnClickListener[] { @Override public void onClick[View arg0] { // TODO Auto-generated method stub xulyNhap[]; } }]; btnRemoveAll.setOnClickListener[new OnClickListener[] { @Override public void onClick[View arg0] { xulyXoa[]; } }]; } //gọi hàm xử lý nhập thông tin nhân viên public void xulyNhap[] { String ma=editMa.getText[]+""; String ten=editTen.getText[]+""; boolean gioitinh=false;//Nam =false if[genderGroup.getCheckedRadioButtonId[]==R.id.radNu] gioitinh=true; //Tạo một employee Employee emp=new Employee[]; emp.setId[ma]; emp.setName[ten]; emp.setGender[gioitinh]; //Đưa vào danh sách arrEmployee.add[emp]; //gọi hàm cập nhật giao diện adapter.notifyDataSetChanged[]; //Sau khi update thì xóa trắng dữ liệu và cho editma focus editMa.setText[""]; editTen.setText[""]; editMa.requestFocus[]; } //hàm xử lý xóa public void xulyXoa[] { //ta nên đi ngược danh sách, kiểm tra phần tử nào checked //thì xóa đúng vị trí đó ra khỏi arrEmployee for[int i=lvNhanvien.getChildCount[]-1;i>=0;i--] { //lấy ra dòng thứ i trong ListView //Dòng thứ i sẽ có 3 phần tử: ImageView, TextView, Checkbox View v=lvNhanvien.getChildAt[i]; //Ta chỉ lấy CheckBox ra kiểm tra CheckBox chk=[CheckBox] v.findViewById[R.id.chkitem]; //Nếu nó Checked thì xóa ra khỏi arrEmployee if[chk.isChecked[]] { //xóa phần tử thứ i ra khỏi danh sách arrEmployee.remove[i]; } } //Sau khi xóa xong thì gọi update giao diện adapter.notifyDataSetChanged[]; } }

Bây giờ bạn thực hiện chương trình và nhập một số nhân viên, rồi checked rồi nhấn xóa:

Bạn hãy tìm hiểu thêm trên mạng về cách xử lý các phần tử khi custom, ở đây Tôi chưa xử lý xong: Ví dụ bạn chưa thể chọn được vào từng phần tử trong ListView [cho dù bạn có nghiến răng ngoáy mạnh ngón tay vào thì nó cũng không lung lay, Nếu bạn bỏ CheckBox đi thì lại được] Nên bạn tìm hiểu thêm phần xử lý này [how to selected item in custom ListView].

Bạn có thể tải toàn bộ coding mẫu ở đây://www.mediafire.com/?16tw6xf55nivr8k

Bạn nên làm tốt bài này vì nó rất quan trọng và hay.

Trong các bài tập tiếp theo bạn sẽ được thực hành về Spinner, GridView, kết hợp Spinner với ListView, kết hợp Spinner với GridView.

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