Bài 18: Custom Listview trong Android

Bây giờ chúng ra sẽ đi custom lại cái listview mà mình đã giới thiệu ở bài 16 nhé, cái này cũng là ở mức dễ chứ không có gì khó, sau bài này mình sẽ có bài thực hành khó hơn tí nữa để mọi người làm quen làm việc với listview vì khi đi làm đụng đến nó rất là nhiều.

Chúng ta nhìn lại hình ảnh bên dưới trước khi bắt tay vào làm nhé, mình sẽ phân tích cụ thể các bước chúng ta cần làm là gì:

Bạn thấy ở trên có rất nhiều dòng đúng không nhưng bạn chỉ cần thiết kế layout một dòng và sau đó add vào ListView, bạn add bao nhiêu cái thì nó có bấy nhiêu dòng thôi.

Custom listview android

Custom listview android

Công việc chúng ta bao gồm:

  1. Tạo một file layout cho các dòng (item) trong listView.
  2. Tạo 1 class tượng trung cho Contact
  3. Tạo class CustomAdapter để custom listview cho layout đã tạo phía trên.
  4. Gọi CustomAdapter để lấy dữ liệu.

1. File layout ở trên sẽ bao gồm 2 TextView và dưới đây là file layout đó:

row_listview.xml


 2. Đây là class Contact bạn sẽ thiết kế để tạo ra một đối tượng lưu vào các item của listview, ở đây là các row.Cách tạo Constructergetter(), setter() chắc mọi người đã biết rồi chứ đúng không nào, nó học ở Java căn bản đó.

Contact này sẽ có các thuộc tính như:

  • Name: hiển thị tên ngườ dùng.
  • PhoneNumber: hiển thị số điện thoại.
  • Color: màu sắc avatar

Contact.java


3.Như bài học về listview trước chúng ta không custom ArrdayAdapter mà là sử dụng luôn thư viện có sẵn mà Android đã có, thế nên listview chỉ hiển thị dữ liệu dạng 1 đoạn text ở trên 1 row, còn bây giờ trên một row chúng ta có tới tận 3 image view thì không dùng nó được mà chúng ta phải custom lại đễ dữ liệu có thể hiển thị được.

CustomAdapter.java


Ở thằng này sẽ có rất nhiều cái mới nên mình sẽ giải thích cặn kẽ, không hiểu bạn có thể xem thêm ở video bên dưới nhé:

Ở đây class CustomAdaper kế thừa lại thằng ArrayAdapter<> có kiểu Generic là Contact, nghĩa là nó chỉ nhận vào kiểu dữ liệu là Contact thôi.Khi bạn kế thừa thì bắt buộc bạn phải ghi đè @Override constructer là:


Ở đây bạn sẽ truyền vào các params như trên, nếu bạn có xem bài 18 thì sẽ còn nhớ dòng lênh này:


Thì bạn custom lại Adapter thì  khi dùng bạn cũng sẽ gọi Adapter đó và truyền các tham số vào, ở đây bạn sẽ thay đổi thằng:

android.R.layout.simple_list_item thành layout bạn đã thiết kế ở trên row_listview.xml, và list number trên sẽ thay bằng 1 list Contact khác.

Tiếp đến là phương thức getView(), đây là phương thức để khởi tạo view để add nó vào Listview, ở đây nó sẽ tạo ra các row trên listview và set dữ liệu là các Contact lên các row đó, thực ra bạn cũng chẳng cần hiểu nó là cái gì bởi vì đây là cú pháp cứng chúng ta chỉ cần học thuộc rồi dùng, dùng nhiều lần dẫn đến quen và hiểu.


Ở đây mình sử dụng thằng ViewHolder để setTag()getTag() khi khởi tạo view, các bạn biết tại sao lại sử dụng nó không? Thực ra listview nếu bạn chỉ có vài row thì khi vuốt lên xuống rất là mượt mà nhưng nếu bạn có đến 1000 row thì lại khác, nó sẽ rất lag đó( sau này mình sẽ giới thiệu Recyclerview dùng mượt hơn listview).

Chính vì thế thằng ViewHolder này ra đời để khắc phục, khi các bạn trượt listview lên xuống thì nếu các row này đã khởi tạo rồi thì nó sẽ lưu ở Tag và sẽ không khởi tạo lại bàng việc getTag ra, trong video mình giải thích rất rõ cái này nên bạn xem sẽ hiểu ngay.


Vì khi gọi class CustomAdaper ở MainActivity bạn sẽ truyền cho nó 1 list Contact nên dòng code trên sẽ có tác dụng là lấy ra từng Contact một tương tứng với từng view, khi lấy được contact nó sẽ có được dữ liệu của 1 Contact như: name, phonenumber, color… và dữ liệu này sẽ set lên trên row của listview.

Và cuối cùng là return lại converView chính là các row mà nãy giờ chúng ta đã tạo và set dữ liệu lên.

4.Như bài trước mình đã nói là Adapter có nhiệm vụ là trung gian để chứa data hiển thị lên listview, ở đây bạn cũng làm tương tự là gọi CustomAdapter rồi truyền mảng Contact vào cho nó xử lý đưa vào row thôi.

MainActivity.java


Còn đây là file layout của MainActivity:

activity_main.xml


Ở MainActivity mình tạo ra 7 đối tượng contact rồi add nó vào Arraylist<Contact> là arrContact để  bỏ vào CustomAdapter , sau đó setAdapter đó lên listView để nó hiển thị là xong.Như ban đầu mình nói custom Listview khó nhưng tuy nhiên là đối với những người mới học thôi, vì nó hơi khó hiểu nhưng biết rồi thì thấy nó đơn giản thật.

Ngoài cách custom Adapter bằng việc kế thừa ArrayAdapter thì bạn còn cách kế thừa BaseAdapter và mình sẽ hướng dẫn trong chuyên mục android nâng cao các bạn có thể tìm xem.Và dưới đây là video chi tiết để cho bạn nào không hiểu có thể xem qua video nhé.

Video hướng dẫn custom listview trong android

Tải source code


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

Bài 18: Custom Listview trong Android
4.8 (95%) 4 votes

5 Comments

  1. Tran Thanh February 12, 2017
    • trangchongcheng February 24, 2017
  2. Mr Bean April 10, 2017
  3. Mr Bean April 10, 2017
  4. tien June 1, 2017

Add Comment

*