Android Kotlin Fundamentals 07.3: GridLayout có RecyclerView

Lớp học lập trình này nằm trong khóa học về Khái niệm cơ bản về Android Kotlin. Bạn sẽ nhận được nhiều giá trị nhất từ khóa học này nếu bạn làm việc qua các lớp học lập trình theo trình tự. Tất cả các lớp học lập trình trong khóa học đều có trên trang đích của các lớp học lập trình cơ bản về Android Kotlin.

Giới thiệu

Một trong những thế mạnh chính của RecyclerView là nó cho phép bạn sử dụng trình quản lý bố cục để kiểm soát và sửa đổi chiến lược bố cục. LayoutManager quản lý cách sắp xếp các mục trong RecyclerView.

RecyclerView đi kèm với trình quản lý bố cục có sẵn cho các trường hợp sử dụng phổ biến. Ví dụ: bạn có thể dùng LinearLayout cho danh sách ngang và dọc hoặc GridLayout cho lưới. Đối với các trường hợp sử dụng phức tạp hơn, bạn cần triển khai một LayoutManager tùy chỉnh.

Trong lớp học lập trình này, bạn tìm hiểu cách hiển thị dữ liệu bằng bố cục lưới thay vì danh sách, dựa trên ứng dụng theo dõi giấc ngủ trong lớp học lập trình trước đó. (Nếu bạn không có ứng dụng từ lớp học lập trình trước đó, bạn có thể tải xuống mã dành cho người mới bắt đầu cho lớp học lập trình này.)

Kiến thức bạn cần có

Bạn cần thông thạo:

  • Xây dựng giao diện người dùng cơ bản bằng cách sử dụng Activity, Fragments và Views
  • Di chuyển giữa các mảnh và sử dụng safeArgs để chuyển dữ liệu giữa các mảnh
  • Xem mô hình, xem các mô hình và phép biến đổi
  • LiveData và người quan sát
  • Cách tạo cơ sở dữ liệu Room, tạo DAO và xác định các thực thể
  • Cách sử dụng coroutine cho tác vụ cơ sở dữ liệu và các tác vụ chạy trong thời gian dài khác
  • Cách triển khai RecyclerView cơ bản bằng bố cục Adapter, ViewHolder và mục
  • Cách triển khai liên kết dữ liệu cho RecyclerView
  • Cách tạo và sử dụng bộ chuyển đổi liên kết để chuyển đổi dữ liệu

Kiến thức bạn sẽ học được

  • Cách sử dụng LayoutManager khác để thay đổi cách dữ liệu của bạn hiển thị trong RecyclerView
  • Cách tạo bố cục lưới cho dữ liệu giấc ngủ

Bạn sẽ thực hiện

  • Xây dựng dựa trên ứng dụng theo dõi giấc ngủ trong lớp học lập trình trước đó trong loạt bài này.
  • Thay thế danh sách dữ liệu giấc ngủ do RecyclerView hiển thị trong ứng dụng bằng lưới dữ liệu giấc ngủ.

Ứng dụng theo dõi giấc ngủ có hai màn hình, được biểu thị bằng các mảnh, như minh họa trong hình bên dưới.

Màn hình đầu tiên (hiển thị ở bên trái) có các nút để bắt đầu và dừng theo dõi. Màn hình hiển thị một số dữ liệu giấc ngủ của người dùng. Nút Xóa xóa vĩnh viễn tất cả dữ liệu mà ứng dụng đã thu thập cho người dùng. Màn hình thứ hai hiển thị ở bên phải, cho biết mức chọn điểm xếp hạng chất lượng giấc ngủ.

Ứng dụng này dùng một cấu trúc đơn giản có bộ điều khiển giao diện người dùng, mô hình chế độ xem, LiveData và cơ sở dữ liệu Room để duy trì dữ liệu về giấc ngủ.

Dữ liệu giấc ngủ sẽ hiển thị trong RecyclerView. Trong lớp học lập trình này, bạn thay đổi ứng dụng để sử dụng GridLayout. Màn hình cuối cùng sẽ trông giống như ảnh chụp màn hình bên dưới.

Trong một lớp học lập trình trước đây, khi thêm RecyclerView vào fragment_sleep_tracker.xml, bạn đã thêm một LinearLayoutManager mà không có bất kỳ nội dung tùy chỉnh nào. Mã này hiển thị dữ liệu dưới dạng một danh sách dọc.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager là trình quản lý bố cục đơn giản và phổ biến nhất cho RecyclerView, đồng thời hỗ trợ cả vị trí ngang và dọc của các chế độ xem con. Ví dụ: bạn có thể dùng LinearLayoutManager để tạo một băng chuyền hình ảnh mà người dùng cuộn theo chiều ngang.

