ExpandableListView Trong Android
Expandable listivew được sử dụng để nhóm dữ liệu theo danh mục. Nó có thể được mở rộng hoặc thu gọn khi người dùng chạm vào tiêu đề (header). Nếu bạn chưa từng sử dụng listview trong android thì vui lòng xem bài học Listview trong android
Chúng ta cũng có thể thiết lập sự kiện OnClick hoặc các sự kiện khác trong Group hoặc từng con trong nhóm
ExpandableListView code trong XML:
<ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="fill_parent" android:layout_height="fill_parent"/> Thuộc tính thường dùng của ExpandableListView
Bây giờ chúng xem một số thuộc tính hay sử dụng trong ExpandableListView trong tập tin XML
1. android:id: Là thuộc tính duy nhất của ExpandableListView. Xem ví dụ sau:
<ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="fill_parent" android:layout_height="fill_parent"/> 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:
ExpandableListView simpleExpandableListView = (ExpandableListView) findViewById(R.id.simpleExpandableListView ); 2. android:divider: Thuộc tính này có thể là một image hay màu dùng để phân chia giữa các dòng trong ExpandableListView. Ví dụ sau chúng ta dùng màu đỏ để phân chia giữa nhóm trong ExpandableListView
<ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="match_parent" android:layout_height="fill_parent" android:divider="#f00" android:dividerHeight="1dp" /> "/> <!-- red color divider with 1dp height between the groups items of expandable list view --> 
3. android:dividerHeight: Thuộc tính này xác định chiều cao của thuộc tính android:divider. Trong ví dụ trên chúng ta xác định chiều cao ExpandableListView là 1dp
4. android:listSelector: Thuộc tính này thường được sử dụng để thiết lập màu hoặc hình dòng được chọn trong ExpandableListView. Thường nó sử dụng màu cam hoặc màu xanh dương, nhưng chúng ta cũng có thể thiết lập lại màu hoặc image cho ExpandableListView. Ví dụ chúng ta thiết lập màu xanh lá cây khi người sử dụng chọn 1 dòng dữ liệu trong ExpandableListView.
5. android:childDivider: Thuộc tính này có thể là một image hay màu dùng để phân chia giữa các dòng con của ExpandableListView.
<ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="match_parent" android:layout_height="fill_parent" android:divider="#f00" android:dividerHeight="1dp" android:childDivider="#0f0" /> <!-- green color divider between the child items of expandable list view --> 
6. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ExpandableListView 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 padding=50dp từ mọi phía của ExpandableListView.
<ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="match_parent" android:layout_height="fill_parent" android:divider="#f00" android:dividerHeight="2dp" android:childDivider="#0f0" android:padding="50dp" /> <!-- 50 dp padding from all the sides of a expandable list view --> 
Sử dụng Adapter trong ExpandableListView
Một Adapter là một đối tượng của một lớp cài đặt giao diện Adapter. Nó đóng vai trò như là một liên kết giữa một tập hợp dữ liệu và một Adapter View, một đối tượng của một lớp thừa kế lớp trừu tượng AdapterView. Tập hợp dữ liệu có thể là bất cứ điều gì mà trình bày dữ liệu một cách có cấu trúc. Mảng các đối tượng List và các đối tượng Cursor thường sử dụng bộ dữ liệu.
Để cung cấp dữ liệu cho ExpandableListView các Adapter sau thường được sử dụng
- BaseExpandableListAdapter
- SimpleExpandableListAdapter
- ExpandableListAdapter
1. SimpleExpandableListAdapter:
SimpleExpandableListAdapter là một adapter thường được sử dụng để map dữ liệu tĩnh vào group view và các view con được định nghĩa trong tập tin Layout
public SimpleExpandableListAdapter (Context context, List<? extends Map<String, ?>> groupData, int groupLayout, String[]groupFrom, int[] groupTo, List<? extends List<? extends Map<String, ?>>> childData, int childLayout, String[] childFrom, int[] childTo) 2. ExpandableListAdapter:
ExpandableListAdapter là một Adapter để liên kết dữ liệu cho ExpandableListView . Đây là lớp giao diện (interface) dùng cung cấp dữ liệu cho các view con cũng như các view cha.
Ví dụ sau chúng ta tạo một lớp CustomAdapter kế thừa lớp ExpandableListView
public class CustomAdapter implements ExpandableListAdapter { @Override public void registerDataSetObserver(DataSetObserver observer) { } @Override public void unregisterDataSetObserver(DataSetObserver observer) { } @Override public int getGroupCount() { return 0; } @Override public int getChildrenCount(int groupPosition) { return 0; } @Override public Object getGroup(int groupPosition) { return null; } @Override public Object getChild(int groupPosition, int childPosition) { return null; } @Override public long getGroupId(int groupPosition) { return 0; } @Override public long getChildId(int groupPosition, int childPosition) { return 0; } @Override public boolean hasStableIds() { return false; } @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { return null; } @Override public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { return null; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { return false; } @Override public boolean areAllItemsEnabled() { return false; } @Override public boolean isEmpty() { return false; } @Override public void onGroupExpanded(int groupPosition) { } @Override public void onGroupCollapsed(int groupPosition) { } @Override public long getCombinedChildId(long groupId, long childId) { return 0; } @Override public long getCombinedGroupId(long groupId) { return 0; } } 3. BaseExpandableListAdapter:
BaseExpandableListAdapter là lớp cơ sở của lớp ExpandableListAdapter thường được dùng để cung cấp dữ liệu. Do đó, để tùy biến lại ExpandableListView chúng ta phải tạo một lớp kế thừa từ lớp BaseExpandableListAdapter.
Ví dụ sau chúng ta tạo một lớp CustomAdapter kế thừa lớp BaseExpandableListAdapter
public class CustomAdapter extends BaseExpandableListAdapter { @Override public int getGroupCount() { return 0; } @Override public int getChildrenCount(int groupPosition) { return 0; } @Override public Object getGroup(int groupPosition) { return null; } @Override public Object getChild(int groupPosition, int childPosition) { return null; } @Override public long getGroupId(int groupPosition) { return 0; } @Override public long getChildId(int groupPosition, int childPosition) { return 0; } @Override public boolean hasStableIds() { return false; } @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { return null; } @Override public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { return null; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { return false; } } Code trên chúng ta ghi đè(override) lại các phương thức của ExpandableListAdapter thường được sử dụng để thiết lập dữ liệu trong ExpandableListView. Xem chi tiết từng phương thức sau:
1. registerDataSetObserver(DataSetObserver observer): Phương thức này được sử dụng để đăng ký một bộ giám sát được gọi là khi những thay đổi xảy ra với dữ liệu được sử dụng bởi Adapter.
2. unregisterDataSetObserver(DataSetObserver observer): Phương thức này được sử dụng để hủy đăng ký một bộ giám sát được gọi là khi những thay đổi xảy ra với dữ liệu được sử dụng bởi Adapter.
3. getGroupCount(): Phương thức này dùng để lấy số phần tử của group.
4. getChildrenCount(int groupPosition): Phương thức này được sử dụng lấy số phần tử con trong group cha. Tham số groupPosition vị trí của group cha.
5. getGroup(int groupPosition): Phương thức này 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. Tham số groupPosition vị trí của group cha.
6. getChild(int groupPosition, int childPosition): Phương thức này trả về object child trong Group có vị trí là groupPostion và child có vị trí là childPosition.
7. getGroupId(int groupPosition): Phương thức này trả về id của group tại vị trí truyền vào. Tham số groupPosition vị trí của group cha.
8. getChildId(int groupPosition, int childPosition): Phương thức này trả về id con của một group. Tham số groupPostion vị trí của group, tham số childPosition vị trí con của group.
9. hasStableIds(): Phương thức này kiểm tra ID con và nhóm có ổn định không khi thay đổi dữ liệu cơ bản.
10. getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent): bản chất giống getView trong ListView. Nhưng getGroupView sẽ trả về View hiển thị Group Header.
Các tham số :
- groupPosition: Tham số thứ 1 là vị trí của GroupHeader.
- isExpanded: Tham số thứ 2 nếu true có nghĩa GroupHeader hiện tại đang mở rộng.
- convertView: Tham số thứ 3 trả về là View được sử dụng để thiết lập group item cho layout.
- Parent: Tham số thứ 4 được sử dụng thiết lập view cho GroupHeader
11. getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent): Bản chất cũng giống như getView. Nhưng ở đây getChildView trả về View để hiển thị view trong Header View.
12. isChildSelectable(int groupPosition, int childPosition): Phương thức này để kiểm tra tại vị trí hiện tại child có được chọn hay không. Tham số groupPostion vị trí của group, tham số childPosition vị trí con của group.
13. areAllItemsEnabled(): Phương thức này kiểm tra tất các item của ExpandableList có enable hay không.
14. isEmpty(): Trả về true nếu item là rỗng
15. onGroupExpanded(int groupPosition): Phương thức này được sử dụng để đóng một GroupHeader. Tham số groupPosition vị trí của group cha.
16. onGroupCollapsed(int groupPosition): Phương thức này được sử dụng để mở một GroupHeader. Tham số groupPosition vị trí của group cha.
17. getCombinedChildId(long groupId, long childId): Phương thức này dùng để lấy id của một GroupHeader.
18. getCombinedGroupId(long groupId): Phương thức này dùng để lấy id child của một GroupHeader. Tham số là id của GroupHeader.
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một ExpandableListView. Trong ExpandableListView chúng ta hiển thị tên chủ đề dưới dạng Group và tên chủ đề của chúng như các mục con cho một nhóm cụ thể. Tiếp theo chúng ta sẽ thiết lập 2 sự kiện OnChildClickListener() và setOnGroupClickListener() cho mục con và GroupHeader. Khi người sử dụng click chúng ta sẽ hiển thị tên thông qua đối tượng Toast. 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à ExpandableListView: 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 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.expandablelistview.MainActivity" > <ExpandableListView android:id="@+id/simpleExpandableListView" android:layout_width="match_parent" android:layout_height="fill_parent" android:divider="#f00" android:childDivider="#0f0" android:dividerHeight="1dp" /> </RelativeLayout> Bước 3: Tạo mới một layout có tên child_items.xml vào trong thư mục layout và thêm code sau:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:id="@+id/sequence" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:paddingLeft="35sp" android:textAppearance="?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/childItem" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@id/sequence" android:textAppearance="?android:attr/textAppearanceMedium" /> </RelativeLayout>
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
