Android

Sử dụng ExpandableListView Trong Android

Giới thiệu

Sau khi hoàn thành các bài viết về ListView tôi chợt nhận ra rằng còn một View khác cũng có chức năng giống như ListView đó là ExpandableListView. ExpandableListView là loại ListView giúp chúng ta có thể gom nhóm các view con thành một group. Chúng ta có thể expand của hay collapse phần header để xem thông tin các thành phần con trong header này. Chi tiết về các sử dụng Expandable sẽ được giới thiệu ngay dưới đây.

Tổng quan về ExpandableListView

Thực chất thì class ExpandableListView là một ListView. ExpandableListView kế thừa từ ListViewListView và thêm vào tính năng đó là group các item theo một loại nào đó.

Ví dụ

  • Group các sinh viên theo loại khá, giỏi, trung bình, yếu.
  • Group các nhóm chat theo chủ đề: Chat về học tập, ăn uống, giải trí .v.v.

Nếu bạn nào chưa có kiến thức về ListView thì hãy xem lại ba bài viết về ListView của tôi ở dưới đây:

ListView trong Android Phần 1
ListView trong Android (Phần 2)
ListView Multiple Selection Và ListView Single Selection

Trước khi bắt đầu tìm hiểu thì bạn hãy xem qua video Demo ExpandableListView

Việc sử dụng ExpandableListView cũng khá giống như ListView nhưng có vài nét khác nhau ở việc tạo Adapter cho ExpandableListView.

Chúng ta phải extends class BaseExpandableaseListAdapter  và override lại những phương thức như dứoi đây:

Các bạn cần chú ý tới những phương thức chính sau:

  • getGroupCount: Trả về số phần tử  của group.
  • getChildrenCount: Trả về số phần tử con ứng với groupPosition.
  • getGroup: Trả về object của header group. Có nghĩa là trả về phần tử  tại groupPosition trong danh sách header group.
  • getChild: Trả về object child trong Group có vị trí là groupPostion và child có vị trí là childPosition.
  • getGroupView: bản chất giống getView trong ListView. Nhưng getGroupView sẽ trả về View hiển thị Group Header.
  • getChildView: Bản chất cũng giống như getView. Nhưng ở đây getChildView trả về View để hiển thị view trong Header View.

Để hình dung rõ hơn những điều tôi vừa giải thích ở trên tôi có một custom Adapter như sau:

Với group_layout.xml để hiển thị UI của group

student_row_layout.xml biểu diễn UI của view con trong group

Thêm ExpandableListView trong main_activity.xml

Setup data và setAdapter cho ExpanableListView trong MainActivity.java

Nếu các bạn muốn các group luôn luôn expand thì có thể làm như sau:

Chúng ta thấy rằng data của chúng ta có hơi khác biệt so với ListView. Ở đây chúng ta sẽ dùng HashMap có Key kiểu String ứng với header group và value và một List<Student> thể hiện các con của header group. Cũng dễ hiểu phải không nào.

Class Student.java

Source code ExpandableListViewAndroid

Những Event Listener sử dụng với ExpandableListView

Event khi Group được Expanded

Event khi Group được Colapsed

Event khi click và Group

Event khi click vào các child trong group.

Tuy nhiên để event này xảy ra bạn phải return true trong phương thức isChildSelectable của CustomAdapter.

Kết luận

Vậy là chúng ta đã đi xong một bài về ListView nữa rồi. Đến bây giời tôi tin rằng các UI về danh sách các bạn có thể design và custom một cách dễ dàng. Nếu có bất cứ thắc mắc nào trong bài viết vui lòng để lại bình luận ở phía dưới hoặc liên hệ qua fanpage Eitguide Android để được giải đáp sớm nhất.

 

3 thoughts on “Sử dụng ExpandableListView Trong Android”

  1. cảm ơn bài viết của bạn rất nhiều nhé, hy vọng bạn ra được nhiều bài hướng dẫn hay và thu vị hơn nữa, chân thành cảm ơn bạn

  2. nếu muốn làm expandablelistview bằng cách bóc tách từ html sao bạn. Ví dụ đã đổ dữ liệu ra html có sẵn rồi giờ muốn chuyển sang app nhưng dữ liệu có nhiều nếu làm từng cái như vậy thì lâu lắm

  3. //data for child
    mình muốn thêm nhiều danh sách như listStudentKem,.. vào db rồi tự động lấy ra thì phải lm như nào ạ ?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.