GridLayout

Một trường hợp sử dụng phổ biến khác là cần hiển thị nhiều dữ liệu cho người dùng, bạn có thể làm những việc này bằng cách dùng GridLayout. GridLayoutManager cho RecyclerView bố trí dữ liệu dưới dạng lưới có thể cuộn như minh họa dưới đây.

Từ góc độ thiết kế, GridLayout phù hợp nhất với những danh sách có thể được biểu thị dưới dạng biểu tượng hoặc hình ảnh, chẳng hạn như danh sách trong một ứng dụng duyệt ảnh. Trong ứng dụng theo dõi giấc ngủ, bạn có thể hiển thị mỗi đêm ngủ dưới dạng một lưới gồm các biểu tượng lớn. Thiết kế này sẽ giúp người dùng nhanh chóng nắm được thông tin tổng quan về chất lượng giấc ngủ của họ.

Cách GridLayout bố trí các mục

GridLayout sắp xếp các mục trong lưới gồm các hàng và cột. Với chức năng cuộn theo chiều dọc (theo mặc định), mỗi mục trong một hàng sẽ chiếm một "span". (Trong trường hợp này, một khoảng tương đương với chiều rộng của một cột.)

Trong hai ví dụ đầu tiên ở bên dưới, mỗi hàng được tạo thành từ 3 khoảng. Theo mặc định, GridLayoutManager bố trí mỗi mục trong một span cho đến khi hết số span mà bạn chỉ định. Khi đạt đến số lượng span chỉ định, các mục sẽ chuyển xuống dòng tiếp theo.

Theo mặc định, mỗi mục chiếm một khoảng, nhưng bạn có thể mở rộng một mục bằng cách chỉ định số lượng khoảng của mục đó. Ví dụ: mục hàng trên cùng ở màn hình ngoài cùng bên phải (hiển thị bên dưới) chiếm ba khoảng.

Trong bài tập này, bạn lấy RecyclerView mà bạn đã hoàn thành trong bài tập trước và cập nhật dữ liệu đó để hiển thị dữ liệu bằng GridLayoutManager. Bạn có thể tiếp tục dùng ứng dụng theo dõi giấc ngủ trong lớp học lập trình trước đó hoặc tải ứng dụng RecyclerViewGridLayout-Starter xuống từ GitHub.

Bước 1: Thay đổi LayoutManager

  1. Nếu cần, hãy tải ứng dụng RecyclerViewGridLayout-Starter xuống cho lớp học lập trình này từ GitHub và mở dự án trong Android Studio.
  2. Mở tệp bố cục fragment_sleep_tracker.xml.
  3. Xóa trình quản lý bố cục khỏi định nghĩa sleep_list RecyclerView.

Mã cần xóa:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Mở SleepTrackerFragment.kt.
  2. Trong OnCreateView(), ngay trước câu lệnh return, hãy tạo một ngành dọc mới, từ trên xuống dưới GridLayoutManager với 3 khoảng.

    Trình tạo GridLayoutManager có tối đa 4 đối số: một ngữ cảnh, đó là activity, số lượng (cột, bố cục dọc mặc định), hướng (mặc định là dọc) và liệu có phải là bố cục đảo ngược (mặc định là false) hay không. 
val manager = GridLayoutManager(activity, 3)
  1. Bên dưới dòng đó, hãy yêu cầu RecyclerView sử dụng GridLayoutManager này. RecyclerView nằm trong đối tượng liên kết và được gọi là sleepList. (Xem fragment_sleep_tracker.xml.)
binding.sleepList.layoutManager = manager

Bước 2: Thay đổi bố cục

Bố cục hiện tại trong list_item_sleep_night.xml hiển thị dữ liệu bằng cách sử dụng toàn bộ một hàng mỗi đêm. Ở bước này, bạn xác định bố cục mục vuông nhỏ gọn hơn cho lưới.

  1. Mở list_item_sleep_night.xml.
  2. Xóa sleep_length TextView vì thiết kế mới không cần thiết.
  3. Di chuyển quality_string TextView để hiển thị bên dưới ImageView. Để làm được việc đó, bạn phải cập nhật khá nhiều nội dung. Đây là bố cục cuối cùng cho quality_string TextView:
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. Xác minh trong chế độ xem Thiết kế rằng quality_string TextView nằm bên dưới ImageView.

