Hướng dẫn sử dụng Expandable ListView trong Android

Hướng dẫn sử dụng Expandable ListView trong Android

huong-dan-su-dung-explandable-listview-trong-android-1
Hướng dẫn Android

Hướng dẫn sử dụng Expandable ListView trong Android

Hướng dẫn sử dụng expandable listview trong android sẽ cho các bạn biết expandable listview là gì; cũng như cách sử dụng expandable listview trong ứng dụng 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 giảng Listview trong android

Hướng dẫn sử dụng expandable listview trong android – Một số hình ảnh về ExpandableListView

Khi mở rộng

Hướng dẫn sử dụng expandable listview trong android

Khi thu nhỏ

huong-dan-su-dung-explandable-listview-trong-android-5

Hướng dẫn sử dụng expandable listview trong android – Yêu cầu

Cơ sở dữ liệu với SQLite

Truy vấn dữ liệu trong sql

Hướng dẫn sử dụng expandable listview trong android – Tạo project và thiết kế layout

1. Mở Android Studio -> New -> New Project -> nhập Application name, chỉ định thư mục chứa source code tại Project location -> New -> chọn “Phone and Tablet”, Minimum SDK phù hợp -> Next -> chọn “Empty Activity” -> Next -> Finish

2. Mở app/res/layout/activity_main.xml và thêm ExpandableListView

huong-dan-su-dung-explandable-listview-trong-android-1

3. Tạo một layout cho header. Chúng tôi tạo một tập tin xml có tên listview_header.xml

Chuột phải app/res/layout -> New -> Layout resource file -> nhập listview_header tại File name -> OK

huong-dan-su-dung-explandable-listview-trong-android-2

Thêm một TextView và thay đổi thuộc tính như hình bên dưới

huong-dan-su-dung-explandable-listview-trong-android-3

4. Tạo một layout khác cho phần list item và đặt tên là listview_item.xml

Thêm một TextView và thay đổi thuộc tính như hình

huong-dan-su-dung-explandable-listview-trong-android-4

Hướng dẫn sử dụng expandable listview trong android – Viết code

1/ Tạo một lớp kế thừa lớp BaseExpandableListAdapter

Chuột phải app/java/core.android -> New -> Java Class -> nhập ExpandableListViewAdapter tại Name -> OK (Trong đó core.android là tên package).

Bạn đọc tải code đầy đủ của ExpandableListViewAdapter.java

2/ Tạo một lớp tên HumanDBHandling kế thừa lớp SQLiteOpenHelper. Lớp này được sử dụng để quản lý cơ sở dữ liệu trong SQLite

Code đầy đủ của HumanDBHandling.java

3/ Mở app/java/core.android/MainActivity.java và bổ sung đoạn code được tô màu đỏ (Trong đó core.android là tên package)

public class MainActivity extends AppCompatActivity {
    ExpandableListViewAdapter elva;
    ExpandableListView elvHuman;
    ArrayList<String> alHeader;
    HashMap<String, ArrayList<String>> hmItem;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Tham chiếu ExpandableListView
        elvHuman = (ExpandableListView) findViewById(R.id.elvHuman);
        // Đọc dữ liệu từ SQLite
        loadData();
        elva = new ExpandableListViewAdapter(this, alHeader, hmItem);
        // Chỉ định Adapter cho ExpandableListView
        elvHuman.setAdapter(elva);
    }
    /*
     * Đọc dữ liệu từ SQLite
     */
    private void loadData() {
        HumanDBHandling db = new HumanDBHandling(this);
        hmItem = new HashMap<String, ArrayList<String>>();
        // Dữ liệu cho header được lấy từ bảng department
        alHeader = db.getAllDepartments();
        // Dữ liệu tương ứng với mỗi header được lấy từ bảng employee
        ArrayList<String> itItem = new ArrayList<String>();
        itItem = db.getAllEmployees("IT");
        ArrayList<String> marketingItem = new ArrayList<String>();
        marketingItem = db.getAllEmployees("MARKETING");
        hmItem.put(alHeader.get(0), itItem); // Header, Child data
        hmItem.put(alHeader.get(1), marketingItem);
    }
}

Hướng dẫn sử dụng expandable listview trong android – Build và run ứng dụng

huong-dan-su-dung-explandable-listview-trong-android-5

Khi chạm vào header

huong-dan-su-dung-explandable-listview-trong-android-6
Alert: You are not allowed to copy content or view source !!