Giới thiệu về GridView trong Android

Thảo luận trong 'Chuyện Phiếm' bắt đầu bởi hiennguyenht90, 22/6/16.

  1. hiennguyenht90

    hiennguyenht90 Member VIP Member

    Ở những bài trước mình đã giới thiệu cho các bạn biết về ListView, hôm nay mình sẽ giới thiệu 1 control khá giống ListView đó là GridView trong lập trình Android.

    1. Giới thiệu về GridView trong Android
    • Trong android, GridView cho phép chúng ta sắp xếp các thành phần trong một lưới gồm nhiều dòng và nhiều cột
    • ListView và GridView là lớp con của AdapterView và cả hai đều sử dụng Adapter để nhận dữ liệu, sau đó hiển thị dữ liệu từ Adapter này.
    • Điểm khác nhau là GridView có thiết lập số cột. Dữ liệu luôn đưa vào dưới dạng hình ống (mảng, list một chiều), nhưng dựa vào số cột ta thiết lập mà nó tự động ngắt hàng.


    2. Hướng dẫn tạo 1 GridView đơn giản

    Sau đây mình sẽ hướng các bạn làm 1 demo đơn giản, sử dụng gridview hiển thị bảng chữ cái như hình dưới. Khi chúng ta click vào 1 chữ cái nó sẽ hiển thị chữ cái đó lên màn hình.

    [​IMG]


    [/url]B1. Tạo project mới có tên là GridViewDemo

    B2. file xml của giao diện chính như sau.

    các bạn có thể quan sát 1 số thuộc tính của gridview, cũng tương tự listview, gridview có thêm 1 số thuộc tính như
    • numberColoums: số cột được xác định để hiển thị
    • stretchMode: xác định cách thức các cột co giãn để lấp đầy không gian trống có sẵn, sử dụng một trong các giá trị sau:none: Không co giãnspacingWidth: Khoảng cách giữa các cột được co giãncolumnWidth: Mỗi cột được co giãn bằng nhau
    • horizontalSpacing/ verticalSpacing: Xác định khoảng cách giữa các dòng và các cột

    B3. Code trong file java.

    Nếu các bạn đã làm qua listview thì có thể thấy nó rất giống với cách làm của listview. Cũng sử dụng ArrayAdapter để nhận dữ liệu sau đó hiển thị adapter đó. Sau đó run project và các bạn sẽ có kết quả như hình trên.

    3. Xây dựng Demo xử dụng GridView phức tạp hơn.

    Tiếp tục mình sẽ hướng dẫn các bạn làm 1 demo phức tạp hơn, dùng gridview hiện thị danh sách các ảnh, khi click vào 1 ảnh bất kỳ, ảnh đó sẽ được hiển thị ở 1 màn hình mới. xem hình dưới.

    [​IMG]

    B1. Tạo project mới có tên là GridViewAdvance với cấu trúc như sau.

    [​IMG]

    [/url]quan sát project ta sẽ thấy project có 2 layout. Layout main để hiển thị danh sách các ảnh, 1 layout để hiển thị chi tiết ảnh khi được click vào. Phần class cũng có 2 class, 1 class main, và 1 class là Adapter để đưa dữ liệu vào trong gridview. Các bạn cũng thấy thư mục drawable chứa các ảnh mà các bạn muốn hiển thị. các bạn hãy thêm những ảnh của các bạn vào thư mục này.

    B2. Các bạn thiết kế các màn hình.

    B3. Cấu hình code trong các class.

    sau khi đã hoàn thành code, các bạn tiến hành run project sẽ được kết quả như trên.

    Vừa rồi mình đã hướng dẫn các bạn hiểu hơn về GridView. Nếu bạn nào đã nắm rõ về ListView thì cũng không khó để hiểu về GridView. Hy vọng với 2 ví dụ trên các bạn đã có thể nắm rõ về loại control này. Chúc các bạn học tốt.
     
    Chỉnh sửa cuối: 9/11/17
    Đang tải...

Chia sẻ trang này