Vì bạn đã sử dụng liên kết dữ liệu nên bạn không cần thay đổi bất kỳ giá trị nào trong Adapter. Mã sẽ chỉ hoạt động và danh sách của bạn sẽ hiển thị dưới dạng lưới.

  1. Chạy ứng dụng và quan sát cách dữ liệu giấc ngủ hiển thị trong lưới.

    Lưu ý rằng ConstraintLayout vẫn chiếm toàn bộ chiều rộng. GridLayoutManager cung cấp cho chế độ xem của bạn chiều rộng cố định, dựa trên khoảng của nó. GridLayoutManager cố gắng hết sức để đáp ứng tất cả các hạn chế khi bố trí lưới, thêm khoảng trắng hoặc cắt các mục.
  1. Trong SleepTrackerFragment, trong mã tạo GridLayoutManager, hãy thay đổi số khoảng của GridLayoutManger thành 1. Chạy ứng dụng và bạn sẽ nhận được danh sách.
val manager = GridLayoutManager(activity, 1)
  1. Thay đổi số lượng khoảng của GridLayoutManager thành 10 và chạy ứng dụng. Lưu ý rằng GridLayoutManager sẽ vừa với 10 mục nhưng các mục này hiện đã bị cắt bớt.
  2. Thay đổi khoảng thời gian thành 5 và hướng đến GridLayoutManager.VERTICAL. Chạy ứng dụng và chú ý cách bạn có thể cuộn theo chiều ngang. Bạn cần một bố cục khác để giao diện này trông đẹp mắt.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Đừng quên đặt số lượng khoảng quay trở lại thành 3 và hướng dọc để xem!

Dự án Android Studio: RecyclerViewGridLayout
  • Trình quản lý bố cục quản lý cách sắp xếp các mục trong RecyclerView.
  • RecyclerView đi kèm với trình quản lý bố cục sẵn có cho các trường hợp sử dụng phổ biến như LinearLayout cho danh sách ngang và dọc và GridLayout cho lưới.
  • Đối với các trường hợp sử dụng phức tạp hơn, hãy triển khai một LayoutManager tùy chỉnh.
  • Về khía cạnh thiết kế, GridLayout phù hợp nhất với các danh sách mặt hàng có thể được biểu thị dưới dạng biểu tượng hoặc hình ảnh.
  • GridLayout sắp xếp các mục trong lưới gồm các hàng và cột. Giả sử cuộn theo chiều dọc, mỗi mục trong một hàng sẽ chiếm phần nào của "span."
  • Bạn có thể tùy chỉnh số lượng khoảng của một mục, tạo ra các lưới thú vị hơn mà không cần trình quản lý bố cục tùy chỉnh.
  • Bạn có thể tạo một bố cục mục cho một mục trong lưới và trình quản lý bố cục sẽ sắp xếp các mục đó.
  • Bạn có thể đặt LayoutManager cho RecyclerView trong tệp bố cục XML chứa phần tử <RecyclerView> hoặc theo phương thức lập trình.

Khóa học trên Udacity:

Tài liệu dành cho nhà phát triển Android:

Phần này liệt kê các bài tập về nhà có thể được giao cho học viên đang làm việc qua lớp học lập trình này trong khóa học do người hướng dẫn tổ chức. Người hướng dẫn có thể làm những việc sau:

  • Giao bài tập về nhà nếu được yêu cầu.
  • Trao đổi với học viên cách nộp bài tập về nhà.
  • Chấm điểm bài tập về nhà.

Người hướng dẫn có thể sử dụng những đề xuất này ít hay nhiều tùy ý. Do đó, họ có thể thoải mái giao bất kỳ bài tập về nhà nào khác mà họ cảm thấy phù hợp.

Nếu bạn đang tự mình làm việc qua lớp học lập trình này, hãy thoải mái sử dụng các bài tập về nhà này để kiểm tra kiến thức của bạn.

Trả lời những câu hỏi này

Câu hỏi 1

Trình quản lý bố cục nào sau đây do Android cung cấp? Hãy chọn mọi câu phù hợp.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Câu hỏi 2

"span" là gì?

▢ Kích thước của lưới do GridLayoutManager tạo.

▢ Chiều rộng của một cột trong lưới.

▢ Kích thước của một mục trong lưới.

▢ Số cột trong lưới có hướng dọc.

Bắt đầu bài học tiếp theo: 7.4: Tương tác với các mục trong RecyclerView